Question

我的情况很简单。我想在刷新页面并且没有网络连接时显示自定义的脱机页面。

所以我使用带有工作箱pwa的cli创建vue应用程序。

这是vue.config.js的样子：

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

我将此内容添加到public/offline.html：

<html>I'm the offline page</html>

在public/service-worker.js中，我确实有以下代码：

// public/service-worker.js

const offlinePage = '/offline.html';
workbox.setConfig({
  debug: true
});

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

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

const customHandler = async args => {
  console.log('in customHandler!!1 route');
  return (await caches.match(offlinePage));
};

workbox.routing.registerRoute('/', customHandler);

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

并运行以下命令：

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

现在，我进入浏览器，访问localhost：3001，应用已启动：Service worker has been registered.

我还看到/offline页已被缓存。

问题是当我打开“离线”复选框并刷新时。

我得到404。而不是离线页面。

最奇怪的是，我的缓存存储区中没有任何东西。

不知道为什么会发生。如何在丢失的网络连接上提供离线页面？

Answer 1

尝试重现后，我从您的代码中发现了一些错误。

“ http://localhost:3001/”的FetchEvent导致网络错误响应：传递给非响应的对象 responseWith（）。

这一定意味着您的return语句出了点问题

我发现了更多奇怪的行为。当我尝试重新加载时，页面会像脱机一样崩溃。这意味着您的处理程序代码也是错误的。

return (await caches.match(offlinePage))

根据您的代码，它意味着：我不在乎我是在线还是离线，我将返回已缓存。

我对Workbox不太熟悉，但我尝试根据此Cache.match修复该错误：

const customHandler = async args => {
  console.log('in customHandler!!1 route');
  return (await caches.match(offlinePage));
};

workbox.routing.registerRoute('/', customHandler);

为什么Workbox and Vue不提供缓存中的文件？

1 个答案: