/web-push-notif-sample

Web Push Notification Sample

Primary LanguageC#

Understand Web Push Notification

Under the hood

  • Service worker
  • Push service

How web-push-notification work

  1. Step 1: Client side

    Client side

  2. Step 2: Send a Push Message

    Send push message

  3. Step 3: Push event the the user device

    Push event to device

Step by Step

  1. Detect browser support

    if (!("serviceWorker" in navigator)) {
  // Service Worker isn't supported on this browser, disable or hide UI.
  return;
}

if (!("PushManager" in window)) {
  // Push isn't supported on this browser, disable or hide UI.
  return;
}

  2. Register a service worker

  3. Request permission

    Ask permission

  4. Subscribe a user with PushManager

    Application server key

  5. Send message to Push service

    Web Push Protocol

  6. Handle Push event & display Notification

    self.addEventListener('push', function(event) {
    const notifPromise = self.registration.showNotification('Hello, World.');

    event.waitUntil(notifPromise);
});

References