Question

在我的React App中，我想实现推送通知。

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

订阅之后，从我读到的内容来看，最后一步是注册抓住推送并听取推送通知点击的事件监听器。类似于：self.addEventListener('push', function() { // Some codes here })

现在，我应该把听众代码放在哪里？由于CRA自动生成用于生产构建的服务工作者

Answer 1

This doco建议在fetch中registerServiceWorker.js后添加。

Answer 2

以下解决方案仅适用于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",
}

Answer 3

对于任何想要这个的人来说，这是一个关于如何在React中实现推送通知的很好的指南。

指南：Integrating Push Notifications in your Node/React Web App

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

3 个答案: