3

我想向我的反应应用程序添加推送通知。这需要服务人员，但我没有运气让他们工作。我已经运行npx create-react-app test并修改了 App.js（第 5 行，navigator.serviceWorker...是唯一的更改）：

import React from 'react';
import logo from './logo.svg';
import './App.css';

navigator.serviceWorker.register("/service_worker_test.js");

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

并将 service_worker_test.js 添加到 public 文件夹中：

self.addEventListener("activate", event => {
  console.log("[Service Worker]", "activated");
});

当我使用它运行它时npm start，它会在浏览器和日志中加载[Service Worker] activated。但是在 chrome 开发工具中，它显示 service worker<location> - deleted并且状态是redundant.

在相同的环境中，使用服务人员和推送通知创建一个非 React 应用程序对我来说非常好。

为什么要这样做？谢谢！

4

1 回答 1

3

CRA的默认行为是禁用服务工作人员。

由于此默认设置，要按原样使用自定义 SW，请删除或注释掉调用serviceWorker.unregister().

启用自定义服务工作者的serviceWorker.unregister()示例，已删除：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

navigator.serviceWorker.register("/service_worker_test.js");
于 2019-08-14T14:14:05.773 回答