PWA(Progressive Web App)是H5页面的一种进阶形式,大家有空可以深入学习了解下,这里主要介绍它的离线功能。
场景是这样的:我们做了一个简单的网页应用,想让它在用户的设备上离线仍可访问,那么我们需要做哪些工作呢?
首先得确保网页通过https访问
我们还需要写一个manifest.json的文件,放在页面文件所在路径下,其内容如下:
{
"name": "浏览器扫二维码PWA App",
"short_name": "ScanQR_PWA",
"start_url": "/ScanQR.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
这些参数值你可以自行定义
然后在页面html中引用
<link rel="manifest" href="manifest.json">
还需要写一个service-worker.js文件,用于定义缓存和监听 fetch 事件
// 监听安装事件
self.addEventListener('install', function(event) {
// 缓存应用的资源
event.waitUntil(
caches.open('pwa-cache-v1')
.then(function(cache) {
return cache.addAll([
'/',
'/ScanQR.html',
'/jsQR.js',
'/ScanQR.js'
]);
})
);
});
// 监听 fetch 事件
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// 缓存命中返回缓存内容
if (response) {
return response;
}
return fetch(event.request);
})
);
});
将以下代码放在html的script开头的地方,首先注册service-worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) { console.log('Service Worker 注册成功:', registration.scope); })
.catch(function(err) { console.log('Service Worker 注册失败:', err); });
}
这样就齐活了,是不是很简单。
浏览器首次访问会注册service-worker,service-worker就开始工作了,把相关文件缓存到本地,并监听fetch事件。之后再访问,已经有缓存的情况下,就不会再访问目标网站, 而是直接从本地缓存加载页面脚本,渲染执行,目标网站即使离线,也不会影响了。
当然了,如果该网页应用是个单机版应用,那应该没有啥问题,如果还是个网络应用的话,那么仅该网页缓存走本地,其他目标资源还得走网络,它们不可访问也会影响离线效果的。