Сервисный рабочий - получить данные с моего сервера

Question

Я использую свой сервер для отправки уведомлений по сети и отображения их с помощью сервисного сотрудника в моем клиенте.

Отправить уведомление. Я использую this php library

Чтобы получить их, я использую следующий код:

self.addEventListener('push', function(event) { 
    console.log(event); 
}); 

Проблема заключается в том, что я понятия не имею, как отправить дополнительную информацию, такую ​​как заголовок сообщения и тело мое нажмите событие. Я попытался добавить атрибут полезной нагрузки при отправке сообщения с моего сервера, но данные события пуст:

Любая идея, что это неправильно/Как я могу получить информацию, передаваемую мой сервер?

Answer 1

Первое использование web push для создания открытого ключа и закрытого ключа.

затем использовать открытый ключ, чтобы зарегистрировать работника службы.

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 (var i = 0; i < rawData.length; ++i) { 
    outputArray[i] = rawData.charCodeAt(i); 
    } 
    return outputArray; 
} 




    navigator.serviceWorker.register('/sw.js',{scope: '/'}) 
    .then(function(swReg) { 

     swRegistration = swReg; 

const applicationServerKey = urlB64ToUint8Array(applicationServerPublicKey); 
    swRegistration.pushManager.subscribe({ 
      userVisibleOnly: true, 
      applicationServerKey: applicationServerKey 
     }) 
    }) 

, который должен дать вам конечную точку - p256dh - auth.

Используйте это, чтобы отправить уведомление с помощью веб-кнопки.

Webpush.payload_send(
        endpoint: registration_token["endpoint"], 
        message: JSON.generate(data), 
        p256dh: registration_token["keys"]["p256dh"], 
        auth: registration_token["keys"]["auth"], 
         vapid: { 
           public_key: public_key, 
           private_key: private_key 
       })