0

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

在此处输入图像描述

请注意，我只缓存了我的索引文件和 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',
  ])
})

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

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

4

1 回答 1

1

你可以缓存任何你想缓存的东西。缓存数据可以有两种类型。

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

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

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

于 2018-06-18T15:05:24.697 回答