Reactjs 创建反应应用程序（Web）中的推送通知

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

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

订阅之后，从我所读到的内容来看，最后一步是注册捕获推送的事件侦听器，并侦听推送通知单击。类似于：

self.addEventListener（'push'，function（）{//Some code here}）

---

现在，我应该把侦听器代码放在哪里？由于CRA自动生成了用于生产构建的服务人员

建议在

registerServiceWorker.js中的
获取
之后添加它
，以下解决方案仅适用于CRA 1.x.x

据我所知，CRA不支持从盒子中扩展其service-worker.js

我发现了以下解决方法

1） 安装

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",
}

对于任何想要了解这一点的人，这里有一个关于如何在React中实现推送通知的好指南

指南：

"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",
}