Question

我使用的是Create-React-App（CRA），它默认注册服务工作者（使用workbox），并希望在可能的情况下保持启用状态。但是，我绝对不允许我的应用加载任何外部资源-但默认情况下，CRA中的Workbox会从Google CDN加载workbox-sw.js（如this question所示）。

当前，我正在使用Content Security Policy headers来确保请求被阻止，但这当然会导致记录错误消息，我也可能根本不注册服务工作者。

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

Answer 1

使用本地工作箱文件而不是CDN 如果您不想使用CDN，则可以轻松切换到自己域中托管的Workbox文件。

最简单的方法是通过workbox-cli的copyLibraries命令或从GitHub版本获取文件，然后通过modulePathPrefix config选项告诉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（还有元标记，以防应用托管在无法轻松设置标头的位置），以便浏览器知道应用程序无法访问Google CDN（或其他任何东西，除了一些我可以控制的例外）。

解决方案的第一部分有些丑陋，我仍然会对更好的方法感兴趣，但这是我不退出CRA就能找到的最佳方法。

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

2 个答案: