如何触发 Push API 的 pushEvent 以显示通知？答案

【问题标题】：How to trigger the pushEvent of Push API in order to show the notification(s)?如何触发 Push API 的 pushEvent 以显示通知？
【发布时间】：2018-02-10 01:57:56
【问题描述】：

我正在尝试制作一个用户可以订阅的推送通知网络程序。我希望即使用户关闭页面甚至整个窗口也能显示通知，就像 Facebook 的通知系统一样。下面是我从serviceworke.rs找到的摘录代码：

index.js：

function getSubscription() {
  return navigator.serviceWorker.ready
    .then(function(registration) {
      return registration.pushManager.getSubscription();
    });
}

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js')
    .then(function() {
      console.log('service worker registered');
    });

  getSubscription()
    .then(function(subscription) {
      if (subscription) {
        console.log('Already subscribed', subscription.endpoint);
      }
    });
}

function subscribe() {
  navigator.serviceWorker.ready.then(function(registration) {
    return registration.pushManager.subscribe({ userVisibleOnly: true });
  }).then(function(subscription) {
    console.log('Subscribed', subscription.endpoint);
    return fetch('register', {
      method: 'post',
      headers: {
        'Content-type': 'application/json'
      },
      body: JSON.stringify({
        endpoint: subscription.endpoint
      })
    });
  });
}

function unsubscribe() {
  getSubscription().then(function(subscription) {
    return subscription.unsubscribe()
      .then(function() {
        console.log('Unsubscribed', subscription.endpoint);
        return fetch('unregister', {
          method: 'post',
          headers: {
            'Content-type': 'application/json'
          },
          body: JSON.stringify({
            endpoint: subscription.endpoint
          })
        });
      });
  });
}

服务工作者.js：

self.addEventListener('push', function(event) {
  event.waitUntil(self.registration.showNotification('ServiceWorker Cookbook', {
    body: 'Push Notification Subscription Management'
  }));
});

self.addEventListener('pushsubscriptionchange', function(event) {
  console.log('Subscription expired');
  event.waitUntil(
    self.registration.pushManager.subscribe({ userVisibleOnly: true })
    .then(function(subscription) {
      console.log('Subscribed after expiration', subscription.endpoint);
      return fetch('register', {
        method: 'post',
        headers: {
          'Content-type': 'application/json'
        },
        body: JSON.stringify({
          endpoint: subscription.endpoint
        })
      });
    })
  );
});

问题是：服务器如何触发service-worker.js中的push事件？即使标签页甚至整个窗口关闭，通知如何工作？

另一个问题是，当我将这个配方（推送订阅配方）放到我的服务器上并运行它时，浏览器告诉我找不到 URL 'register' 和 'unregister'，这是两个 fetch API 的第一个参数。我该如何解决这个问题？

谢谢。

P.S.我使用 PHP 作为我的服务器端语言。

【问题讨论】：

标签： javascript push-notification service-worker

【解决方案1】：

您可以使用服务器上的 WebPush 库来发送通知。这里有一个PHP版本：

https://github.com/web-push-libs/web-push-php

我没有用过PHP版本，但是nodejs版本设置起来非常简单。

接下来，（至少在 Chrome 浏览器上）您的通知将在浏览器关闭时堆叠起来，并且在下次打开浏览器时全部显示。

最后，您无法从浏览器访问您的 API，因为您的浏览器正在发送 GET 请求，而您的服务器正在等待 POST 请求。

【讨论】：