如何在应用程序内的 PWA 中显示通知？

Posted 2023-02-24

【中文标题】如何在应用程序内的 PWA 中显示通知？

【英文标题】：How to show notifications in a PWA from within the app?

【发布时间】：2019-06-23 13:03:44

【问题描述】：

我正在使用 Angular 7 开发 PWA：http://ramstein-conference-app.herokuapp.com

由于它是一个会议应用程序，用户可以将活动标记为收藏并查看他们收藏的列表。但是，很高兴收到通知，例如活动开始前半小时。这不需要任何服务器逻辑，完全可以在 PWA 内部完成。

我可以通过 web-Push 显示推送通知，但如何在 PWA 内部显示推送通知？

swPush 似乎没有手动触发通知的方法，navigator.serviceWorker.getRegistration() 似乎也不起作用。

【参考方案1】：

我从Google Developers Page得到了答案：

if (Notification.permission == 'granted') 
  navigator.serviceWorker.getRegistration().then(function(reg) 
    var options = 
      body: 'Here is a notification body!',
      icon: 'images/example.png',
      vibrate: [100, 50, 100],
      data: 
        dateOfArrival: Date.now(),
        primaryKey: 1
      ,
      actions: [
        action: 'explore', title: 'Explore this new world',
          icon: 'images/checkmark.png',
        action: 'close', title: 'Close notification',
          icon: 'images/xmark.png',
      ]
    ;
    reg.showNotification('Hello world!', options);
  );