Question

我试图使用service-worker缓存并提供所有静态资产。为此，我编写了服务工作者代码，如下所示：

var filesToCache = [
  '/src/assets/images/a.png',
  '/src/assets/images/b.png',
  '/src/assets/images/c.svg',
  '/src/assets/images/d.svg',
];

和缓存部分就像

self.addEventListener('install', function(event) {
  console.log('cache static assets');
  event.waitUntil(
   caches.open(dataCacheName)
   .then(function(cache) {
     return cache.addAll(filesToCache);
   })
  );
});

在我使用webpack添加对所有资产的修订之前，这非常有效。我使用webpack-assets-manifest来创建修订资产的清单文件。这看起来像是：

{ "src/assets/images/a.png": "/caa80bc36fced529800b0fc6e1d10bbc.png", "src/assets/images/b.png": "/973d60bc669967dd3a29d09f45fbd7bd.png", "src/assets/images/c.svg": "/727f31a23fe57eaf9ac47c6f23fc2af8.svg", "src/assets/images/d.svg": "/b95ecc4ec50d56eca49231508d57223f.svg" }

执行此操作后，我的html个文件正在查找修订后的图片/资产网址，而不是a.png。我的service-worker缓存和服务失败。

问题：如何使用service-worker从json文件缓存我的资产而不是手动创建的filesToCache数组？或者我如何将文件缓存到使用webpack插件进行修订时的服务工作者

我曾尝试使用sw-precache，但无法详细了解如何在webpack配置文件中使用。

Answer 1

执行此操作后，我的html文件正在查找修订的图像/资产URL而不是a.png。我的服务工作者缓存和服务失败。

它不起作用，因为URL已更改。

你可以尝试使用webpack-workbox-plugin，它是sw-precache的继承者。它为版本化（散列）和非散列文件名生成precache manifest：

self.__precacheManifest = [
  {
    "revision": "62714997346e4959a02dbe66160b0cec",
    "url": "index.html"
  },
  {
    "revision": "762d606865bc8a04c69942e5ed42d226",
    "url": "assets/image1.png"  
  },
  {
    "url": "1.ef0046486233d8b9fcda.chunk.js"
  },
  {
    "url": "0.f660bbae32c384124068.chunk.js"
  }
];

请务必使用Workbox插件作为最后一个插件，以便在捆绑过程中缓存所有生成的文件（例如，由其他插件生成）。

服务工作者：从webpack创建的asset-manifest.json缓存数据

1 个答案: