Workbox预缓存不适用于/或index.php

Question

我是Workbox的新手，我已经设置了用于预缓存初始shell /和index.php的基本工作盒代码。当我第一次访问该URL时，链接显示在workbox-precache中，但是当我脱机时它不会加载。我已经尝试了/和/index.php，两者均未加载。当我第二次访问该链接时，/被添加到工作箱运行时缓存中，此后该链接开始脱机工作。我无法弄清楚为什么即使正确缓存后仍无法访问该链接。

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

workbox.setConfig({ debug: true });
workbox.core.setLogLevel(workbox.core.LOG_LEVELS.debug);

workbox.googleAnalytics.initialize();

if (workbox) {
  console.log(`Yay! Workbox is loaded `);
} else {
  console.log(`Boo! Workbox didn't load `);
}

workbox.precaching.precacheAndRoute([
    { url: '/', revision: '7' },
    { url: 'index.php', revision: '7' },
    { url: '/offline.html', revision: '7' },
    { url: '/404.html', revision: '7' },
    { url: 'templates/ostrainingbreeze/css/template.css', revision: '7' },
    { url: 'templates/system/css/general.css', revision: '7' },
    { url: 'templates/ostrainingbreeze/css/mobilemenu.css', revision: '7' },
    { url: 'media/jui/js/jquery.min.js', revision: '7' },
    { url: 'media/jui/js/jquery-noconflict.js', revision: '7' },
    { url: 'media/jui/js/jquery-migrate.min.js', revision: '7' },
    { url: 'media/jui/js/bootstrap.min.js', revision: '7' },
    { url: 'media/system/js/caption.js', revision: '7' },
    { url: 'media/system/js/core.js', revision: '7' },
    { url: 'media/system/js/keepalive.js', revision: '7' },
    { url: 'templates/ostrainingbreeze/js/template.js', revision: '7' },
    { url: 'templates/ostrainingbreeze/js/jquery.mobilemenu.js', revision: '7' },
    { url: 'templates/ostrainingbreeze/js/mobilemenu.js', revision: '7' },
    { url: 'templates/ostrainingbreeze/images/logo.png', revision: '7' },
    { url: 'templates/ostrainingbreeze/favicon.ico', revision: '7' },
    { url: 'media/system/css/system.css', revision: '7' },
]);

workbox.routing.registerRoute(
  new RegExp('.*\.css'),
  workbox.strategies.cacheFirst({
      cacheName: 'css-cache',
      plugins: [
      new workbox.expiration.Plugin({
          maxEntries: 50,
          maxAgeSeconds: 30 * 24 * 60 * 60,
      })
      ],
  })
);

workbox.routing.registerRoute(
  new RegExp('.*\.js'),
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'js-cache',
  })
);

workbox.routing.registerRoute(
  new RegExp('.*\.png|jpg|jpeg|svg|gif|webp'),
  workbox.strategies.cacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        maxEntries: 50,
        maxAgeSeconds: 30 * 24 * 60 * 60,
      })
    ],
  })
);

workbox.routing.registerRoute(
   new RegExp('.*\.php|html'),
  workbox.strategies.staleWhileRevalidate({
   })
);

workbox.routing.setDefaultHandler(
  workbox.strategies.staleWhileRevalidate()
);

workbox.routing.setCatchHandler(({event}) => {
  switch (event.request.destination) {
    case 'document':
      return caches.match('/offline.html');
    break;

    default:
    return Response.error();
  }
});

Answer 1

我不确定setCatchHandler是否按预期工作。您可以尝试将捕获处理程序添加到registerRoute块本身吗？下一行类似：

 workbox.routing.registerRoute(/\/$, async ({ event }) => {
    try {
      return await workbox.strategies.networkOnly().handle({ event });
    } catch (error) {
      return caches.match('/offline.html');
    }
  });