Service worker hello world

The following service worker gets a ping message and responds to it with “pong”:

self.addEventListener("message", (ev) => ev.source.postMessage("pong"));

I’m hosting this service worker at /service-worker.js. This page registers that service worker as its controller, wait for the service worker to be ready, then send it a “ping” message:

if (window.navigator && window.navigator.serviceWorker) {
  window.navigator.serviceWorker.addEventListener("message", (ev) => console.log("Received message:",;
  window.navigator.serviceWorker.ready.then((reg) =>{"method":"ping"}));

Open the JavaScript console. You should see:

Received message: pong

More by Jim

Tagged . All content copyright James Fisher 2017. This post is not associated with my employer. Found an error? Edit this page.