Web Push Notifications Codelab

A simple implement of web push notifications.

Prerequisites

• Node.js 8+
• One of these:
  • Google Chrome 65+
  • Firefox 59+ (enable dom.moduleScripts.enabled flag)

Install

npm install

Usage

npm run dev

1. Visit http://localhost:3000/server and create a key pair.
2. Open another tab and visit http://localhost:3000/client.
3. Push the button and grant the permission.
4. Return to the first page, the server, and push the send button.

How It Works

Read these first: How Push Works, Google’s codelab

Summary

1. Server Side
   1. Create and store application server keys.
2. Client Side
   1. Retrieve application server public key from the server.
   2. Subscribe to the push service using application server public key.
      1. Get a permission from the user.
      2. Get a PushSubscription from the push service.
   3. Send the PushSubscription to the server.
3. Server Side
   1. Save the PushSubscription to the DB.
   2. Generate the data that you want to send to the user.
   3. Make an API call to the push service using a library. The user’s PushSubscription and application server keys are needed.
      1. Encrypt the data with the user public key.
      2. Send the data to the endpoint URL with a payload of encrypted data.
4. Push Service
   1. The push service routes the message to the user’s device.
5. User’s Device
   1. User’s device wakes up the browser, which finds the correct service worker and invokes a push event.
   2. The service worker wakes up just long enough to display the notification and then goes back to sleep.

Cautions

This implement uses localStorage to share data between server and client. That’s a major - and maybe the only - difference from Google’s codelab.

// client-side
const updateSubscriptionOnServer = (subscription) => {
  // TODO: Send subscription to application server
  window.localStorage.setItem('subscription', JSON.stringify(subscription))
}

// server-side
const subscription = JSON.parse(window.localStorage.getItem('subscription'))
// ...
const result = await webPush.sendNotification(subscription, data, options)

To Do

• Handle exceptions: I didn’t handle exceptions on purpose to clarify my intentions.
• Replace localStorage with a database: We have to use databases for real world applications.
• Handle pushsubscriptionchange event: I’m still confused with this. Please help me if you can.

Useful Links

Documents

Basic

• Web Push Notifications: Timely, Relevant, and Precise (Everything you need to know is here.)
• Adding Push Notifications to a Web App
• Introduction to Push Notifications
• The Service Worker Lifecycle
• Debugging Service Workers

Advanced

• Icons, Close Events, Renotify Preferences and Timestamps
• Notification Actions
• Application Server Keys and Web Push

Libraries and Implements

• web-push-libs
• ServiceWorker Cookbook
• Notification Generator