在 Create-react-app (Web) 中推送通知答案

【问题标题】：Push notification in Create-react-app (Web)在 Create-react-app (Web) 中推送通知
【发布时间】：2018-06-02 13:30:58
【问题描述】：

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

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

订阅后，根据我的阅读，最后一步是注册捕获推送的事件监听器并监听推送通知点击。比如：self.addEventListener('push', function() { // Some codes here })

现在，我应该将侦听器代码放在哪里？由于 CRA 为生产构建自动生成 service-worker

【问题讨论】：

标签： reactjs push-notification create-react-app

【解决方案1】：

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

【讨论】：

【解决方案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",
}

【讨论】：

【解决方案3】：

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

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

【讨论】：