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');

0 ответов

Другие вопросы по тегам