браузер — Web Push-уведомление: как использовать PHP-библиотеку Web Push?

Я хочу добавить веб-уведомление на мой сайт. Я искал в Google и нашел несколько уроков по этому поводу. Как описано в этих уроках, мне удается показать посетителям поле подписки, и я также могу хранить их данные.

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

Но сейчас я застрял. Независимо от того, сколько я пытаюсь, трудно понять, как отправлять push-сообщения с моего сервера 🙁

Я включил SSL на моем сервере. Я установил PHP Web Push библиотеку и ее зависимости на сервере, используя composer require minishlink/web-push команда.

Но что дальше? Я не могу понять их документацию также. https://github.com/web-push-libs/web-push-php

Мне нужно немного помощи здесь. Пожалуйста, помогите мне понять, как это работает и как к этому.

Благодарю вас

6

Решение

Взгляни на https://web-push-book.gauntface.com/ для общего введения в Web Push. Глава Как работает Push а также Подписка пользователя должно быть особенно интересно для вас. В итоге:

  • На стороне клиента необходимо создать подписку, позвонив pushManager.subscribe, Больше информации Вот.
  • Вы должны отправить эту подписку на свой сервер. Например, сделайте AJAX-запрос на отправку подписки (конечная точка, keys.p256dh, keys.auth) на сервер. Больше информации Вот.
  • На сервере вы отправляете push-сообщение с помощью библиотеки PHP Web Push. Во-первых, вам нужно настроить эту библиотеку с вашей парой ключей. Затем вам нужно использовать подписку (конечная точка, keys.p256dh, keys.auth) для отправки push-сообщения. Больше информации Вот.
6

Другие решения

Вы должны добавить этот код в свой проект https://developers.google.com/web/fundamentals/getting-started/codelabs/push-notifications/ иногда вам придется добавлять код к уже созданным вами частям

-1

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector