为什么 workbox 和 vue 不提供缓存中的文件？答案

【问题标题】：Why workbox and vue doesn't serve the files from the cache?为什么 workbox 和 vue 不提供缓存中的文件？
【发布时间】：2020-01-22 05:38:07
【问题描述】：

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

所以我使用带有 workbox 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。而不是离线页面。

最奇怪的是我的缓存中什么都没有。

不知道为什么会这样。如何在失去网络连接时提供离线页面？

【问题讨论】：

标签： vue.js service-worker progressive-web-apps workbox

【解决方案1】：

我在尝试重现后发现您的代码有一些错误。

“http://localhost:3001/”的 FetchEvent 导致网络错误响应：一个不是响应的对象被传递给响应（）。

这一定意味着你的退货声明有问题：

return (await caches.match(offlinePage))

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

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

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

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

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

const customHandler = async args => {
  try {
    // try to load the index.html first
    return await fetch(args.event.request)
  } catch {
    // get cache name since it auto-generated from workbox
    let cache = await caches.open(workbox.core.cacheNames.precache)

    // get url name this can't just be '/offline' since workbox add some auto-generated name
    let url = workbox.precaching.getCacheKeyForURL(offlinePage)

    return caches.match(url)
  }
};

【讨论】：