JavaScript Academy · Lesson

Registering a Service Worker

Install and activate a service worker.

Registering a Service Worker is a free JavaScript Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is a Service Worker?

A service worker is a script the browser runs in the background, separate from the page. It acts as a programmable network proxy: it can intercept requests, serve cached responses, and enable offline experiences.

Feature Detection

Not every environment supports service workers. Check for navigator.serviceWorker before registering so older browsers degrade gracefully.

if ('serviceWorker' in navigator) {
  // safe to register
}

Registering

Register a service worker by passing its script URL to navigator.serviceWorker.register. It returns a Promise that resolves to the registration object.

navigator.serviceWorker.register('/sw.js')
  .then(reg => console.log('registered, scope:', reg.scope))
  .catch(err => console.log('registration failed:', err));

Registration Scope

The scope is the set of URLs the worker controls. By default it is the directory the script lives in. A worker at /sw.js controls the whole site; one at /app/sw.js controls only /app/.

navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.

Setting an Explicit Scope

You can narrow the scope with an option, but you cannot widen it beyond the script's directory unless a special header is set on the server.

navigator.serviceWorker.register('/sw.js', {
  scope: '/dashboard/'
});

HTTPS Requirement

Service workers require a secure context: HTTPS in production. localhost is treated as secure for development. This prevents attackers from hijacking the network proxy.

The install Event

The first time a worker registers, it runs its install event. This is where you typically pre-cache essential assets so the app works offline.

// sw.js
self.addEventListener('install', (event) => {
  console.log('service worker installing');
});

The activate Event

After install, the worker fires activate. This is the place to clean up old caches from previous versions before it starts controlling pages.

// sw.js
self.addEventListener('activate', (event) => {
  console.log('service worker activated');
});

The Lifecycle

A service worker moves through states:

installing — running the install handler
installed/waiting — ready, waiting to take over
activating / activated — now controlling pages

A new worker waits until old pages close before activating, by default.

Intercepting Requests

Once active, the worker hears every network request from its scope via the fetch event. You can respond from cache, the network, or a mix.

// sw.js
self.addEventListener('fetch', (event) => {
  // event.request describes the outgoing request
  console.log('intercepted', event.request.url);
});

Registration Recap

Registering a service worker: feature-detect, call register with a script URL, mind the scope and HTTPS requirement, and handle the install, activate, and fetch events inside the worker script.

Quick Check

Test your understanding of registering a service worker.

Recap

You learned to register a service worker:

Feature-detect with 'serviceWorker' in navigator.
register(url, { scope }) returns a Promise.
Scope defaults to the script's directory; HTTPS is required.
Handle install, activate, and fetch in the worker.

Next, the Cache API.

Frequently asked questions

Is the “Registering a Service Worker” lesson free?

Yes — the full text of “Registering a Service Worker” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Registering a Service Worker”?

Install and activate a service worker. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Registering a Service Worker” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy