Workbox缓存消息事件中的URL

Question

我尝试使用消息事件在缓存中添加一些routes。

在每个页面上，都有一些关于动态的内容，我想保存在缓存中。为此，我在文档加载时向我的Service Worker发送一个URL数组：

window.addEventListener('load', () => {
if (serviceWorker.isServiceWorkerSupported()) {
serviceWorker.register();
if (typeof PRECACHE_ROUTES !== 'undefined') {
serviceWorker.sendPreCacheRoutesToSW(PRECACHE_ROUTES);
}
}
});

但是，使用这种方法，如果用户没有网络，StaleWhileRevalidate同样不起作用，你可以看到一个例子：

registerRoute(
'/',
new StaleWhileRevalidate({
cacheName: 'routes', // Work on offline
plugins,
}),
);
self.addEventListener('message', event => {
if (event.data && event.data.type === 'PRECACHE_ROUTES') {
event.data.routes.forEach(route => {
registerRoute(
route,
new StaleWhileRevalidate({
cacheName: 'routes', // Not work on offline
}),
);
});
event.waitUntil(
caches.open('routes').then(cache => cache.addAll(event.data.routes)),
);
}
});

所有url都被很好地缓存，但似乎没有在离线时被考虑在内。

有人能帮我吗？

Answer 1

我建议按照这个配方使用workbox-window和workbox-routing来实现这一点：

// From within your web page, using workbox-window:
const wb = new Workbox('/sw.js');
wb.addEventListener('activated', (event) => {
// Get the current page URL + all resources the page loaded.
// Replace with a list of URLs obtained elsewhere, as needed.
const urlsToCache = [
location.href,
...performance.getEntriesByType('resource').map((r) => r.name),
];
// Send that list of URLs to your router in the service worker.
wb.messageSW({
type: 'CACHE_URLS',
payload: {urlsToCache},
});
});
// Register the service worker after event listeners have been added.
wb.register();

这将自动将服务工作者中定义的路由应用于您在payload中提供的URL。

正如您所发现的，在message事件中为这些URL动态设置路由不会给您带来所追求的行为。