Send Push

[web-dave]

• convert the public Key to Uint8Array
• request permission to push
• allow push
• copy the push subscription object and save it for later
• handle push event ans show notification
• send push command
• yell if you see a push-notification

[web-dave]

index.html

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;
}

[web-dave]

index.html

subscription.pushManager
  .subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlB64ToUint8Array(applicationServerPublicKey)
  }).then(function(pushSubscription) {
    console.log('pushSub', pushSubscription.toJSON());
  });

[web-dave]

sw.js

self.addEventListener('push', function(event) {
  console.log('[Service Worker] Push Received.', event, event.data.text());
  const msg = event.data.text();
  const title = 'Angular PWA';
  const options = {
    body: msg,
    icon: 'assets/cb.png',
    badge: 'assets/cb.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

[web-dave]

push command

web-push send-notification --payload= --endpoint= --key= --auth= --vapid-subject= --vapid-pubkey= --vapid-pvtkey=

[web-dave]

Next