如何在基于 Create-React-App 的应用程序中配置 Workbox？

Question

我正在使用 Create-React-App (CRA)，它默认注册服务工作者（使用 workbox），并希望尽可能启用它们。但是我绝对不能让我的应用加载任何外部源 - 但 CRA 中的 Workbox 默认从 Google CDN 加载 workbox-sw.js（如 this question 所示）。

目前我正在使用Content Security Policy headers 来确保请求被阻止，但这当然会导致错误消息被记录，我还不如根本不注册服务人员。

如何将我的应用配置为仅使用 本地 JS，最好不弹出？

Answer 1

使用本地 Workbox 文件而不是 CDN 如果您不想使用 CDN，切换到托管在您自己的域上的 Workbox 文件很容易。

最简单的方法是通过 workbox-cli 的 copyLibraries 命令或从 GitHub Release 获取文件，然后通过 modulePathPrefix 配置选项告诉 workbox-sw 在哪里可以找到这些文件。

如果您将文件放在 /third_party/workbox/ 下，您可以像这样使用它们：

importScripts('/third_party/workbox/workbox-sw.js');

workbox.setConfig({
modulePathPrefix: '/third_party/workbox/'
});

这样，您将只使用本地 Workbox 文件。

前参考https://developers.google.com/web/tools/workbox/modules/workbox-sw#using_local_workbox_files_instead_of_cdn

Answer 2

我没有找到合适的解决方案，所以我最终使用了两种机制来达到类似的效果：

1. CI 构建脚本将对 Google CDN 的引用替换为本地 URL：

sed -i -e 's#https://storage[.]googleapis[.]com/workbox-cdn/releases/[0-9.]*/workbox-sw.js#/workbox/workbox-sw.js#g' build/service-worker.js

1. 为了确保永远不会被绕过，我还设置了Content Security Policy headers（还有元标记，以防应用程序托管在无法轻松设置标题的地方），以便浏览器知道我的应用程序可以' 不访问 Google CDN（或其他任何东西，我可以控制一些例外情况）。

解决方案的第一部分有点难看，我仍然会对更好的方法感兴趣，但这是我能找到的最好的方法，而无需退出 CRA。