Web Push通知：如何使用Web Push PHP库？ [英] Web Push Notification: How to use Web Push PHP Library?

问题描述

我想将Web通知添加到我的网站。我在Google上进行了搜索，并找到了一些有关它的教程。如这些教程中所述，我设法向访问者显示订阅框，也可以存储他们的数据。

I Want to add Web Notification to my website. I searched on Google and found some tutorials about it. As described in these tutorials I manage to show subscription box to the visitors and I can store their data also.

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/')
  );
});

但是现在我被困住了。无论我付出多少努力，都很难理解如何从服务器发送推送消息：（

But now I'm stuck. No matter how much I am trying, It's hard to understand how to send push messages from my server :(

我在服务器上启用了SSL。我安装了PHP Web Push库及其使用 composer对服务器的依赖关系需要minishlink / web-push 命令。

I enabled SSL on my server. I installed PHP Web Push library and its dependencies on the server using composer require minishlink/web-push command.

但是下一步是什么？我可以 https://github.com/web-push-libs/web-push-php

But what's next? I can't understand their documentation also. https://github.com/web-push-libs/web-push-php

我需要一些帮助。请帮助我了解它的工作原理和操作方式。

I need some help here. Please help me to understand how it works and how to it.

谢谢

推荐答案

看看 https：// web -push-book.gauntface.com/ 了解有关Web Push的一般介绍。推送的​​方式和订阅用户 sh对您特别有趣。总结：

Take a look at https://web-push-book.gauntface.com/ for a general introduction to Web Push. The Chapter How Push Works and Subscribing a User should be particularly interesting to you. In summary:

• 在客户端，您需要通过调用 pushManager.subscribe 。更多信息这里。


• 您应将此订阅发送到您的服务器。例如，发出AJAX请求以将订阅（端点，keys.p256dh，keys.auth）发送到服务器。更多信息此处。


• 在服务器上，您可以使用PHP Web Push库发送推送消息。首先，您需要使用密钥对配置此库。然后，您需要使用预订（端点，keys.p256dh，keys.auth）发送推送消息。更多信息此处。

• At the client side you need to create a subscription by calling pushManager.subscribe. More info here.
• You should send this subscription to your server. For example, make an AJAX request to send the subscription (endpoint, keys.p256dh, keys.auth) to the server. More info here.
• On the server you send a push message using the PHP Web Push library. First, you need to configure this library with your keypair. Then, you need to use the subscription (endpoint, keys.p256dh, keys.auth) to send a push message. More info here.

这篇关于Web Push通知：如何使用Web Push PHP库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！