reactjs - 添加 Service Worker 创建 React App 项目

Question

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

如何将 Service Worker 添加到 React 项目的根目录中？说明显示 Service Worker 应在根目录中显示为 https://yoursite.com/firebase-messaging-sw.js 。为了尝试注册该 URL，我在 src/index.js 下包含了一个 Service Worker:

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

Answer 1

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

If you put a file into the public folder, it will not be processed by Webpack. Instead it will be copied into the build folder untouched. To reference assets in the public folder, you need to use a special variable called 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);
        });
      });
    }
}