Service-worker: кэшировать данные из asset-manifest.json, созданного webpack
Я пытался кэшировать и обслуживать все свои статические активы с помощью сервис-воркера. Для этого я написал код сервис-воркера, как показано ниже:
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.info('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 ищут URL измененного образа / ресурса вместо a.png. Не работает мое кеширование и обслуживание service-worker.
Вопрос: Как я могу использовать сервис-воркер для кеширования моих активов из файла json вместо созданного вручную массива filesToCache? Или как я могу кэшировать файлы сервис-воркеру при ревизии с помощью плагинов webpack
Я пытался использовать sw-precache, но не мог понять, как использовать в файле конфигурации webpack.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.
Это не сработает, так как URL-адреса изменены.
Вы можете попробовать использовать плагин webpack-workbox, это преемник sw-preache. Он генерирует 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 в качестве последнего плагина, чтобы кэшировать все файлов, созданных в процессе объединения (например, также сгенерированных другими плагинами).
Попробуйте github.com/NekR/offline-plugin. Кроме того, вы можете получить файл манифеста вручную и добавить ресурсы в кеш.