How do you register a service worker in a web application?

Question

Ravi Vishwakarma · Answer

To use a service worker, the first step is to register it in your web application’s JavaScript (usually in app.js or inline in your main HTML).

Service Worker Registration Example

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then(registration => {
                console.log('Service Worker registered with scope:', registration.scope);
            })
            .catch(error => {
                console.error('Service Worker registration failed:', error);
            });
    });
}

Explanation

Check for support
if ('serviceWorker' in navigator) ensures the browser supports service workers.
Wait until page load
window.addEventListener('load', …) prevents blocking the initial page rendering.
Register the worker
- navigator.serviceWorker.register('/service-worker.js')
- The file must be served from your site’s root or a path that covers the scope you want.
- The default scope is the folder where the file lives (and subfolders).
Handle success or failure
- registration.scope tells you which URL paths this worker controls.
- Errors are logged so you can debug.

Example Project Structure

/index.html
/app.js
/service-worker.js

index.html loads app.js.
app.js registers service-worker.js.
service-worker.js listens for fetch/install/activate events.

Once registered, the service worker runs in the background and can:

Cache resources (offline support)
Intercept network requests
Handle push notifications
Perform background sync

forum

How do you register a service worker in a web application?

Can you answer this question?

1 Answers

Service Worker Registration Example

Explanation

Example Project Structure