javascript - 为什么默认的 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 开发工具中，它显示 service worker 为 <location> - deleted状态是redundant .

在相同的环境中，使用 Service Worker 和推送通知创建非 React 应用对我来说非常好。

为什么要这样做？谢谢!

Answer 1

default behavior CRA 的目的是禁用服务人员。

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

启用自定义服务 worker ，删除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");