来自消息事件的 Workbox 缓存 URL

如何解决来自消息事件的 Workbox 缓存 URL

我尝试使用消息事件在缓存中添加一些 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 都被很好地缓存，但似乎没有考虑离线。

有人可以帮我吗？

解决方法

我建议按照 this recipe 使用 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();

这会自动将您的 Service Worker 中定义的路由应用到您在 payload 中提供的网址。

在您的 message 事件中为这些 URL 动态设置路由不会像您发现的那样提供您所追求的行为。