Service Worker Introduction

Event Driven

The service worker can listen to and handle lifecycle events - install and activate - and functional events like - fetch and push.

Code

// in sw.js
console.log('started ServiceWorker');
this.addEventListener('install', event => console.log('installed', event));
this.addEventListener('activate', event => console.log('activated', event));
this.addEventListener('fetch', event => console.log('fetching', event));
this.addEventListener('push', event => console.log('pushed', event));
this.addEventListener('sync', event => console.log('do sync', event));
this.addEventListener('message', event => console.log('message received', event));

Use chrome://serviceworker-internals/ and chrome://inspect/#service-workers to open a console for sw.js and see what the events look like.

Output

The install event

The install event is fired once, when you register this version of sw.js for the first time. If sw.js changes even a single byte it’s called again. Use this event to setup whatever needs to be prepared before the other events are handled.

// in sw.js
this.addEventListener('install', event => {
  console.log('installed', event);
});
// alternatively, if you only need to bind it once:
this.oninstall = event => { 
  console.log('installed', event);
};

The activate event

The activate event is fired once, when there’s a new version of sw.js installed and there’s no previous version running in another tab or window. So you’d typically use this event for deleting or migrating remainders of the previous version.

// in sw.js
this.addEventListener('activate', event => {
  console.log('activated', event);
});
// alternatively, if you only need to bind it once:
this.onactivate = event => { 
  console.log('activated', event);
};

The fetch event

The fetch event is fired on every request the page makes - within the scope you registered the Service Worker with.

// in sw.js
this.addEventListener('fetch', event => {
  console.log('fetching', event, event.request);
});
// alternatively, if you only need to bind it once:
this.onfetch = event => { 
  console.log('fetching', event, event.request);
};

The push event

The push event is fired every time the Service Worker receives a push message from a server.

// in sw.js
this.addEventListener('push', event => {
  console.log('received push message', event, event.data);
});
// alternatively, if you only need to bind it once:
this.onpush = event => {
  console.log('received push message', event, event.data);
};

The sync event

The sync event is fired every time the Service Worker receives a sync request from a page.

// in sw.js
this.addEventListener('sync', event => {
  console.log('request to sync', event, event.tag);
});
// alternatively, if you only need to bind it once:
this.onsync = event => {
  console.log('request to sync', event, event.tag);
};

The message event

A Service Worker can communicate with the pages it controls through messaging. See step Page to Service Worker and Service Worker to pagesfor examples and more details.

Wait for it…

If something needs to happen during a specific lifecycle event (install or activate) you can extend the lifetime of the event using waitUntil.

this.addEventListener('lifecycleEventName', event => {
  event.waitUntil(() => {
    return new Promise((resolve, reject) {
      setTimeout(() => resolve(), 1000);
    });
  });
});

The lifetime will be extended until the Promise resolves.