Vue.js <；未使用工作盒缓存；img/>；标签 安装程序 上下文

我的应用程序Pictalk允许用户保存和获取象形图。因此，基本上每个用户都有一组自定义的象形图。现在，它只能在线工作，但我想实现离线模式

技术细节 我用html

标记显示所有象形图。 每次我加载新的象形图时，我都会这样做：

created（）{
if（navigator.onLine）{
缓存。打开（'pictos'）。然后（（缓存）=>{
cache.add（this.collection.path）
.然后（（）=>{}）
.catch（（err）=>{console.log（err）}）
});
}
},

以下是缓存存储的屏幕截图： 正如我们看到的，URL是正确的，请求被正确缓存

问题

标记不使用我创建的workbox缓存。

找到了解决方案并进行了测试

以下是我为使其正常工作而必须修改的文件：

首先，我的

一旦

标记的来源更加灵活，我们就可以开始构建自定义注册的工作盒路由：

//插件/workboxConfig.js
workbox.routing.registerRoute(
新RegExp（'https://myapi\\.com/pictalk/image/*\\（png | jpg | jpeg），
新的workbox.strategies.CacheFirst({
cacheName:'pictos'，
插件：[
新建workbox.cacheableResponse.CacheableResponsePlugin（{statuses:[200]}），
新建workbox.rangeRequests.RangeRequestsPlugin（），
],
匹配选项：{
无知搜索：没错，
无知者：是的
}
}),
);

我必须在

nuxtjs.config.js

中声明此文件：

pwa：{
工作箱：{
cachingExtensions:“@/plugins/workboxConfig.js”
}
}

如果从主应用程序（即app.js）将图像添加到缓存中，Workbox将不知道缓存的图像，因此不会查找它们。因此，您必须将Workbox配置为通过以下两种方式之一缓存和服务缓存中的文件：或。使用Nuxt，您可能必须使用，以便每次构建项目时都可以创建一个新的服务工作者。因此，我刚刚将Nuxtjs PWA模块添加到我的项目中，并且必须添加：

workbox:{runtimeCaching:[{//应该是一个正则表达式字符串。编译为新的正则表达式（'https://my-cdn.com/.*')urlPattern:'https://my-cdn.com/.*“，//如果省略，则默认为'NetworkFirst'//handler:'NetworkFirst'，//如果省略，则默认为'GET'//method:'GET'}]}

我想在我的nuxtjs.config.js中。我会尽快尝试，如果成功，我会将解决方案发布在这里。仍然不起作用：（我得到了和以前一样的错误…这是我的git回购协议，以防有人需要它！

https://github.com/Ratatinator97/PicTalk-Frontend

如果在

pwa

部分之外有

Workbox

，则您的计算机中没有工作盒配置。如果您更正此问题，会发生什么情况？

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