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:", ev.data));
  window.navigator.serviceWorker.register("/service-worker.js");
  window.navigator.serviceWorker.ready.then((reg) => reg.active.postMessage({"method":"ping"}));
}

Open the JavaScript console. You should see:

Received message: pong
Tagged .
👋 I'm Jim, a full-stack product engineer. Want to build an amazing product and a profitable business? Read more about me or Get in touch!

More by Jim

This page copyright James Fisher 2017. Content is not associated with my employer. Found an error? Edit this page.