在 PWA 推送通知上添加服务器参数

【问题标题】：Add server params on PWA push notification在 PWA 推送通知上添加服务器参数
【发布时间】：2018-04-12 07:03:33
【问题描述】：

是否可以通过showNotification 方法的服务器参数添加自定义标题、正文等？

var title = 'My title';

  event.waitUntil(
    self.registration.showNotification(title, {
      body: 'My body',
      icon: 'images/icon.png',
      tag: 'my-tag'
    }));

我使用经典 Firebase 存储我的用户令牌。例如，在新文章上，发送文章标题。

【问题讨论】：

我认为你需要按照documentation中的指定参数。 showNotification() 需要 title，我们可以给它一个 options 对象。您也可以查看此tutorial 以获取更多参考。

标签： javascript push-notification service-worker progressive-web-apps

【解决方案1】：

是的。您可以使用来自服务器的数据显示自定义推送通知，这也适用于您的用例。即使用户没有积极使用您的应用程序，这些通知也可以显示。就像您如何从亚马逊应用程序接收交易通知一样，您可以通过使用如下推送事件侦听器从服务器获取数据来显示您的新文章标题和正文，并使用该数据来表达并在通知的不同部分使用它。

self.addEventListener('push', function(e) {
  var body;

  if (e.data) {
    body = e.data.text();
  } else {
    body = 'Push message no payload';
  }

  var options = {
    body: body,
    icon: 'images/notification-flat.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: 'I don't want any of this',
        icon: 'images/xmark.png'},
    ]
  };
  e.waitUntil(
    self.registration.showNotification('Push Notification', options)
  );
});

更多描述请查看this article的Receiving Data in the Service Worker部分。

【讨论】：