如何在基于创建-反应-应用程序中配置工作框？

Question

我使用的是CRA (CRA)，默认情况下注册服务工作人员(使用工作箱)，如果可能的话希望让他们启用。然而，我绝对不能允许我的应用程序加载任何外部源--但默认情况下，CRA中的工作框从Google加载workbox-sw.js (如这个问题中所示)。

目前，我正在使用内容安全策略标头来确保请求被阻止，但这当然会导致错误消息被记录下来，而且我可能根本不注册服务工作者。

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

Answer 1

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

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

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. 为了确保这不会被绕过，我还设置了内容安全策略标头 (也设置了元标记，以防应用程序托管在头部不易设置的某个地方)，这样浏览器就知道我的应用程序无法访问Google (或者其他任何东西，只有少数例外情况在我控制下)。

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

Answer 2

如果您不想使用CDN，则可以使用本地工作框文件而不是CDN，这样就可以很容易地切换到托管在您自己域中的Workbox文件。

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

如果将文件放在/third_party/workbox/，下，您将按如下方式使用它们：

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

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

这样，您将只使用本地工作箱文件。

前参考cdn