Firebase存储缓存图像Webpack工作箱

Question

试图弄清楚如何从Firebase存储中缓存图像以在脱机时显示它们。已经阅读Set cache to files in Firebase Storage，并且已经研究了2天。任何帮助将不胜感激。

firebase.json
"source": "**/*.@(jpg|jpeg|gif|png|webp)",
    "headers": [
      {
        "key": "Cache-Control",
        "value": "max-age=31536000"
      }
    ]
  }

webpack构建配置。尝试将这两种方法分开并一起使用，大约有二十种方法都不可行。

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,
      },
    },
  }]
    }),

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