我想在我的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的应用程序,使用服务工作者和推送通知完全正常。
为什么会这样?谢谢!
unregister()
这一行注释掉。其中包含了为什么要这样做的注释和相关推理链接。 - George