<img /> 标签未使用工作箱缓存答案

【问题标题】：Workbox cache not used by <img /> tag<img /> 标签未使用工作箱缓存
【发布时间】：2021-03-06 13:00:46
【问题描述】：

设置

"workbox-cdn": "^5.1.4",
"nuxt": "^2.15.2"

上下文

我的应用程序 Pictalk 让用户可以保存和获取象形图。所以基本上每个用户都有一套自定义的象形图。目前，它只能在线工作，但我想实现离线模式。

技术细节

我用 html <img .../> 标签显示我所有的象形图。每次我加载一个新的象形图时，我都会这样做：

created(){
          if(navigator.onLine){
          caches.open('pictos').then((cache) => {
            cache.add(this.collection.path)
            .then(() => {})
            .catch((err)=> {console.log(err)})
          });
      }
  },

这是缓存存储的屏幕截图：我们看到 URL 是正确的，并且请求被正确缓存。

问题

<img .../> 标签不使用我创建的工作箱缓存。

【问题讨论】：

如果您从主应用程序（即 app.js）将图像添加到缓存中，Workbox 不会知道缓存的图像，因此不会查找它们。因此，您必须将 Workbox 配置为以两种方式之一缓存和提供缓存中的文件：runtime 或 precaching。使用 Nuxt，您可能必须使用 plugin，以便每次构建项目时都可以创建新的 Service Worker。
所以我刚刚将 Nuxtjs PWA 模块添加到我的项目中，并且我认为必须在我的 nuxtjs.config.js 中添加：workbox: { runtimeCaching: [ { // Should be a regex string. Compiles into new RegExp('https://my-cdn.com/.*') urlPattern: 'https://my-cdn.com/.*', // Defaults to `NetworkFirst` if omitted // handler: 'NetworkFirst', // Defaults to `GET` if omitted // method: 'GET' } ] }。如果成功，我会尽快尝试并在此处发布解决方案。
仍然无法正常工作 :( 我遇到与以前相同的错误...这是我的 git repo 以防有人需要它！https://github.com/Ratatinator97/PicTalk-Frontend
您的github.com/Ratatinator97/PicTalk-Frontend/blob/master/…中没有Workbox配置
您在pwa 部分之外有workbox。如果您更正此问题会发生什么？

标签： vue.js caching progressive-web-apps workbox nuxtjs

【解决方案1】：

找到解决方案here和here。

这是我必须修改才能使其工作的文件：

首先，我的<img/> 标签必须使用crossorigin="anonymous" 方法：

<img class="image" style :src="path" crossorigin="anonymous"/>

一旦<img/> 标签的来源更加灵活，我们就可以开始构建我们的自定义注册工作箱路由：

// plugins/workboxConfig.js
workbox.routing.registerRoute(
  new RegExp('https://myapi\\.somewhere\\.com/pictalk/image/.*\\.(png|jpg|jpeg)'),
  new workbox.strategies.CacheFirst({
    cacheName: 'pictos',
    plugins: [
      new workbox.cacheableResponse.CacheableResponsePlugin({ statuses: [200] }),
      new workbox.rangeRequests.RangeRequestsPlugin(),
    ],
    matchOptions: {
      ignoreSearch: true,
      ignoreVary: true
    }
  }),
);

我必须在nuxtjs.config.js 中声明此文件：

pwa: {
   workbox: {
      cachingExtensions: '@/plugins/workboxConfig.js'
   }
}

【讨论】：