没有使用 create-react-app 获取 Service Worker

Question

最近，我创建了两个 React 应用程序，在这两个应用程序中，服务工作人员都不存在，而是生成了一个新文件，即“reportWebVitals.js”。这是创建新应用程序后我的 src 文件夹结构。此外，如果我们检查正在运行的应用程序，浏览器会显示“未检测到匹配的服务工作人员”

Answer 1

CRA 不会使用默认安装命令直接为 Service Worker 提供支持，因为开发人员可能不会将应用程序制作为 PWA。因此，他们决定将其保留为可选。和我一样，如果您其他人想在创建新应用程序时安装 Service Worker，请首选：

npx create-react-app my-app --template cra-template-pwa

而不是默认的npx create-react-app my-app. 

Answer 2

如果您已经有现有项目并且想要迁移到新版本的 CRA，您可以按照以下步骤操作：

1 使用 Service Worker 模板在计算机上的某个位置创建一个新的 CRA：

npx create-react-app my-app --template cra-template-pwa

2 将 service-worker.js 从新创建的应用程序复制到您的 src 目录中

3 将 package.json 中的“workbox-*”依赖项复制到 package.json 依赖项中

4 （可选）如果您需要 web-vitals，请将 web-vitals 依赖项从 package.json 复制到 package.json

并且不要忘记再次运行“yarn install”或“npm install”

就是这样

Answer 3

如果您已经存在没有模板的反应项目，则另一种解决方法：

转到文件夹index.html中的文件public并在其中添加<script>标签，您可以使用以下方式service worker从<script>标签中注册index.html：

if ("serviceWorker" in navigator) {

    navigator.serviceWorker.register("/serviceworker.js")

        .then(e => console.log("Service worker registered", e))

        .catch(e => console.log("service worker failed", e));

}

这样您就可以缓存您的公共图标文件和图像。

Answer 4

你需要运行这个命令

npx create-react-app your-app-name --template cra-template-pwa

代替

npx create-react-app your-app-name

Answer 5

运行此命令“npx create-react-app your-app-name --template cra-template-pwa”而不是“npx create-react-app your-app-name”

Answer 6

迁移全栈应用程序时，请确保执行“bukso”中的所有步骤以及：

• 将 serviceWorkerRegistration.js 文件添加到 src 的根目录中，就像 service-worker.js 一样

• 构建您的全栈应用程序，使用“npm install --globalserve”安装静态服务器

• 转到客户端目录并使用“serve -s build”在静态创建的构建文件夹上运行服务器