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

Question

我正在使用默认注册服务工作者的 Create-React-App (CRA)（使用 workbox), and would like to leave them enabled if possible. However I absolutely can't allow my app to load any external sources - but Workbox in CRA by default loads workbox-sw.js from Google CDN (as seen in this question）。

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

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

Answer 1

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

最简单的方法是通过 workbox-cli 的 copyLibraries 命令或从 GitHub 版本中获取文件，然后通过 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

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

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

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

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

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

How to configure Workbox in Create-React-App based app?

webpack

service-worker

create-react-app