从 WorkBox 预缓存的 URL 中删除 __WB_REVISION__ 查询字符串答案

【问题标题】：Removing __WB_REVISION__ Query String from URLs precached by WorkBox从 WorkBox 预缓存的 URL 中删除 __WB_REVISION__ 查询字符串
【发布时间】：2019-10-03 17:39:25
【问题描述】：

我需要从工作箱预缓存的 URL 中完全删除 __WB_REVISION__ 查询字符串。

我的项目在非常严格的规则下运行，后端将为每个请求创建唯一的缓存条目，并使用不同的查询字符串。当预缓存需要添加带有修订信息的查询字符串时，这会产生问题。

我已经尝试过使用更简单的 service-worker，但是由于我们使用带有拆分块的 webpack，我们偶然发现了很多 import() 和 window 对象问题，因此工作箱是可行的方法。

我已经尝试通过workbox.precaching.precacheAndRoute() 手动进行预缓存。任何建议将不胜感激。

工作箱配置（webpack.config.js）：

        new WorkboxPlugin.InjectManifest({
            swSrc: "./assets/js/pwa/worker.js",
            swDest: "sw.js",
            precacheManifestFilename: "precache.[manifestHash].js",
            excludeChunks: ["main", "page", "login"]
             include: [
                 /(vendor).*\.js(?=\?|$|)/,
                 /\.(woff2)(?=\?|$|)/,
                 /(?=sprite)\.(svg)(?=\?|$|)/,
            ],
        })

worker.js：

const cacheableResponse = {
    statuses: [0, 200]
};
const offlinePage = "offline.html";
workbox.precaching.precacheAndRoute([offlinePage]);

workbox.routing.registerRoute(/\/$|(.html?)$/, new workbox.strategies.NetworkOnly());
workbox.routing.setCatchHandler(({ event }) => {
    return caches.match(offlinePage);
});

workbox.precaching.precacheAndRoute(self.__precacheManifest);

编辑：将下面的代码添加到 webpack 配置中似乎可以解决，但感觉有点 hacky

manifestTransforms: [
                originalManifest => {
                    return (manifest = originalManifest.forEach(entry => delete entry.revision));
                }
            ]

【问题讨论】：

标签： javascript typescript webpack service-worker workbox

【解决方案1】：

正确的做法是在插件配置中使用dontCacheBustURLsMatching 选项。它需要一个与要预缓存的 url 匹配的正则表达式。默认值为 null（不匹配），但您可以将其配置为匹配您喜欢的任何资产。这样，您可以匹配名称中已经包含文件内容哈希的所有资产。换句话说，使用此选项，您可以说“与此正则表达式匹配的文件不应在预缓存清单中包含修订信息”。

【讨论】：