How To Register A Service Worker And Send Push Notifications

Push button notifications in Web Apps via Service Workers

Push button notifications, a way in which content finds the user instead of other fashion around. Once a feature only known for native mobile applications, take plant a way to all kind of web apps, progressive web apps.

First of all, let's reply the nearly obvious question, what are button notifications?

According to Wikipedia,

A push notification is a message that is "pushed" from backend server or awarding to user interface, e.1000. (But non express to) mobile applications and desktop applications.

Well, this makes it quite clear, and then now the second question, why via service workers?

Service workers are a dandy fashion to run some script in the background and not putting the load on your main business organization logic running on forepart-stop. I am not going to explain too much nigh Service Workers in this postal service, as I have written a separate blog for that. You can check that here.

Permit'southward become back to our question, why service workers, well I would say because your app does not accept to exist open in the browser, to get the notification. I mean that's the real purpose of push notifications, notify the user most the content of your awarding.

Before I show how to add push notifications in your application, I would like to explain how they work. The menses is elementary, your application server tells Google Cloud Messaging (GCM) server that there is something new content and GCM server then awakens the service worker which generates the push notification.

Now, I'thousand gonna show today how to add push notifications using active service workers. So, let's offset, shall we?

REGISTER SERVICE WORKER

          if ('serviceWorker' in navigator && 'PushManager' in window) {
            navigator.serviceWorker.register('software-worker.js')
            .then(part(reg) {
            registration = reg;
            })
            .catch(function(mistake) {
            return;
            });
} else {
            // Well Service Worker or Push Notifications            
            // aren't supported            
            // yet in your browser
}

Here is what we did in in a higher place snippet of lawmaking:
1. Checking if the browser supports service worker and push notifications.
two. Handle accordingly if the browser doesn't support them.
3. If they do, register the service worker file and go the registration object.
I hope all clear so far.

SUBSCRIBE TO NOTIFICATIONS FROM Client

          registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: UInt8array Key
            })
            .then(part(subscription) {
            if (subscription) {
            // User is already subscribed
            }
            })
            .take hold of(function(err) {
            // User have declined request for Push notifications
            });

This is what I am doing above:
one. Using push manager service create the subscription.
2. You demand to have applicationServerKey for this.
3. Once got the subscription object, send it to server.

Note: userVisibleOnly: true must be true, otherwise you volition get an error in your browser console.

Button NOTIFICATIONS HANDLER

          self.addEventListener('push', function(event) {
            upshot.waitUntil(
            self.registration.showNotification(Championship, {
            body: Body,
            icon: Icon
            })
            );
});

Information technology volition trigger every time, your service worker will be awakened by GCM server.

And that'due south it, you accept an agile service worker that volition push notifications to the user every time GCM server will call it.

This post's scope was merely to cover the employ of service workers in push notifications, permit me know if you also want me cover topics like GCM and push button notifications in Google Chrome extension.

I hope you found this post useful and please do let me know in case of any question or query. If you like this post, you tin clap for it or follow me on Medium for my latest posts or on Twitter.