Using the WebPush native API.

I’ve used the new WebPush native API. This is a new standard that is adopted by most browser. It use the same principle that every notification system.

How it works ?

This process happen in two phases. First the Subscription when the client start THEN the Push phase.

Step by step subscription phase :

• We generate a VAPID Key pair (public and private).
  • The public VAPID key goes to the JS app and then sent to the Push service (google/apple/microsoft and Mozilla).
  • The private VAPID key is stored to a secured env variable for the server.
  • This key allow to authenticate the server to prevent anyone to push a notification to the endpoint.
• JS app create a service worker (in our case, re-use the flutter service worker).
• JS app ask the user for permission to send notification
• JS app subscribe to the pushNotif system (browser API) and link it to the service worker.
  • During the subscription, JS App give the VAPID public key to the browser.
  • The browser generate a Encryption/Decryption keyPair to allow the server to encrypt the message then decrypt it later.
  • The browser create a “subscription object” that contain an endpoint and the encryption key + auth key for future encryption/sign.
  • The linked service worker will receive the push notifications later.
• JS app jsonify the “subscription object” and send it to the server.
• The Server store this “subscription object” to the database.

Step by step PUSH phase :

• The Lenra App call the Lenra notification API
• The Lenra Server will get the “subscription object” for the user’s device.
• The Lenra Server send the notification using the web_push_encryption Library for Elixir :
  • The Server sign the notification (using the VAPID private key)
  • The Server encrypt the notification (using the Encryption key. NOT the VAPID key).
  • The and send it to the endpoint (HTTP Request to the Push service).
• The PushService check the signature using the VAPID public key
• The PushService then send the notification to the browser.
• The Browser decrypt the notification using the private decryption key.