Progressive Web Apps and Web Push API - Subscriber

PWA and Web Push API Blog Series

Progressive Web Apps and Web Push API - Subscriber

In my previous post, we briefly touched upon Progressive Web Apps (PWAs) and the main components of which they consist; the app shell and service worker. In this post, we’ll cover setting up these components so that we have a client that can subscribe to push notifications.

There’s a lot of content on the web describing how to set up the components to a PWA and one example of which is Google’s Progressive Web Apps Training. Since this blog series is focused on implementing push notifications in a PWA we’ll use the demo in Google’s Introduction to Push Notifications Lab as a jump-start. This lab has an app shell and service worker already built and ready for us to leverage. I pulled out the important steps from the setup and push notifications lab instructions found in this Google training so you can get up and running with this demo quickly.

Set Up the Subscriber

The following steps will help you set up a PWA using the Google Push Notifications lab project:

Click the push-notification-lab link, then the 04-3-vapid link and you should now be viewing the running Push Notification code lab in your browser

What is All This?

We now have a PWA client that will act as the subscriber to our push notifications. The Google lab provides this (almost) complete version of a PWA that’s ready to leverage the Web Push API using the Voluntary Application Server Identification for Web Push protocol (VAPID). Now that’s a mouthful but think of it as a way to securely identify and connect the subscribers, push service and application server.

Using the VAPID protocol allows us to avoid having to create any kind of account with a cloud provider and register our application with it. Instead, we’ll build our own Node.js application server that implements this protocol and securely connect it to the PWA we started in this post. All of that is covered in the next blog post.