Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Service Worker Push Notifications with Angular2

I'm trying to piece together the general workflow of giving a user push notifications via the service worker.

I have followed this Google Developers service worker push notifications tutorial and am currently thinking about how I can implement this sort of thing in a small user based web app for experimentation.

In my mind, the general workflow of an web app supporting push notifications is as follows:

  • Client visits app
  • Service worker yields a push notification endpoint
  • Client sends the endpoint to the server
  • Server associates the endpoint with the current user that the endpoint was generated for
  • Every time something that your app would say is notification worthy happens, the server grabs the push notification endpoint(s) associated with the user, and hits it to send a push notification to any user devices (possibly with a data payload in Chrome 50+, etc)

Basically I just want to confirm that my general implementation thoughts with this technology are accurate, else get feedback if I am missing something.

like image 656
Dominic Farolino Avatar asked Apr 04 '16 18:04

Dominic Farolino


People also ask

What is vapid key?

What is VAPID? VAPID, which stands for Voluntary Application Server Identity, is a new way to send and receive website push notifications. Your VAPID keys allow you to send web push campaigns without having to send them through a service like Firebase Cloud Messaging (or FCM).


1 Answers

You are pretty much bang on, there are some specifics that aren't quite right (but this is largely phrasing and may be done to personally taste).

  • Client visits app
  • Register a Service Worker that you want to use for push messaging
  • Use the service worker registration to subscribe the user to push messaging, at which point the user agent will configure an endpoint + additional values for encrypting payloads (If the the user agent supports it).
  • Client sends the endpoint to the server
  • Server store the the endpoint and data for later use (The server can associate the endpoint with the current user if the server if the web app has user accounts).
  • When ever the server wishes to send a notification to a user(s), it grabs the appropriate endpoints and calls them that will wake up the service worker which can then display a notification.

Payload support in coming in Chrome 50+ and at the time of writing payload is support in Firefox, but there are 3 different versions of encryption used for the payloads in 3 different versions of Firefox, so I'd wait for the payload support story to be ironed out a little before using it / relying on it.

like image 181
Matt Gaunt Avatar answered Sep 20 '22 09:09

Matt Gaunt