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

Question

ICSM · Answer

To register a 
service worker in a web application, you typically follow these steps:
1. Check for Browser Support
Service workers are supported in most modern browsers, but you should always check before using them.
if ('serviceWorker' in navigator) {
    // Safe to register
}
2. Call navigator.serviceWorker.register()
You register the service worker JavaScript file (usually service-worker.js) from your main JavaScript file.
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () =andgt; {
        navigator.serviceWorker
            .register('/service-worker.js')
            .then(registration =andgt; {
                console.log('Service Worker registered with scope:', registration.scope);
            })
            .catch(error =andgt; {
                console.error('Service Worker registration failed:', error);
            });
    });
}
Key Points:
Path: /service-worker.js must be in the same origin and either at the root or in the directory whose scope you want to control.Scope: Determines which files the service worker controls (default is the script’s location and below).HTTPS: Service workers only work on HTTPS or localhost.
3. Create the Service Worker File
Example: service-worker.js
self.addEventListener('install', event =andgt; {
    console.log('Service Worker installing...');
    // Perform install steps, e.g., caching files
});
self.addEventListener('activate', event =andgt; {
    console.log('Service Worker activated');
    // Cleanup old caches
});
self.addEventListener('fetch', event =andgt; {
    event.respondWith(
        caches.match(event.request)
            .then(response =andgt; response || fetch(event.request))
    );
});
4. File Location and Scope
If service-worker.js is at /, it can control the whole site.If it’s in /app/, its scope will be /app/ by default unless overridden.
5. Dev Tools Tip
In Chrome DevTools:Go to Application → Service Workers to inspect, unregister, and debug.

interview

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

ICSM

Can you answer this question?

1 Answers

1. Check for Browser Support

2. Call `navigator.serviceWorker.register()`

3. Create the Service Worker File

4. File Location & Scope

5. Dev Tools Tip

Liked By