我应该在 service-worker 安装事件中缓存哪些文件？答案

【问题标题】：What files should I cache in service-worker install event?我应该在 service-worker 安装事件中缓存哪些文件？
【发布时间】：2018-06-17 16:09:34
【问题描述】：

我按照此处Google PWA tutorial 的说明制作了具有离线功能的我自己的应用程序。当我对我的 localhost:3000 运行 Lighthouse 检查时，我收到了一份报告，说一切正常。

请注意，我只缓存了我的索引文件和 svg 图片资源。

self.addEventListener('install', event => {
  event.waitUntil(
    caches
      .open('word-cloud-v1')
      .then(cache => {
        return cache.addAll([
          '/',
          '/index.html',
          './images/paper-plane.svg',
          './images/idea.svg',
          './images/desk-lamp.svg',
          './images/stopwatch.svg',
          './images/pie-chart.svg',
        ])
      })
  )
})

但是当我离线并尝试运行我的应用程序时，我收到一些文件尚未加载的错误。

所以我回去添加更多文件到缓存。请注意，此文件不是我创建的。

.then(cache => {
  return cache.addAll([
    '/',
    '/index.html',
    './static/js/bundle.js',
    './images/paper-plane.svg',
    './images/idea.svg',
    './images/desk-lamp.svg',
    './images/stopwatch.svg',
    './images/pie-chart.svg',
  ])
})

虽然离线功能现在可以正常工作，但我还看到了一堆其他随机生成的文件，这些文件是在我尚未明确缓存的构建文件夹中创建的。那么我应该在 Service Worker 中缓存哪些文件以便它们以离线模式显示？

TLDR；除了/、/index.html 和图像之外，我们还应该缓存哪些文件，以便我们可以使用离线功能？

【问题讨论】：

标签： service-worker offline-caching pwa

【解决方案1】：

您可以缓存任何想要缓存的内容。缓存数据可以有两种类型。

1) 静态数据 - 您可以缓存所有非动态的 html/css/js/图像。当您计划缓存静态数据时，可以很容易地像下面这样对文件进行通配符，而不是选择单个文件。下面的块（angular ng service worker。你的助手类可能看起来不同）将缓存“assets”文件夹中的所有内容。

{
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }

2) 动态数据 - 您可以在 IndexDB 中缓存 API JSON 响应等动态数据。

【讨论】：