我正在使用带有 workbox-webpack-plugin 的 workbox 来缓存一些资产。我当前的配置应该缓存两个文件:一个 .js 和一个 .css。这两个文件都被正确缓存,但问题是浏览器仍然从网络下载它们,我不知道为什么。
这是我的 webpack 配置中生成服务工作者的工作箱插件:
new GenerateSW({
swDest: 'service-worker.js',
importWorkboxFrom: 'local',
chunks: ['myChunk'],
skipWaiting: true,
clientsClaim: true,
ignoreUrlParametersMatching: [/.*/],
cacheId: 'myCacheId',
}),
这是生成的服务工作者:
/**
* Welcome to your Workbox-powered service worker!
*
* You'll need to register this file in your web app and you should
* disable HTTP caching for this file too.
* See https://xxx
*
* The rest of the code is auto-generated. Please don't update this file
* directly; instead, make changes to your Workbox build configuration
* and re-run your build process.
* See https://xxx
*/
importScripts("workbox-v3.6.3/workbox-sw.js");
workbox.setConfig({modulePathPrefix: "workbox-v3.6.3"});
importScripts(
"precache-manifest.14645da973669ef1d2247d1863e806bd.js"
);
workbox.core.setCacheNameDetails({prefix: "myCacheId"});
workbox.skipWaiting();
workbox.clientsClaim();
/**
* The workboxSW.precacheAndRoute() method efficiently caches and responds to
* requests for URLs in the manifest.
* See https://xxx
*/
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {
"ignoreUrlParametersMatching": [/.*/]
});
和预缓存清单:
self.__precacheManifest = [
{
"revision": "9b22d66a17276ac21d45",
"url": "myChunk.js"
},
{
"revision": "9b22d66a17276ac21d45",
"url": "myChunk.css"
}
];
预缓存确实有效,但看起来 fetch 事件没有被 service worker 拦截。如果我尝试直接从 Chrome 中的地址栏下载文件,则该文件会从服务人员正确加载。但是当它从script
我的页面标签加载时,它仍然是从网络下载的。
以下是从脚本标签加载时的请求标头:
GET /assets/myChunk.js?1546600720154 HTTP/1.1
Host: localhost:5000
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Accept: */*
Referer: http://localhost:5000/xxx
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,fr-BE;q=0.8,fr;q=0.7,te-IN;q=0.6,te;q=0.5
Cookie: visitor_id=f86c312d-76e2-468d-a5c5-45c47fa3bbdc
任何帮助都会很棒!