Firebase для хранения кеша изображений Webpack workbox
Попытка выяснить, как кэшировать изображения из хранилища Firebase, чтобы показать их в автономном режиме. Прочитайте Установить кэш для файлов в Firebase Storage уже и исследуете в течение 2 дней. Любая помощь будет оценена.
firebase.json
"source": "**/*.@(jpg|jpeg|gif|png|webp)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=31536000"
}
]
}
Конфигурация сборки веб-пакета. Пробовал эти два способа отдельно и вместе, и около двадцати других, не работает ни в коем случае.
new WorkboxPlugin.GenerateSW({
cacheId,
clientsClaim: true,
skipWaiting: false,
navigateFallback: 'src/view404.js',
navigateFallbackWhitelist: [/^(?!\/__)/],
runtimeCaching: [{
urlPattern: new RegExp('^https://storage\.googleapis\.com/'),
handler: 'staleWhileRevalidate',
options: {
cacheableResponse: {
statuses: [0, 200]
}
}
},
{
// Match any request ends with .png, .jpg, .jpeg or .svg.
urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
// Apply a cache-first strategy.
handler: 'networkFirst',
options: {
// Use a custom cache name.
cacheName: 'imagesa',
// Only cache 10 images.
expiration: {
maxEntries: 10,
},
},
}]
}),
сервис-worker.js
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
workbox.routing.registerNavigationRoute("src/view404.js", {
whitelist: [/^(?!\/__)/],
workbox.routing.registerRoute(/^https:\/\/storage.googleapis.com\//,
workbox.strategies.staleWhileRevalidate({ plugins: [new
workbox.cacheableResponse.Plugin({"statuses":[0,200]})] }), 'GET');
workbox.routing.registerRoute(/\.(?:png|jpg|jpeg|svg)$/,
workbox.strategies.networkFirst({ cacheName: "imagesa", plugins: [new
workbox.expiration.Plugin({"maxEntries":10,"purgeOnQuotaError":false})] }), 'GET');