添加 Service Worker 以创建 React App 项目答案

【问题标题】：Add Service Worker to Create React App Project添加 Service Worker 以创建 React App 项目
【发布时间】：2019-02-16 03:42:27
【问题描述】：

我正在安装一个名为 Subscribers 的通知系统，其中包含一个使用 create react app 构建的项目。他们要求开发人员下载他们的 service worker 并将其包含在项目的根目录中。我以前从未安装/使用过 Service Worker，这很可能是我误解的根源。

如何将 Service Worker 添加到 React 项目的根目录中？说明说服务工作者应该以https://yoursite.com/firebase-messaging-sw.js 出现在根目录中。在尝试注册该 URL 时，我在 src/index.js 下包含了一个服务工作者：

import Environment from './Environment'

export default function LocalServiceWorkerRegister() {
    const swPath = `${Environment.getSelfDomain()}/firebase-messaging-sw.js`;
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register(swPath).then(function(registration) {
          // Registration was successful
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function(err) {
          // registration failed :(
          console.log('ServiceWorker registration failed: ', err);
        });
      });
    }
}

在生产中，我收到 404 错误。我尝试将 firebase-messaging-sw.js 文件放在根目录中，并在 src 文件夹下。每次都出现同样的错误。

以下是订阅者的说明： https://subscribers.freshdesk.com/support/solutions/articles/35000013054-diy-installation-instructions

【问题讨论】：

标签： reactjs service-worker create-react-app freshdesk

【解决方案1】：

public 文件夹是提供的“逃生舱”，用于从模块系统外部添加资产。来自docs：

如果你把一个文件放到 public 文件夹中，它就不会被 Webpack 处理。相反，它将被原封不动地复制到构建文件夹中。要引用公用文件夹中的资产，您需要使用一个名为PUBLIC_URL的特殊变量

因此，一旦复制到public 文件夹，您将像这样引用该文件：

import Environment from './Environment'

export default function LocalServiceWorkerRegister() {
    const swPath = `${process.env.PUBLIC_URL}/firebase-messaging-sw.js`;
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register(swPath).then(function(registration) {
          // Registration was successful
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function(err) {
          // registration failed :(
          console.log('ServiceWorker registration failed: ', err);
        });
      });
    }
}

【讨论】：