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

Question

I was trying to cache and serve all my static assets using service-worker. So for that, I wrote service-worker code as below:

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

and the caching part would be like

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

This works perfectly until I add revisioning to all my assets using webpack . I use webpack-assets-manifest to create a manifest file of the revisioned assets. That will look like:

{
  "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"
}

After doing this, my html files are looking for a revisioned image/asset URL instead of a.png . There fails my service-worker caching and serving.

Question: How can I use service-worker to cache my assets from a json file instead of manually created filesToCache array? Or how can I cache the files to service worker while revisioning using webpack plugins

I have tried to use sw-precache , but couldn't figure out much about how to use in webpack config file.

Answer 1

After doing this, my html files are looking for a revisioned image/asset URL instead of a.png. There fails my service-worker caching and serving.

It won't work, since the URLs are changed.

You can try using webpack-workbox-plugin , it's the successor of sw-precache. It generates precache manifest for both versioned (hashed) and not hashed filenames:

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

Be sure to use the Workbox plugin as the last plugin, in order to cache all the files produced during the bundling process (for ex. generated by other plugins too).