我正在将PWA实现到我的项目中,我已经设置了serviceworker.js,并且我正在使用workbox.js进行缓存路由和策略。
1-当用户首次访问该站点时,我将离线页面添加到安装事件缓存中:
/**
* Add on install
*/
self.addEventListener('install', (event) => {
const urls = ['/offline/'];
const cacheName = workbox.core.cacheNames.runtime;
event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(urls)))
});
2-使用特定的正则表达式捕获和缓存页面,如下所示:
https://website.com/posts/the-first-post
workbox.routing.registerRoute(
new RegExp('/posts|/articles'),
workbox.strategies.staleWhileRevalidate({
cacheName: 'pages-cache'
})
);
3-当没有互联网连接时,捕获错误并显示离线页面。
/**
* Handling Offline Page fallback
*/
this.addEventListener('fetch', event => {
if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
event.respondWith(
fetch(event.request.url).catch(error => {
// Return the offline page
return caches.match('/offline/');
})
);
}
else{
// Respond with everything else if we can
event.respondWith(caches.match(event.request)
.then(function (response) {
return response || fetch(event.request);
})
);
}
});
到目前为止,这对我来说是有用的,例如:https://website.com/contact-us/,但如果我访问我之前为“pages-cache”定义的范围内的任何url,如https://website.com/articles/231/,这将不会返回/ offline页面,因为它不在用户缓存中,我会得到一个常规的浏览器错误。
当工作箱存在特定的缓存路由时,如何处理错误存在问题。
这是申请离线后备的最佳方法吗?如何从这些路径中捕获错误:'/ articles'和'/ posts'并显示离线页面?
请参考this answer,其中有一个不同的方法来应用工作箱的fallack,我尝试了同样的结果。不确定哪种方法准确无误。
我找到了一种方法来正确使用工作箱。对于每个路由,我会添加一个这样的回退方法:
const offlinePage = '/offline/';
/**
* Pages to cache
*/
workbox.routing.registerRoute(/\/posts.|\/articles/,
async ({event}) => {
try {
return await workbox.strategies.staleWhileRevalidate({
cacheName: 'cache-pages'
}).handle({event});
} catch (error) {
return caches.match(offlinePage);
}
}
);
在使用网络优先策略的情况下,这是方法:
/**
* Pages to cache (networkFirst)
*/
var networkFirst = workbox.strategies.networkFirst({
cacheName: 'cache-pages'
});
const customHandler = async (args) => {
try {
const response = await networkFirst.handle(args);
return response || await caches.match(offlinePage);
} catch (error) {
return await caches.match(offlinePage);
}
};
workbox.routing.registerRoute(
/\/posts.|\/articles/,
customHandler
);
有关工作箱文档的更多详细信息,请访问:Provide a fallback response to a route