---
date: '2025-06-17T21:02:27+08:00'
draft: false
title: 'Hugo静态网站增加对PWA的支持'
---

Progressive Web App (PWA) 是一种增强型网页应用形式，具备：
- 可被安装（添加到主屏幕）
- 离线访问
- 类似原生 App 的体验

实现 PWA 核心需要以下三个要素：

1. manifest.json: 用于描述你的 Web App 的外观和行为，如图标、名称、主题色等。
2. service-worker.js: 是一个浏览器后台脚本，可以拦截网络请求、缓存资源，实现离线访问。
3. 在 HTML 中注册 Service Worker 和引入 manifest

**第一步：添加 manifest.json**

创建 static/manifest.json：
```json
{
  "name": "Hugo PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#317EFB",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icons/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}
```

**第二步：添加 service-worker.js**

在 static/service-worker.js 中添加：
```javascript
const cacheName = 'v1';

const cacheAssets = [
  '/',
  '/index.html',
  '/style.css',
  // 可以添加其他需要缓存的资源路径
];

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(cacheName).then(cache => {
      console.log('Caching files...');
      return cache.addAll(cacheAssets);
    })
  );
});

self.addEventListener('fetch', e => {
  e.respondWith(
    fetch(e.request).catch(() => caches.match(e.request))
  );
});
```

**第三步：在页面中注册 service worker 和引入 manifest**

修改你的```layouts/partials/head.html```（或 ```baseof.html``` 中的 ```<head>``` 部分）：
```html
<link rel="manifest" href="/manifest.json" />
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
      .then(reg => console.log('Service Worker registered', reg))
      .catch(err => console.log('Service Worker failed', err));
  }
</script>
```

**测试**

然后就可以在浏览器中测试你的 PWA 了。并不是所有的浏览器多支持PWA。测试时，发现firefox支持PWA，表现就是在浏览器菜单里面操作```添加应用到主屏幕```后，通过桌面的ICON访问网站，是一个全屏窗口的网站，不在出现浏览器的地址栏和菜单的UI。测试发现，Edge浏览器不支持PWA。以上测试基于Android系统。