Skip to main content

Push notifications in Web Apps via Service Workers

A push notification is a message that is “pushed” from backend server or application to user interface, e.g. (But not limited to) mobile applications and desktop applications.
Service workers are a great way to run some script in the background and not putting the load on your main business logic running on front-end.
 Your app does not have to be open in the browser, to get the notification. It mean that’s the real purpose of push notifications, notify the user about the content of your application.
                         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.

Register Service Worker



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

Here is what  did in above snippet of code:
1. Checking if the browser supports service worker and push notifications.
2. Handle accordingly if the browser doesn’t support them.
3. If they do, register the service worker file and get the registration object.

Subscribe to Notifications from client



registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: UInt8array Key
  })
  .then(function(subscription) {
    if (subscription) {
       // User is already subscribed
    }
  })
  .catch(function(err) {
    // User have declined request for Push notifications
  });
This is what doing above:
1. Using push manager service create the subscription.
2. You need to have application Server Key for this.
3. Once got the subscription object, send it to server.


Note: user Visible Only: true must be true, otherwise you will get an error in your browser console.

Push notifications handler



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

It will trigger every time, your service worker will be awakened by GCM server.
And that’s it, you have an active service worker that will push notifications to the user every time GCM server will call it.


This post’s scope was only to cover the use of service workers in push notifications


                






















Comments

Popular posts from this blog

Pay Per Click by AppWorks Technologies Pvt Ltd

Making telescopes that curve and twist

New computational tool automates design of telescoping structures that provide compact storage and rapid deployment. Shown here: a complex telescoping lizard expands to many times its original volume, serving as a stress test of the method. Credit: Chris Yu/Carnegie Mellon University A new tool for computational design allows users to turn any 3D shape into a collapsible telescoping structure. New mathematical methods developed by researchers at Carnegie Mellon University capture the complex and diverse properties of such structures, which are valuable for a variety of applications in 3D fabrication and robotics—particularly where mechanisms must be compact in size and easily deployable. The research, "Computational Design of Telescoping Structures," led by Carnegie Mellon Professors Stelian Coros and Keenan Crane and PhD student Christopher Yu, will be presented at the annual SIGGRAPH conference, 30 July to 3 August in Los Angeles. The conference each year spotlights the...

Get start with Vue.js

Getting Started The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required. The easiest way to try out Vue.js is using the   JSFiddle Hello World example . Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can simply   create an   index.html   file   and include Vue with: < script src = "https://unpkg.com/vue" > </ script > The   Installation   page provides more options of installing Vue. Note that we   do not   recommend beginners to start with   vue-cli , especially if you are not yet familiar with Node.js-based build tools. Declarative Rendering At the core of Vue.js is a system that enables us to declar...