Progressive Web App (PWA) 是一种增强型网页应用形式,具备:
- 可被安装(添加到主屏幕)
- 离线访问
- 类似原生 App 的体验
实现 PWA 核心需要以下三个要素:
- manifest.json: 用于描述你的 Web App 的外观和行为,如图标、名称、主题色等。
- service-worker.js: 是一个浏览器后台脚本,可以拦截网络请求、缓存资源,实现离线访问。
- 在 HTML 中注册 Service Worker 和引入 manifest
第一步:添加 manifest.json
创建 static/manifest.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 中添加:
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>
部分):
<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系统。