Vue.js 当没有可用的internet连接时，如何提供offline.html？

我正在使用workbox和vuejs，我想在没有internet连接的情况下为

public/offline.html

页面提供服务

我自己为handle service worker将pwa部分编辑为

vue.config.js

：

  pwa: {
    name: 'myapp',
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      swSrc: path.resolve(__dirname, 'src/pwa/service-worker.js')
    }
  },

我在

service worker.js

中添加了支持离线服务页面的代码：

console.log('in pwa');

self.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

// The precaching code provided by Workbox. You don't need to change this part.
self.__precacheManifest = [].concat(self.__precacheManifest || []);
// workbox.precaching.suppressWarnings()
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

self.addEventListener("fetch", function(event) {
  event.respondWith(
      fetch(event.request).catch(function() {
          return caches.match(event.request).then(function(response) {
              if (response) {
                  return response;
              } else if (event.request.headers.get("accept").includes("text/html")) {
                  return caches.match(workbox.precaching.getCacheKeyForURL('/offline.html'));
              }
          });
      })
  );
});

因此，当我访问

www.myapp.com/en

或

www.myapp.com/en/about

时，我会看到脱机页面

但问题是，当我访问

www.myapp.com

时，工作盒中的index.html文件来自缓存

我可以从缓存中删除index.html，但当我联机时，我确实希望从缓存中提供索引

所以我现在进退两难，怎么做