---
title: "How do you register a service worker in a web application?"  
description: "How do you register a service worker in a web application?"  
author: "ICSM Computer"  
published: 2025-08-12  
updated: 2025-08-12  
canonical: https://www.mindstick.com/interview/34350/how-do-you-register-a-service-worker-in-a-web-application  
category: "services"  
tags: ["javascript"]  
reading_time: 3 minutes  

---

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

To register a [**service worker**](https://www.mindstick.com/interview/34348/what-is-a-service-worker-and-how-does-it-differ-from-a-traditional-javascript-script) in a web application, you typically follow these steps:

### 1. Check for Browser Support

[Service workers are supported](https://www.mindstick.com/interview/34349/what-are-the-three-main-phases-in-a-service-worker-s-lifecycle) in most modern browsers, but you should always check before using them.

```javascript
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.

```javascript
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`

```javascript
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.

## Answers

### Answer by ICSM Computer

To register a [**service worker**](https://www.mindstick.com/interview/34348/what-is-a-service-worker-and-how-does-it-differ-from-a-traditional-javascript-script) in a web application, you typically follow these steps:

### 1. Check for Browser Support

[Service workers are supported](https://www.mindstick.com/interview/34349/what-are-the-three-main-phases-in-a-service-worker-s-lifecycle) in most modern browsers, but you should always check before using them.

```javascript
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.

```javascript
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`

```javascript
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.


---

Original Source: https://www.mindstick.com/interview/34350/how-do-you-register-a-service-worker-in-a-web-application

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.