Kate Jeffreys on web.dev

Codelab: Build a push notification client

2020-11-11T00:00:00Z

This codelab shows you, step-by-step, how to build a push notification client. By the end of the codelab you'll have a client that:

Subscribes the user to push notifications.
Receives push messages and displays them as notifications.
Unsubscribes the user from push notifications.

This codelab is focused on helping you learn by doing and doesn't talk about concepts much. Check out How do push notifications work? to learn about push notification concepts.

The server code of this codelab is already complete. You'll only be implementing the client in this codelab. To learn how to implement a push notification server, check out Codelab: Build a push notification server.

Check out push-notifications-client-codelab-complete (source) to see the complete code.

Browser compatibility #

This codelab is known to work with the following operating system and browser combinations:

Windows: Chrome, Edge
macOS: Chrome, Firefox
Android: Chrome, Firefox

This codelab is known to not work with the following operating systems (or operating system and browser combinations):

macOS: Brave, Edge, Safari
iOS

Setup #

Get an editable copy of the code #

The code editor that you see to the right of these instructions will be called the Glitch UI throughout this codelab.

Click Remix to Edit to make the project editable.

Set up authentication #

Before you can get push notifications working, you need to set up your server and client with authentication keys. See Sign your web push protocol requests to learn why.

In the Glitch UI click Tools and then click Terminal to open the Glitch Terminal.
In the Glitch Terminal, run npx web-push generate-vapid-keys. Copy the private key and public key values.
In the Glitch UI open .env and update VAPID_PUBLIC_KEY and VAPID_PRIVATE_KEY. Set VAPID_SUBJECT to mailto:test@test.test. All of these values should be wrapped in double quotes. After making your updates, your .env file should look similar to this:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

Close the Glitch Terminal.

Open public/index.js.
Replace VAPID_PUBLIC_KEY_VALUE_HERE with the value of your public key.

Register a service worker #

Your client will eventually need a service worker to receive and display notifications. It's best to register the service worker as early as possible. See Receive and display the pushed messages as notifications for more context.

Replace the // TODO add startup logic here comment with the following code:

// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
  navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
    console.info('Service worker was registered.');
    console.info({serviceWorkerRegistration});
  }).catch(error => {
    console.error('An error occurred while registering the service worker.');
    console.error(error);
  });
  subscribeButton.disabled = false;
} else {
  console.error('Browser does not support service workers or push messages.');
}

subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);

To preview the site, press View App. Then press Fullscreen .

Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
Click the Console tab. You should see the message Service worker was registered. logged to the Console.

Request push notification permission #

You should never request permission to send push notifications on page load. Instead, your UI should ask the user if they want to receive push notifications. Once they explicitly confirm (with a button click, for example) then you can start the formal process for getting push notification permission from the browser.

In the Glitch UI click View Source to return to your code.
In public/index.js replace the // TODO comment in subscribeButtonHandler() with the following code:

// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}

Go back to the app tab and click Subscribe to push. Your browser or operating system will probably ask you if you want to let the website send you push notifications. Click Allow (or whatever equivalent phrase your browser/OS uses). In the Console you should see a message indicating whether the request was accepted or denied.

The subscription process involves interacting with a web service controlled by the browser vendor that's called a push service. Once you get the push notification subscription information you need to send it to a server and have the server store it in a database long-term. See Subscribe the client to push notifications for more context about the subscription process.

Add the following highlighted code to subscribeButtonHandler():

subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
  console.error('The user explicitly denied the permission request.');
  return;
}
if (result === 'granted') {
  console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
  console.info('User is already subscribed.');
  notifyMeButton.disabled = false;
  unsubscribeButton.disabled = false;
  return;
}
const subscription = await registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(subscription)
});

The userVisibleOnly option must be true. It may one day be possible to push messages without displaying user-visible notifications (silent pushes) but browsers currently don't allow that capability because of privacy concerns.

The applicationServerKey value relies on a utility function that converts a base64 string to a Uint8Array. This value is used for authentication between your server and the push service.

Unsubscribe from push notifications #

After a user has subscribed to push notifications, your UI needs to provide a way to unsubscribe in case the user changes their mind and no longer wants to receive push notifications.

Replace the // TODO comment in unsubscribeButtonHandler() with the following code:

// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
  console.info('Successfully unsubscribed from push notifications.');
  unsubscribeButton.disabled = true;
  subscribeButton.disabled = false;
  notifyMeButton.disabled = true;
}

Receive a push message and display it as a notification #

As mentioned before, you need a service worker to handle the receiving and displaying of messages that were pushed to the client from your server. See Receive and display the pushed messages as notifications for more detail.

Open public/service-worker.js and replace the // TODO comment in the service worker's push event handler with the following code:

// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
  body: data.options.body,
  icon: image
}
self.registration.showNotification(
  data.title, 
  options
);

Go back to the app tab.
Click Notify me. You should receive a push notification.
Try opening the URL of your app tab on other browsers (or even other devices), going through the subscription workflow, and then clicking Notify all. You should receive the same push notification on all of the browsers that you subscribed. Refer back to Browser compatibility to see a list of browser/OS combinations that are known to work or not work.

You can customize the notification in lots of ways. See the parameters of ServiceWorkerRegistration.showNotification() to learn more.

Open a URL when a user clicks a notification #

In the real-world, you'll probably use the notification as a way to re-engage your user and prompt them to visit your site. To do that, you need to configure your service worker a bit more.

Replace the // TODO comment in the service worker's notificationclick event handler with the following code:

// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));

Go back to the app tab, send yourself another notification, and then click the notification. Your browser should open a new tab and load https://web.dev.

Next steps #

Look at ServiceWorkerRegistration.showNotification() to discover all of the different ways you can customize notifications.
Read Push notifications overview for a deeper conceptual understanding of how push notifications work.
Check out Codelab: Build a push notification server to learn how to build a server that manages subscriptions and sends web push protocol requests.
Try out Notification Generator to test out all the ways you can customize notifications.

Codelab: Build a push notification server

2020-11-11T00:00:00Z

This codelab shows you, step-by-step, how to build a push notification server. By the end of the codelab you'll have a server that:

Keeps track of push notification subscriptions (i.e. the server creates a new database record when a client opts in to push notifications, and it deletes an existing database record when a client opts out)
Sends a push notification to a single client
Sends a push notification to all subscribed clients

This codelab is focused on helping you learn by doing and doesn't talk about concepts much. Check out How do push notifications work? to learn about push notification concepts.

The client code of this codelab is already complete. You'll only be implementing the server in this codelab. To learn how to implement a push notification client, check out Codelab: Build a push notification client.

Check out push-notifications-server-codelab-complete (source) to see the complete code.

Browser compatibility #

This codelab is known to work with the following operating system and browser combinations:

Windows: Chrome, Edge
macOS: Chrome, Firefox
Android: Chrome, Firefox

This codelab is known to not work with the following operating systems (or operating system and browser combinations):

macOS: Brave, Edge, Safari
iOS

Application stack #

The server is built on top of Express.js.
The web-push Node.js library handles all of the push notification logic.
Subscription data is written to a JSON file using lowdb.

You don't have to use any of these technologies to implement push notifications. We chose these technologies because they provide a reliable codelab experience.

Setup #

Get an editable copy of the code #

The code editor that you see to the right of these instructions will be called the Glitch UI throughout this codelab.

Click Remix to Edit to make the project editable.

Set up authentication #

Before you can get push notifications working, you need to set up your server and client with authentication keys. See Sign your web push protocol requests to learn why.

Open the Glitch terminal by clicking Tools and then clicking Terminal.
In the terminal, run npx web-push generate-vapid-keys. Copy the private key and public key values.
Open .env and update VAPID_PUBLIC_KEY and VAPID_PRIVATE_KEY. Set VAPID_SUBJECT to mailto:test@test.test. All of these values should be wrapped in double quotes. After making your updates, your .env file should look similar to this:

VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"

Close the Glitch terminal.

Open public/index.js.
Replace VAPID_PUBLIC_KEY_VALUE_HERE with the value of your public key.

Manage subscriptions #

Your client handles most of the subscription process. The main things your server needs to do are save new push notification subscriptions and delete old subscriptions. These subscriptions are what enable you to push messages to clients in the future. See Subscribe the client to push notifications for more context about the subscription process.

Save new subscription information #

To preview the site, press View App. Then press Fullscreen .

Click Register service worker in the app tab. In the status box you should see a message similar to this:

Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/

In the app tab click Subscribe to push. Your browser or operating system will probably ask you if you want to let the website send you push notifications. Click Allow (or whatever equivalent phrase your browser/OS uses). In the status box you should see a message similar to this:

Service worker subscribed to push.  Endpoint: https://fcm.googleapis.com/fcm/send/…

Go back to your code by clicking View Source in the Glitch UI.
Open the Glitch Logs by clicking Tools and then clicking Logs. You should see /add-subscription followed by some data. /add-subscription is the URL that the client sends a POST request to when it wants to subscribe to push notifications. The data that follows is the client's subscription information that you need to save.
Open server.js.
Update the /add-subscription route handler logic with the following code:

app.post('/add-subscription', (request, response) => {
  console.log('/add-subscription');
  console.log(request.body);
  console.log(`Subscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .push(request.body)
    .write();
  response.sendStatus(200);
});

Delete old subscription information #

Go back to the app tab.
Click Unsubscribe from push.
Look at the Glitch Logs again. You should see /remove-subscription followed by the client's subscription information.
Update the /remove-subscription route handler logic with the following code:

app.post('/remove-subscription', (request, response) => {
  console.log('/remove-subscription');
  console.log(request.body);
  console.log(`Unsubscribing ${request.body.endpoint}`);
  db.get('subscriptions')
    .remove({endpoint: request.body.endpoint})
    .write();
  response.sendStatus(200);
});

Send notifications #

As explained in Send a push message, your server doesn't actually send the push messages directly to clients. Rather, it relies on a push service to do that. Your server basically just kicks off the process of pushing messages to clients by making web service requests (web push protocol requests) to a web service (the push service) owned by the browser vendor that your user uses.

Update the /notify-me route handler logic with the following code:

app.post('/notify-me', (request, response) => {
  console.log('/notify-me');
  console.log(request.body);
  console.log(`Notifying ${request.body.endpoint}`);
  const subscription = 
      db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
  sendNotifications([subscription]);
  response.sendStatus(200);
});

Update the sendNotifications() function with the following code:

function sendNotifications(subscriptions) {
  // TODO
  // Create the notification content.
  const notification = JSON.stringify({
    title: "Hello, Notifications!",
    options: {
      body: `ID: ${Math.floor(Math.random() * 100)}`
    }
  });
  // Customize how the push service should attempt to deliver the push message.
  // And provide authentication information.
  const options = {
    TTL: 10000,
    vapidDetails: vapidDetails
  };
  // Send a push message to each client specified in the subscriptions array.
  subscriptions.forEach(subscription => {
    const endpoint = subscription.endpoint;
    const id = endpoint.substr((endpoint.length - 8), endpoint.length);
    webpush.sendNotification(subscription, notification, options)
      .then(result => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Result: ${result.statusCode}`);
      })
      .catch(error => {
        console.log(`Endpoint ID: ${id}`);
        console.log(`Error: ${error} `);
      });
  });
}

Update the /notify-all route handler logic with the following code:

app.post('/notify-all', (request, response) => {
  console.log('/notify-all');
  response.sendStatus(200);
  console.log('Notifying all subscribers');
  const subscriptions =
      db.get('subscriptions').cloneDeep().value();
  if (subscriptions.length > 0) {
    sendNotifications(subscriptions);
    response.sendStatus(200);
  } else {
    response.sendStatus(409);
  }
});

Go back to the app tab.
Click Unsubscribe from push and then click Subscribe to push again. This is only necessary because, as mentioned before, Glitch restarts the project every time you edit the code and the project is configured to delete the database on startup.
Click Notify me. You should receive a push notification. The title should be Hello, Notifications! and the body should be ID: <ID> where <ID> is a random number.
Open your app on other browsers or devices and try subscribing them to push notifications and then clicking the Notify all button. You should receive the same notification on all of your subscribed devices (i.e. the ID in the body of the push notification should be the same).

Next steps #

Read Push notifications overview for a deeper conceptual understanding of how push notifications work.
Check out Codelab: Build a push notification client to learn how to build a client that requests notification permission, subscribes the device to receive push notifications, and uses a service worker to receive push messages and display the messages as notifications.

Use push notifications to engage and re-engage users

2019-10-21T00:00:00Z

Why use push notifications? #

Notifications present small chunks of information to a user. Web apps can use notifications to tell users about important, time-sensitive events, or actions the user needs to take.

The look-and-feel of notifications varies between platforms. For example:

A notification on an Android device.

A notification on a MacBook.

Traditionally, web browsers had to initiate the exchange of information between server and client by making a request. Web push technology, on the other hand, lets you configure your server to send notifications when it makes sense for your app. A push service creates unique URLs for each subscribed service worker. Sending messages to a service worker's URL raises events on that service worker, prompting it to display a notification.

Push notifications can help users to get the most out of your app by prompting them to re-open it and use it based on the latest information.

Creating and sending notifications #

Create notifications using the Notifications API. A Notification object has a title string and an options object. For example:

let title = 'Hi!';
let options = {
  body: 'Very Important Message',
  /* other options can go here */
};
let notification = new Notification(title, options);

The title is displayed in bold when the notification is active, while the body contains additional text.

Get permission to send notifications #

To display a notification, your app must get permission from the user to do so:

Notification.requestPermission();

How do push notifications work? #

The real power of notifications comes from the combination of service workers and push technology:

Service workers can run in the background and display notifications even when your app isn't visible on screen.
Push technology lets you configure your server to send notifications when it makes sense for your app. A push service creates unique URLs for each subscribed service worker. Sending messages to a service worker's URL raises events on that service worker, prompting it to display a notification.

In the following example flow, a client registers a service worker and subscribes to push notifications. Then, the server sends a notification to the subscription endpoint.

The client and service worker use vanilla JavaScript with no extra libraries. The server is built with the express npm package on Node.js, and uses the web-push npm package to send notifications. To send information to the server, the client makes a call to a POST URL that the server has exposed.

A client app registers a service worker with ServiceWorkerContainer.register(). The registered service worker will continue to run in the background when the client is inactive.

Client code:
```
navigator.serviceWorker.register('sw.js');
```
The client requests permission from the user to send notifications.

Client code:
```
Notification.requestPermission();
```
To enable push notifications, the service worker uses PushManager.subscribe() to create a push subscription. In the call to PushManager.subscribe(), the service worker supplies the app's API key as an identifier.

Client code:
```
navigator.serviceWorker.register('sw.js').then(sw => {
  sw.pushManager.subscribe({ /* API key */ });
});
```
Push services like Firebase Cloud Messaging operate on a subscription model. When a service worker subscribes to a push service by calling PushManager.subscribe(), the push service creates a URL unique to that service worker. The URL is known as a subscription endpoint.

The client sends the subscription endpoint to the app server.

Client code:

navigator.serviceWorker.register('sw.js').then(sw => {
  sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
    sendToServer(subscription, '/new-subscription', 'POST');
  });
});

Server code:

app.post('/new-subscription', (request, response) => {
  // extract subscription from request
  // send 'OK' response
});

Part 2: Send a notification #

The web server sends a notification to the subscription endpoint.

Server code:

const webpush = require('web-push');

let options = { /* config info for cloud messaging and API key */ };
let subscription = { /* subscription created in Part 1*/ };
let payload = { /* notification */ };

webpush.sendNotification(subscription, payload, options);

Notifications sent to the subscription endpoint fire push events with the service worker as the target. The service worker receives the message and displays it to the user as a notification.

Service worker code:

self.addEventListener('push', (event) => {
  let title = { /* get notification title from event data */ }
  let options = { /* get notification options from event data */ }
  showNotification(title, options);
})

The user interacts with the notification, making the web app active if it wasn't already.

Next steps #

As a next step, implement push notifications!

We've created a series of codelabs to guide you through each step of the process.

Use a Service Worker to manage notifications

2019-10-14T00:00:00Z

In this codelab, you'll use a service worker to manage notifications. The instructions here assume that you're already familiar with service workers and the basics of requesting notification permission and sending notifications. If you need a refresher on notifications, see the Get started with the Notifications API codelab. To learn more about service workers, see Matt Gaunt's Introduction to service workers.

Remix the sample app and view it in a new tab #

Notifications are automatically blocked from the embedded Glitch app, so you won't be able to preview the app on this page. Instead, here's what to do:

Click Remix to Edit to make the project editable.
To preview the site, press View App. Then press Fullscreen .

The Glitch should open in a new Chrome tab.

As you work through this codelab, make changes to the code in the embedded Glitch on this page. Refresh the new tab with your live app to see the changes.

Get familiar with the sample app and starting code #

Start by looking at the live app in the new Chrome tab:

Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
Click the Console tab.
Make sure that the Info option is selected in the Levels dropdown next to the Filter box.
In the DevTools console for your live app, you should see a console message:

TODO: Implement getRegistration().

This is a message from a function stub that you will implement in this codelab.

Now let's take a look at the sample app's code in the embedded Glitch on this page.

In the embedded Glitch, take a look at public/index.js:
- There are four stubs for the functions you will implement: registerServiceWorker, getRegistration, unRegisterServiceWorker, and sendNotification.
- The requestPermission function requests the user's permission to send notifications. If you did the Get started with the Notifications API codelab, you'll notice that its requestPermission function is used here. The only difference is that it now also updates the user interface after resolving the permission request.
- The updateUI function refreshes all the app's buttons and messages.
- The initializePage function performs feature detection for service worker capability in the browser and updates the app user interface.
- The script waits until the page has loaded and then initializes it.
In the embedded Glitch, open public/service-worker.js.

As the name suggests, you'll add code to the app to register this file as a service worker.

Although the file is not yet in use by the app, it contains some starting code that will print a message to the console when the service worker is activated.

You'll add code to public/service-worker.js to handle notifications when the service worker receives them.

Register the service worker #

In this step, you'll write code that runs when the user clicks Register service worker in the app UI. This code will register public/service-worker.js as a service worker.

In the embedded Glitch editor, open public/index.js. Replace the registerServiceWorker function with the following code:
```
// Use the Service Worker API to register a service worker.
async function registerServiceWorker() {
  await navigator.serviceWorker.register('./service-worker.js')
  updateUI();
}
```
Note that registerServiceWorker uses the async function declaration to make handling promises more convenient. This lets you await the resolved value of a Promise. For example, the function above awaits the outcome of registering a service worker before updating the UI. See await on MDN for more information.
Now that the user can register a service worker, you can get a reference to the service worker registration object. In public/index.js, replace the getRegistration function with the following code:
```
// Get the current service worker registration.
function getRegistration() {
  return navigator.serviceWorker.getRegistration();
}
```
The function above uses the Service Worker API to get the current service worker registration, if it exists. It makes getting a reference to the service worker registration a bit more convenient.

To complete the service worker registration functionality, add code to unregister the service worker. Replace the unRegisterServiceWorker function with the following code:

// Unregister a service worker, then update the UI.
async function unRegisterServiceWorker() {
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Await the outcome of the unregistration attempt
  // so that the UI update is not superceded by a
  // returning Promise.
  await registration.unregister();
  updateUI();
}

In the tab where you're viewing the live app, reload the page. The Register service worker and Unregister service worker buttons should now be working.

Send notifications to the service worker #

In this step, you'll write code that will run when the user clicks Send a notification in the app UI. This code will create a notification, check that a service worker is registered, and then send the notification to the service worker using its postMessage method.

In the embedded Glitch editor, open public/index.js and replace the sendNotification function with the following code:

// Create and send a test notification to the service worker.
async function sendNotification() {
  // Use a random number as part of the notification data
  // (so you can tell the notifications apart during testing!)
  let randy = Math.floor(Math.random() * 100);
  let notification = {
    title: 'Test ' + randy,
    options: { body: 'Test body ' + randy }
  };
  // Get a reference to the service worker registration.
  let registration = await getRegistration();
  // Check that the service worker registration exists.
  if (registration) {
    // Check that a service worker controller exists before
    // trying to access the postMessage method.
    if (navigator.serviceWorker.controller) {
      navigator.serviceWorker.controller.postMessage(notification);
    } else {
      console.log('No service worker controller found. Try a soft reload.');
    }
  }
}

Here's what that code is doing:

sendNotification is an asynchronous function, so you can use await to get a reference to the service worker registration.
The service worker's postMessage method sends data from the app to the service worker. See the MDN documentation on postMessage for more information.
The code checks for the presence of the navigator.serviceWorker.controller property before trying to access the postMessage function. navigator.serviceWorker.controller will be null if there is no active service worker, or if the page has been force refreshed (Shift+Reload). See the ServiceWorker controller documentation on MDN for more information.

Handle notifications in the service worker #

In this step, you'll write code in the service worker that will handle messages posted to it and display notifications to the user.

In the embedded Glitch editor, open public/service-worker.js. Add the following code to the end of the file:

// Show notification when received
self.addEventListener('message', (event) => {
  let notification = event.data;
  self.registration.showNotification(
    notification.title,
    notification.options
  ).catch((error) => {
    console.log(error);
  });
});

Here's a quick explanation:

self is a reference to the service worker itself.
While the service worker now handles displaying notifications, the main app UI is still responsible for getting notification permission from the user. If permission is not granted, the promise returned by showNotification is rejected. The code above uses a catch block to avoid an uncaught Promise rejection error and handle this error a little more gracefully.

If you got stuck, see glitch.com/edit/#!/codelab-notifications-service-worker-completed for the completed code.

Go on to the next codelab in this series: Build a push notifications server.

Kate Jeffreys on web.dev

Codelab: Build a push notification client

Browser compatibility #

Setup #

Get an editable copy of the code #

Set up authentication #

Register a service worker #

Request push notification permission #

Subscribe to push notifications #

Unsubscribe from push notifications #

Receive a push message and display it as a notification #

Open a URL when a user clicks a notification #

Next steps #

Codelab: Build a push notification server

Browser compatibility #

Application stack #

Setup #

Get an editable copy of the code #

Set up authentication #

Manage subscriptions #

Save new subscription information #

Delete old subscription information #

Send notifications #

Next steps #

Use push notifications to engage and re-engage users

Why use push notifications? #

Creating and sending notifications #

Get permission to send notifications #

How do push notifications work? #

Part 1: Register a service worker and subscribe to Push #

Part 2: Send a notification #

Next steps #

Use a Service Worker to manage notifications

Remix the sample app and view it in a new tab #

Get familiar with the sample app and starting code #

Register the service worker #

Send notifications to the service worker #

Handle notifications in the service worker #