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

Question

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

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

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

Answer 1

使用本地工作箱文件而不是 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