Question

我正在安装一个名为Subscribers的通知系统，该系统带有一个使用create react应用程序构建的项目。他们要求开发人员下载其服务人员，并将其包括在项目的根目录中。我以前从来没有安装/使用服务工作者，这很可能是我误解的根源。

如何将服务工作者添加到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

Answer 1

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

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

添加服务人员以创建React App项目

1 个答案: