<img /> 标签未使用 Workbox 缓存

Question

设置

"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 .../> 标签不使用我创建的工作箱缓存。

Answer 1

找到解决方案 here and 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'
   }
}

<img /> 标签未使用 Workbox 缓存

Workbox cache not used by <img /> tag

caching

vue.js

progressive-web-apps

workbox

nuxtjs

设置

上下文

技术细节

问题