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

Question

4

我正在使用Create-React-App (CRA)，默认情况下通过workbox注册服务工作者，如果可能的话，我想保留它们。然而，我绝对不能让我的应用程序加载任何外部资源 - 但是默认情况下，在CRA中，Workbox从Google CDN加载workbox-sw.js（如此问题所示）。

目前，我正在使用内容安全策略头来确保请求被阻止，但这当然会记录错误消息，我甚至可以不注册服务工作者。

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

- johndodo

2个回答

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 文件。

- sancelot

@sancelot 谢谢，但是 - 我应该把它放在哪里？package.json、registerServiceWorker.js还是其他地方？我在Create-React-App中可以编辑的所有文件中都没有看到对workbox的任何引用...我有什么遗漏吗？ - johndodo

这个线程解释了它 https://medium.com/la-creativer%C3%ADa/using-workbox-with-create-react-app-without-ejecting-b02b804854b - sancelot

@sancelot，我认为那个线程没有充分解释清楚。有人能在Stackoverflow上发布一个答案吗？谢谢！ - Jake Stout

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- johndodo · Accepted Answer

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

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

为了确保这永远不会被绕过，我还设置了内容安全策略标头（以及元标签，在应用程序托管在无法轻松设置标头的地方的情况下），以便浏览器知道我的应用程序无法访问Google CDN（或其他任何东西，有一些例外是在我的控制范围内的）。

解决方案的第一部分有点丑陋，我仍然对更好的方法感兴趣，但这是我在不退出CRA的情况下找到的最佳方法。