title: Web Push Notification: How to use Web Push PHP Library?
body: <p>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.</p>
  
  <p><strong>Main.js</strong></p>
  
  <pre><code>'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 &lt; rawData.length; ++i) {
      outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
  }
  
  
  
  if ('serviceWorker' in navigator &amp;&amp; '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;
  }
  </code></pre>
  
  <p><strong>sw.js</strong></p>
  
  <pre><code>'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/')
    );
  });
  </code></pre>
  
  <p>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 :( </p>
  
  <p>I enabled SSL on my server. I installed PHP Web Push library and its dependencies on the server using <code>composer require minishlink/web-push</code> command.</p>
  
  <p>But what's next? I can't understand their documentation also. <code>https://github.com/web-push-libs/web-push-php</code></p>
  
  <p>I need some help here. Please help me to understand how it works and how to it. </p>
  
  <p>Thank You</p>