As promised in my article introducing here are the technical details about implementing push notifications.Originally, I wanted to focus on the specific issues I encountered on but thought it may be more useful to show a minimal version and mention some issues as a side note.

updating icon appendchild s-72

At the time of writing this (February 2017) many of these are only available in some browsers.

Therefore we will concentrate on title, body and icon which are supported in all browsers supporting push notifications.

Next, we add a function called "url B64To Uint8Array" we will later use to convert the public key, which is base 64 URL safe encoded, to a UInt8Array.

After that, we define a function called "update Push Button" - we will call this every time the status of the notifications changes and update our UI according to it.

Next, have a look at our subscribe function: By sending the subscription details to the sever we will get the endpoint and the p256dh and auth keys.

To keep this example short I will not show how to save the data in a database.

In this article, we won’t cover GCM, if you want to add support for current Samsung Internet (Version 5) and older versions of Chrome or Opera you can learn about more about it here.

With that in place, have a look at the Java Script file “push.js” where we will handle the Service Worker Registration and the subscription of notifications: 'use strict'; const app Server Key = 'BHLCrs FGJQIVgg-XNp8F59C8UFF49GAVxv YMvy CURim3n MYI5TMds Ocrh-y JM7Kbt Z3psi5Fhfva Jb U_11jwt PY'; const push Wrapper = document.query Selector('.push-wrapper'); const push Button = document.query Selector('.push-button'); let has Subscription = false; let service Worker Registration = null; let subscription Data = false; function url B64To Uint8Array(base64String) function update Push Button() function subscribe User() function unsubscribe User() function init Push() navigator.service Worker.register('sw.js') .then(function(sw) ) .catch(function(error) ); (the public VAPID Key mentioned above) and some elements and variables.

It should also be noted that some parts of the front-end are based on this tutorial Before starting with coding we need some prerequisites. You can get them either via this site or by installing the web-push library (which we will need later on the back-end) with on the terminal.