为什么默认的create-react-app应用会使服务工作者立即被删除/冗余？

Question

我想在我的React应用程序中添加推送通知。这需要服务工作者，但是我试图让它们工作时没有成功。我运行了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 添加到公共文件夹中，只需这样：

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

当我使用npm start运行它时，在浏览器中加载并记录[Service Worker] activated。但在chrome开发者工具中，服务工作者显示为<location> - deleted且状态为redundant。

在相同的环境中创建一个不带React的应用程序，使用服务工作者和推送通知完全正常。

为什么会这样？谢谢！

- Peter Somers

---

你需要将 unregister() 这一行注释掉。其中包含了为什么要这样做的注释和相关推理链接。 - George

更新：那个方法可行，非常感谢。我甚至阅读了整个文件，但就是没有“意识到”它总是取消注册任何“准备好”的内容。如果您将此作为答案发布，我会接受它！ - Peter Somers

Answer 1

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");

- Peter

---

我不想使用他们的服务工作者。我正在编写一个推送通知库，它会安装自己的服务工作者。 - Peter Somers

谢谢，您还应该更新代码上面的注释，因为现在正在使用navigator.serviceWorker而不是第5行导入的serviceWorker。根据George的评论，删除/注释掉serviceWorker.unregister()是一个重要的部分，如果您不这样做，只是添加navigator.serviceWorker.register("/service_worker_test.js");，那么unregister调用将高兴地注销“service_worker_test”工作程序。 - Peter Somers

谢谢，但还是不太正确（虽然更清晰了）。"delete or comment out the line calling navigator.serviceWorker.unregister()" 应该改为 "删除或注释掉调用 serviceWorker.unregister() 的那一行代码"。谢谢！ - Peter Somers