What is the difference between lifecycle and functional events?

Lifecycle events — install and activate — fire once per worker version as it is set up and takes control. Functional events such as fetch, push and sync fire repeatedly while the worker is active to do its ongoing work.

Why must I call event.waitUntil()?

A service worker can be terminated as soon as its event handler returns. waitUntil() passes a promise that tells the browser to keep the worker alive until that promise settles, so asynchronous work like caching or showing a notification can finish.

What does the fetch event do?

The fetch event fires for every network request from controlled pages. Calling event.respondWith() lets the worker intercept it and return a response from cache, the network, or a generated value — the foundation of offline support.

When does the push event fire?

The push event fires when the push service delivers a message, even if no page is open. Your handler must call showNotification() inside waitUntil(), or the browser may show a generic notification or penalise your origin.

Does this reference run any service worker code?

No. It is a static, searchable reference rendered entirely in your browser. No worker is registered and nothing is uploaded or stored.

Service Worker Events Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Events that drive a service worker

A service worker is event-driven: it has no persistent state and wakes only to handle events, then may be terminated. Knowing which events exist, when they fire, and how to extend their lifetime is the core of building reliable offline-capable and push-enabled web apps. This searchable reference lists the lifecycle and functional events with their interfaces and timing.

How it works

Service worker events fall into two groups. Lifecycle events run once per worker version:

self.addEventListener("install", (event) => {
  event.waitUntil(caches.open("v1").then((c) => c.addAll(ASSETS)));
});

self.addEventListener("activate", (event) => {
  event.waitUntil(clients.claim());
});

Functional events fire repeatedly. The fetch event uses event.respondWith() to return a response synchronously, while push, sync, message and the notification events use event.waitUntil() to keep the worker alive while a promise resolves. Without one of these calls the browser may kill the worker before your asynchronous work finishes.

Tips and notes

Precache in install; purge old caches in activate. Call clients.claim() to control already-open pages.
fetch is the only event that uses respondWith() — everything else uses waitUntil().
A push handler must show a notification or the browser may flag your origin for silent pushes.
sync retries on a backoff if your promise rejects; periodicsync is throttled by engagement and battery and has limited support.