Create-react-app (Web) 中的推送通知

Question

在我的 React 应用程序中，我想实现推送通知。

到目前为止，我做了什么。 在服务工作者注册步骤中，我添加了一些代码来初始化处理用户订阅的推送管理器，现在我的应用程序将提示用户订阅推送通知。

订阅后，根据我所读到的内容，最后一步是注册捕获推送的事件侦听器并侦听推送通知单击。像这样的东西：self.addEventListener('push', function() { // Some codes here })

现在，我应该把监听器代码放在哪里？当CRA自动生成用于生产构建的服务工作线程时

Answer 1

这个文档建议在registerServiceWorker.jsfetch之后添加它。

Answer 2

以下解决方案仅适用于CRA 1.x.x！

据我了解，CRA不支持从盒子中扩展其服务工作者.js

我找到了以下解决方法。

1) 安装 cra-append-sw

npm install cra-append-sw --save

2) 在根目录下添加扩展文件 custom-sw.js

self.addEventListener("push", event => {
const data = event.data.json()
const { title } = data
const body = {
body: data.body,
icon: data.icon
}
event.waitUntil(self.registration.showNotification(title, body))
})

3) 修补 package.json 以在调试和构建过程中运行cra-append-sw

"scripts": {
...
"start": "npm-run-all -p watch-css start-js && cra-append-sw --mode dev ./custom-sw.js",
...
"build": "npm-run-all build-css build-js && cra-append-sw ./custom-sw.js",
}

Answer 3

对于任何寻找这个的人来说，这里有一个关于如何在 React 中实现推送通知的好指南。

指南：在 Node/React Web 应用程序中集成推送通知