在 React应用中实现Web推送通知

默认情况下，Create-react-app CRA的工作方式是在开发人员模式下不存在ServiceWorker，并且任何以前安装的sw都将被虚拟人替换。 首先，将src/index.js中的 serviceWorker.unregister() 替换为 serviceWorker.register()

接下来，我们修改src/serviceWorker.js文件中的register()功能， 删除条件： process.env.NODE_ENV === 'production' 这样，不仅仅以prod模式加载服务工作者。

默认情况下，在http：// localhost：3000 / service-worker.js上将动态生成的虚拟文件提供给dev-mode 。 要解决此问题，请将在dev-mode中指定的文件名更改为custom-sw.js。

const swFileName = process.env.NODE_ENV ==='生产' 
  ？'service-worker.js' 
  ：'custom-sw.js'const 
swUrl =`$ {process.env.PUBLIC_URL} / $ {swFileName}`;

现在让我们创建的一个服务人员的公共文件夹，将听取推事件和显示通知。 custom-sw.js

self.addEventListener('push', function(event) {
    // console.log('[Service Worker] Push Received.');
    // console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
  
    const msg = event.data.json()

    const title = '新帖提醒 - 那个Loc';
    const options = {
        body:msg.title,
        tag:msg.href,
        icon:'not.png',
    };
  
    event.waitUntil(self.registration.showNotification(title, options));
  });
  
  self.addEventListener('notificationclick', function(event) {
    // console.log('[Service Worker] Notification click Received.');
    href = event.notification.tag.length<8 ? `https://www.hostloc.com/thread-${event.notification.tag}-1-1.html` :event.notification.tag
    event.notification.close();
  
    event.waitUntil(
      clients.openWindow(href)
    );
  });

现在，在您喜欢的浏览器中启用启用“重新加载时更新”选项或等效选项的情况下打开DevTools，然后重新加载页面。结果，应该安装custom-sw.js。

额外的步骤：等等，生产模式如何？

在这种情况下，Create React App会编译build文件夹中的文件，并在其中放置一个默认服务工作程序，其中包含对现代应用程序有用的东西。如果我们决定保留它们并只添加我们的推送功能，则需要对构建过程进行一些修改。CRA中有用于服务人员构建的工作箱。而且，即使您的目的只是添加一些自定义代码，也没有内置的方法可以对其进行修改。如果您还没有准备好主动地投入到CRA上下文中的Workbox配置研究中，我认为此软件包是最方便的方法。 首先，添加一个新的depenendecy： yarn add cra-append-sw

之后，我们需要在package.json中扩展build-script，在其中添加一个新命令，该命令在main进程之后执行，这样整个行将如下所示： react-scripts build && cra-append-sw --skip-compile ./public/custom-sw.js 结果，custom-sw.js的内容将附加在build / service-worker.js文件的末尾。

最后，关于显示订阅请求的策略的一般建议。 如果用户拒绝了这样的请求，您将没有第二次机会提供订阅，直到用户取消浏览器设置中的禁止（他们不太可能想要这样做）。因此，请明智地利用此机会选择合适的时间：用户首次访问您的网站绝对不是这种情况。如果您想使用户烦恼很多次，请首先显示带有订阅要约的自定义对话框。并且只有在用户同意的情况下，才显示真实的。

https://medium.com/@seladir/how-to-implement-web-push-notifications-in-your-node-react-app-9bed79b53f34