从脚本标签启动时从网络下载的资产

Question

我正在使用workbox和workbox- cache plugin来缓存一些资源。我当前的配置应该缓存两个文件:一个.js和一个.css。这两个文件都被正确地缓存，但问题是浏览器仍然从网络上下载它们，我不知道为什么。

下面是我的webpack配置中生成service worker的workbox插件：

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事件并没有被服务工作者截获。如果我尝试直接从Chrome中的地址栏下载文件，文件可以正确地从服务工作者加载。但是当它从我的页面的script标签加载时，它仍然是从网络上下载的。

以下是从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

任何帮助都是最好的！

Answer 1

根据您发布的HTTP流量片段，您的<script>标记将产生一个对/assets/myChunk.js?1546600720154的请求。尝试将该请求与预缓存的URL进行匹配时，1546600720154查询参数位会导致不匹配。

我建议你做两件事：

1. Configure webpack将内容散列作为URL的一部分添加，并将其用于基于时间的URL参数以进行缓存破坏。Workbox应该能够使用基于时间的URL查询参数as-is.
2. Continue读取这些散列的URL，但配置Workbox在确定是否与预缓存的URL匹配时忽略这些参数。您可以使用ignoreUrlParametersMatching选项来执行此操作。它需要一个RegExp数组，像ignoreUrlParametersMatching: [/^\d+$/]这样的东西就足以告诉Workbox忽略所有完全由数字组成的查询参数。

如果可以的话，我可能会选择选项1。