How to get notification from service worker

Question

I want to create browser notification. But I want to follow following way:

1. I want to create service worker for browser.
2. Service worker will request after every 60 minutes to my web api located at my server.
3. By using server response service worker will create notification.
4. Then notification will work on client.

Is it feasible solution or not please suggest.

Answer 1

Try something like this... Make sure to read the comments in the code.

Here's the service worker your-service-worker.js.

self.addEventListener('install', function(event) {
  console.log("Service Worker installed");
  event.waitUntil(self.skipWaiting());
});

self.addEventListener('activate', function(event) {
  console.log("Service Worker activated");
  event.waitUntil(self.skipWaiting());
});

self.addEventListener('message', function(event) {
  console.log("Service Worker message event: " + JSON.stringify(event.data));
  var sender = ( event.ports && event.ports[0] ) || event.source;
  switch (event.data) {
    case 'fetchNotifications': {
      // send notifications when client is ready
      sender.postMessage("Here are your queued notifications!");
      break;
    }
    // case 'command': // handle some command, respond
    default: {
      if(sender)
        sender.postMessage("Unknown command: " + event.data);
      break;
    }
  }
});

console.log("Service Worker initialized");

setInterval(function() {
  // request to your API
  // create notification
  // queue to send to client
}, 60*60*1000);

From your web page, you have to install and talk to the service worker. You have to talk to the service worker because multiple client pages can be registered to the same service worker.

Here's the JavaScript to install and communicate with the service worker for your web page.

if ('serviceWorker' in navigator) {
  var serviceWorkerLocation = '/your-service-worker.js';
  navigator.serviceWorker
    .register(serviceWorkerLocation)
      .then(function() {
        console.log("Service worker is registered.");
        if (!navigator.serviceWorker.controller) {
          console.log("Service worker needs to be activated.");
          //location.reload(); // you may choose to reload to sync up with a version change of the service worker
        } else {
          console.log("Service worker is active.");
          // setTimeout(function() { serviceWorkerVersionCheck(true); },250); // you might need to check it's version
        }
      });

} else {
  // panic, fall back, etc.
}

function serviceWorkerRequest(message) {
  if ('serviceWorker' in navigator) {
    if ( navigator.serviceWorker.controller == null ) {
      return Promise.reject("No service worker controller.");
    }
    return new Promise(function(resolve, reject) {
      var messageChannel = new MessageChannel();
      messageChannel.port1.onmessage = function(event) {
        if (event.data.error) {
          reject(event.data.error);
        } else {
          resolve(event.data);
        }
      };
      navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
    });
  } else {
    return Promise.reject("No service worker.");
  }
}

Then you would call serviceWorkerRequest('fetchNotifications') or serviceWorkerRequest('listenForNotifications') etc... depending on your implementation.

Answer 2

You can use Worker. Post a message to worker at sixty minute intervals. Worker performs request, posts message to document.

At document

var worker = new Worker("/path/to/worker.js");

worker.addEventListener("message", function(e) {
  console.log(e.data);
  if (e.data.constructor.name === "Error") {
    clearInterval(interval);
    console.log(e.data.message)
  }
});

worker.postMessage("request"); // make first post to worker

var interval = null;

var duration = 1000 * 60 * 60;  

interval = setInterval(function() {
    worker.postMessage("request")
}, duration);

at worker.js

self.addEventListener("message", function(e) {
  if (e.data === "request") {
    var request = fetch("/path/to/api");
    request.then(function(response) {
      return response.text()
    })
    .then(function(data) {
      self.postMessage(data)
    })
    .catch(function(err) {
       self.postMessage(new Error(err))
    })
  }
});