89 lines
2.4 KiB
Markdown
89 lines
2.4 KiB
Markdown
---
|
||
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系统。 |