Caching 工作盒缓存组不正确_Caching_Workbox_Workbox Webpack Plugin

Caching 工作盒缓存组不正确

caching

Caching 工作盒缓存组不正确,caching,workbox,workbox-webpack-plugin,Caching,Workbox,Workbox Webpack Plugin,我正在使用workbox webpack插件v5（最新版本）和InjectManifest插件。以下是我的服务人员源文件：从“工作盒可缓存响应”导入{CacheableResponsePlugin}；从“workbox core”导入{clientsClaim，setCacheNameDetails，skipWaiting}；从“workbox expiration”导入{ExpirationPlugin}；进口{ 清理过时的缓存， CreateHandlerBoundTour，前切安

我正在使用workbox webpack插件v5（最新版本）和InjectManifest插件。以下是我的服务人员源文件：

从“工作盒可缓存响应”导入{CacheableResponsePlugin}；
从“workbox core”导入{clientsClaim，setCacheNameDetails，skipWaiting}；
从“workbox expiration”导入{ExpirationPlugin}；
进口{
清理过时的缓存，
CreateHandlerBoundTour，
前切安德鲁特，
}来自“工作箱预加工”；
从“工作盒路由”导入{NavigationRoute、registerRoute、setCatchHandler}；
从“工作箱策略”导入{CacheFirst，NetworkOnly，StaleWhileRevalidate}；
setCacheNameDetails({
precache:“安装时间”，
前缀：“应用程序预缓存”，
运行时：“运行时”，
后缀：“v1”，
});
cleanupOutdatedCaches（）；
clientsClaim（）；
skipWaiting（）；
预开舱单（自开舱单）；
precacheAndRoute（[{url:'/app shell.html'，修订版：'html-cache-1'}）{
cleanUrls:false，
});
const handler=createHandlerBoundToURL（'/app shell.html'）；
const navigationRoute=新的navigationRoute（处理程序）；
注册航线（导航航线）；
登记线(
/.\.css/，
新缓存优先({
cacheName:'css-cache-v1'，
})
);
登记线(
/^https:\/\/fonts\.（？：googleapis|gstatic）\.com/，
新缓存优先({
cacheName:'google-fonts-cache-v1'，
插件：[
新的CachableResponsePlugin({
状态：[0，200]，
}),
新ExpirationPlugin({
最大秒数：60*60*24*365，
maxEntries:30，
}),
],
})
);
登记线(
/.*\.js/，
新陈腐腐腐酸盐({
cacheName:'js-cache-v1'，
})
);
setCatchHandler（新的NetworkOnly（））；

我有以下问题：

缓存组不正确。除了google fonts之外的所有内容都在
```
workbox-precache-v2
```
或
```
app-precache-install-time-v1
```
缓存组下，而不是单个缓存组，如
```
css-cache-v1
```
，
```
js-cache-v1
```
。然而，20次中有1次，它显示了正确的缓存组，我就是不明白为什么
谷歌字体显示从内存缓存。对吗？它在脱机状态下工作正常，但如果用户关闭浏览器/机器并返回脱机模式，会发生什么情况
“/app shell.html”的用法正确吗？这是一个express后端应用程序，所有路由都使用*作为通配符，React Router处理路由。从功能上讲，它在离线状态下运行良好。我没有任何app-shell.html页面

谢谢你的帮助

缓存组不正确。除了google fonts之外的所有内容都在

workbox-precache-v2

或

app-precache-install-time-v1

缓存组下，而不是单个缓存组，如

css-cache-v1

，

js-cache-v1

。然而，20次中有1次，它显示了正确的缓存组，我就是不明白为什么

这取决于您的预缓存清单中的内容（即，在您的网页包构建过程中，

self.\uuuwb\u清单

被替换为什么内容）

例如，假设您有一个由webpack生成的文件，名为

bundle.js

，该文件最终出现在您的预缓存清单中。根据您的服务人员代码，该文件最终将被缓存为

app-precache-install-time-v1

——即使它也将您的运行时路径与缓存

js-cache-v1

匹配

原因是预缓存路由是在运行时路由之前注册的，因此预缓存逻辑将处理该请求，而不是运行时缓存逻辑

谷歌字体显示从内存缓存。对吗？它在脱机状态下工作正常，但如果用户关闭浏览器/机器并返回脱机模式，会发生什么情况

我相信这意味着服务人员没有处理请求，但您可以检查开发人员控制台中的workbox日志以进行验证（并查看原因）

或者，您可以更新代码以使用自定义处理程序，该处理程序只记录代码是否按如下方式运行：

registerRoute(
/^https:\/\/fonts\.（？：googleapis|gstatic）\.com/，
（{request}）=>{
//登录以确保正在调用此函数。。。
log（request.url）；
返回获取（请求）；
}
);

“/app shell.html”的用法正确吗？这是一个express后端应用程序，所有路由都使用*作为通配符，React Router处理路由。从功能上讲，它在离线状态下运行良好。我没有任何app-shell.html页面

您的快速路线是否会响应名为

app shell.html

的文件？如果是这样，那么您可能希望precache修订版是文件本身的散列（而不是

revision:'html-cache-1'

）。您现在拥有的应该可以工作，但风险是您将更改

app shell.html

的内容，部署新版本的应用程序，但您的用户仍将看到旧版本，因为您忘记了更新

修订版：“html-cache-1”

。一般来说，最好使用生成的修订作为构建步骤的一部分