PWA Notifications Example: How I finally got it to work!

PWA’s are getting closer and closer to full functionality — but the documentation of them is, in my experience, poor. Let’s help.

________________________________________________________
Reminder: What is a PWA?
If you don’t know what a PWA is, read this or more simply, they are apps that are not delivered via app stores. They are tiny in file size, much faster, quicker to develop, have offline capabilities and even payment capabilities!

“Twitter’s iOS app for example, is currently over 110MB. The PWA, which closely mirrors the native app’s features, is just over 10MB.”

________________________________________________________

Overview:

Chrome, Edge and Firefox (and a few others) all support notifications. This is the flow that we need to go through:

1. User needs to tell their browser that they want/allow notifications from your website (via a prompt)
2. When we are granted permission, we need to get the user’s browser subscription details (these are the identifiers we need to be able to message them)
3. We need to save this subscription data to be able to send notifications when we want to
4. Later, we need to send the notification and the users subscription details to the browsers…