如何使用vue进行离线页面？

Question

我有vue申请。当我浏览到没有网络连接的应用程序时，我想显示页面“抱歉，但没有互联网连接”。不是首页，而是这个简单的页面。

如何做到这一点？这是我尝试的方法，但是不起作用。

我使用vue / cli用pwa创建vue应用程序。

然后我在公用文件夹中创建了offline.html。

在vue.config中，我添加：

module.exports = {
  transpileDependencies: ['vuetify'],
  pwa: {
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      swSrc: 'public/service-worker.js'
    }
  }
};

在service-worker.js中，我具有以下内容：

workbox.core.setCacheNameDetails({ prefix: 'my-app' });

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

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

然后添加该内容

workbox.routing.registerRoute(
    new RegExp('.*'),
    async ({event}) => {
      try {
        return await workbox.strategies.networkFirst().handle({event});
      } catch (error) {
        return caches.match('/offline.html');
      }
    }
  );

运行此命令后：

npm run build &&  http-server -p 3001 dist

当我重新加载页面localhost：3001时，我看到脱机页面位于服务工作者缓存中。但是，当我选中脱机模式并刷新时，我看不到页面offline.html的内容。

我在这里缺少什么？

Answer 1

[尝试在服务工作者workbox.setConfig({ debug: true });中启用调试，并检查Chrome开发工具中的控制台选项卡，以查看工作箱如何处理应用程序的请求/响应。