2

我正在安装一个名为 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

4

1 回答 1

2

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

如果将文件放入 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);
        });
      });
    }
}

于 2018-10-09T23:56:17.103 回答