Web 推送通知：如何使用 Web 推送 PHP 库？

Posted 2023-02-21

【中文标题】Web 推送通知：如何使用 Web 推送 PHP 库？

【英文标题】：Web Push Notification: How to use Web Push PHP Library?

【发布时间】：2017-11-12 11:38:24

【问题描述】：

我想将网络通知添加到我的网站。我在谷歌上搜索并找到了一些关于它的教程。正如这些教程中所述，我设法向访问者显示订阅框，并且我还可以存储他们的数据。

Main.js

'use strict';

const applicationServerPublicKey = 'BBw_opB12mBhg66Dc94m7pOlTTHb5oqFAafbhN-BNeazWk8woAcSeHdgbmQaroCYssUkqFfoHqEJyCKw';

const pushButton = document.querySelector('.js-push-btn');

let isSubscribed = false;
let swRegistration = null;

function urlB64ToUint8Array(base64String) 
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/\-/g, '+')
    .replace(/_/g, '/');

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) 
    outputArray[i] = rawData.charCodeAt(i);
  
  return outputArray;




if ('serviceWorker' in navigator && 'PushManager' in window) 
  console.log('Service Worker and Push is supported');

  navigator.serviceWorker.register('sw.js')
  .then(function(swReg) 
    console.log('Service Worker is registered', swReg);

    swRegistration = swReg;
  )
  .catch(function(error) 
    console.error('Service Worker Error', error);
  );
 else 
  console.warn('Push messaging is not supported');
  pushButton.textContent = 'Push Not Supported';



function initialiseUI() 
  // Set the initial subscription value
  swRegistration.pushManager.getSubscription()
  .then(function(subscription) 
    isSubscribed = !(subscription === null);

    if (isSubscribed) 
      console.log('User IS subscribed.');
     else 
      console.log('User is NOT subscribed.');
    

    updateBtn();
  );


function updateBtn() 
  if (isSubscribed) 
    pushButton.textContent = 'Disable Push Messaging';
   else 
    pushButton.textContent = 'Enable Push Messaging';
  

  pushButton.disabled = false;

sw.js

'use strict';

self.addEventListener('push', function(event) 
  console.log('[Service Worker] Push Received.');
  console.log(`[Service Worker] Push had this data: "$event.data.text()"`);

  const title = 'Motoroids Lab';
  const options =  
    body: 'Motoroids',
    icon: 'images/icon.png',
    badge: 'images/badge.png'
  ;

  event.waitUntil(self.registration.showNotification(title, options));
);


self.addEventListener('notificationclick', function(event) 
  console.log('[Service Worker] Notification click Received.');

  event.notification.close();

  event.waitUntil(
    clients.openWindow('https://developers.google.com/web/')
  );
);

但现在我被困住了。无论我多么努力，都很难理解如何从我的服务器发送推送消息:(

我在我的服务器上启用了 SSL。我使用composer require minishlink/web-push 命令在服务器上安装了 php Web Push 库及其依赖项。

但是接下来呢？我也无法理解他们的文档。 https://github.com/web-push-libs/web-push-php

我需要一些帮助。请帮助我了解它是如何工作的以及如何使用它。

谢谢

【问题讨论】：

嗨...您解决了这个问题吗？我遇到了同样的问题。无法从服务器发送通知。请分享您的解决方案，以便我进行检查。

【参考方案1】：

查看https://web-push-book.gauntface.com/ 了解 Web 推送的一般介绍。 How Push Works 和 Subscribing a User 章节对您来说应该特别有趣。总结：

在客户端，您需要通过调用pushManager.subscribe 创建订阅。更多信息here。 您应该将此订阅发送到您的服务器。例如，发出 AJAX 请求以将订阅（端点、keys.p256dh、keys.auth）发送到服务器。更多信息here。 在服务器上，您使用 PHP Web Push 库发送推送消息。首先，您需要使用您的密钥对配置此库。然后，您需要使用订阅（endpoint、keys.p256dh、keys.auth）发送推送消息。更多信息here。

【参考方案2】：

您必须将此代码添加到您的项目https://developers.google.com/web/fundamentals/getting-started/codelabs/push-notifications/ 有时您必须将代码添加到您已经创建的部分

【讨论】：

欢迎来到开发人员学习、分享和建立职业生涯的地方！虽然这在理论上可以回答问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。

developers.google.com/web/fundamentals/getting-started/codelabs/… 将是您的链接的英文版本。