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

Posted 2023-02-24

【中文标题】如何触发 Push API 的 pushEvent 以显示通知？

【英文标题】：How to trigger the pushEvent of Push API in order to show the notification(s)?

【发布时间】：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 作为我的服务器端语言。

【参考方案1】：

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

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

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

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

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