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

Question

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

因为它是一个会议应用程序，所以用户可以将事件标记为收藏夹并查看其收藏夹列表。但是，最好得到通知，例如活动开始前半小时。这不需要任何服务器逻辑，并且可以完全在PWA内部完成。

我可以通过Web-Push显示推送通知，但是如何在PWA本身中显示推送通知？

swPush似乎没有手动触发通知的方法，并且navigator.serviceWorker.getRegistration()似乎无效。

Answer 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);
  });
}