Setup Push Notification For PWA

<script>if ('serviceWorker' in navigator && 'PushManager' in window) {  console.log('Service Worker and Push is supported');  navigator.serviceWorker.register('/sw-push-notification.js')      .then(function(registration) {        console.log('Service Worker is registered', registration);        // our PushManager helper methods        window.lua.pwa.checkSubscription(registration);      })      .catch(function(error) {        console.error('Service Worker Error', error);      });} else {  console.warn('Push messaging is not supported');}</script>

// if you send a push notification from server, it might be instant or delay up 10 minutes// https://developer.mozilla.org/en-US/docs/Web/API/PushEventself.addEventListener('push', function(event) {  console.log('[Service Worker] Push Received.');  // push notification can send event.data.json() as well  console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);  // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification  const title = 'MyApp Alert';  const options = {    body: event.data.text(),    icon: '/static/img/icon-512.png',    badge: '/static/img/icon-96.png',    tag: 'alert'  };  event.waitUntil(self.registration.showNotification(title, options));});self.addEventListener('notificationclick', function(event) {  // can handle different type of notification based on event.notification.tag  console.log(`[Service Worker] Notification click Received: ${event.notification.tag}`);  event.notification.close();  // Modify code from https://developer.mozilla.org/en-US/docs/Web/API/WindowClient/focus  // find existing "/notification" window to focus on, or open a new one if not available  event.waitUntil(clients.matchAll({    type: "window"  }).then(function(clientList) {    const client = clientList.find(function(c) {      new URL(c.url).pathname === '/notification'    });    if (client !== undefined) {      return client.focus();    }    return clients.openWindow('/notification');  }));});

import axios from 'axios'window.lua.pwa = {  // public key of the push notification server.   // if you are using the Test Push Notification Server,   // get public key from https://web-push-codelab.glitch.me/  applicationServerPublicKey: 'xxx',  registration: null,  isSubscribed: false,  // render a button UI to subscribe/unsubscribe push notification  // I am using Vue.js for the UI, though you can onvert it to use plain javascript or jQuery  initUi(options) {    if ($('#lua-home-actionbar').length) {      new Vue({        el: '#lua-home-actionbar',        data: {          isSubscribed: options.isSubscribed        },        template: '<HomeActionBar :isSubscribedProp="isSubscribed" />',        components: { HomeActionBar },      })    }  },  // call when service worker is registered  checkSubscription(registration) {    registration.pushManager.getSubscription()      .then((subscription) => {        this.isSubscribed = !(subscription === null)        // send subscription info to server (the server will send push notification to this subscription)        this.updateSubscriptionOnServer({ subscription: subscription, is_active: this.isSubscribed })        this.registration = registration        // update UI to indicate Push Notification is subscribed or not        this.initUi({ isSubscribed: this.isSubscribed })      })  },  // subscribe push notification  subscribe() {    const applicationServerKey = this.urlB64ToUint8Array(this.applicationServerPublicKey)    return this.registration.pushManager.subscribe({      // https://developers.google.com/web/fundamentals/push-notifications/subscribing-a-user#uservisibleonly_options      // symbolic agreement with the browser that the web app will show       // a notification every time a push is received (i.e. no silent push).      userVisibleOnly: true,      applicationServerKey    })      .then((subscription) => {        // subscription successful, send subscription info to server        this.updateSubscriptionOnServer({ subscription, is_active: true })        this.isSubscribed = true        return true      })  },  // unsubscribe push notification  unsubscribe() {    return this.registration.pushManager.getSubscription()      .then((subscription) => {        if (subscription) {          // unsubscribe successful, update server          this.updateSubscriptionOnServer({ subscription, is_active: false })          this.isSubscribed = false          return subscription.unsubscribe()        }        return false      })  },  // send subscription info to server  updateSubscriptionOnServer({ subscription, is_active }) {    // if you are using https://web-push-codelab.glitch.me/ as a Test Push Notification Server    // you need to copy and paste this string    console.log(JSON.stringify(subscription))    // if you implemented your own Push Notification Server    /*    axios({      method: 'post',      url: '/_intents/subscribe',      data: {        subscription_info: JSON.stringify(subscription),        is_active: is_active      }    })      .then((response) => {        console.log(response.data)      })      .catch((error) => {        console.log(error)      })      */  },  // convert applicationServerPublicKey  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  }}

<template>  <div>    <button type="button" class="btn btn-primary" @click.prevent="subscribe">{{ buttonText }}</button>  </div></template><script>import axios from 'axios'export default {  name: 'HomeActionBar',  props: ['isSubscribedProp'],  data() {    return {      isSubscribed: this.isSubscribedProp    }  },  computed: {    buttonText() {      if (Notification.permission === 'denied') {        window.lua.pwa.updateSubscriptionOnServer(null)        return 'Notification Blocked'      }      if (!this.isSubscribed) {        return 'Enable Push Notification'      }      return 'Disable Push Notification'    },  },  methods: {    subscribe() {      if (Notification.permission === 'denied') {        console.log('Notification is Blocked')        return      }      if (this.isSubscribed) {        window.lua.pwa.unsubscribe()          .then((result) => {            if (result) {              console.log('Unsubscribe successful')              this.isSubscribed = false            }          })          .catch((error) => {            console.log(error.message)          })      } else {        window.lua.pwa.subscribe()          .then((result) => {            if (result) {              console.log('Subscribe successful')              this.isSubscribed = true            }          })          .catch((error) => {            // use null to trigger update if user block notification            this.isSubscribed = null            console.log(error.message)          })      }    },  }}</script>