时间戳

首页 > 解决方案 > 如何在基于 Create-React-App 的应用程序中配置 Workbox？

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

问题描述

我正在使用 Create-React-App (CRA)，它默认注册服务工作者（使用workbox），并希望尽可能让它们保持启用状态。但是，我绝对不能让我的应用程序加载任何外部源 - 但 CRA 中的 Workbox 默认workbox-sw.js从 Google CDN 加载（如本问题所示）。

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

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

标签： webpackservice-workercreate-react-app

解决方案

使用本地 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 文件。

预先参考https://developers.google.com/web/tools/workbox/modules/workbox-sw#using_local_workbox_files_instead_of_cdn

推荐阅读