Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

Home Interviews How do you register a service worker in a web application? – MindStick
Ask Question

1 Answers

ICSM Computer
ICSM Computer 12 Aug 2025
Report Abuse

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', () => {
        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);
            });
    });
}

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 => {
    console.log('Service Worker installing...');
    // Perform install steps, e.g., caching files
});

self.addEventListener('activate', event => {
    console.log('Service Worker activated');
    // Cleanup old caches
});

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => response || fetch(event.request))
    );
});

4. File Location & 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.
MindStick Training
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md