在Create-react-app（Web）中使用推送通知

Question

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

目前为止，我已经完成了以下工作。在服务工作者注册阶段，我添加了一些代码来初始化处理用户订阅的推送管理器，现在我的应用程序将提示用户订阅推送通知。

在订阅之后，根据我所读到的，最后一步是注册事件侦听器，以捕获推送并监听推送通知的单击。类似于：self.addEventListener('push', function() { // Some codes here }) 那么，我应该把监听器代码放在哪里？因为CRA会自动生成生产构建的服务工作者。

- Matt Downey

Answer 1

对于任何想要实现React推送通知的人，这里有一个很好的指南。

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

- Caio Mar

Answer 2

这份文档建议在registerServiceWorker.js文件中的fetch之后添加它。

- markau

Answer 3

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

据我了解，CRA 不支持直接扩展其 service-worker.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",
}

- Vladimir Vlasov