在 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

发表评论

邮箱地址不会被公开。 必填项已用*标注