---
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: "Anubhav Sharma"  
published: 2025-08-06  
updated: 2025-08-17  
canonical: https://www.mindstick.com/forum/161852/how-do-you-register-a-service-worker-in-a-web-application  
category: "javascript"  
tags: ["service"]  
reading_time: 2 minutes  

---

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

**How do you [register](https://www.mindstick.com/blog/220/registering-client-script-in-asp-dot-net) a service worker in a [web application](https://www.mindstick.com/articles/13069/progressive-web-application-pwas-all-you-need-to-know-about)?**

## Replies

### Reply by ICSM Computer

To use a service worker, the first step is to **register it in your [web](https://www.mindstick.com/articles/12783/the-ultimate-bunch-of-free-web-design-resources) [application](https://www.mindstick.com/articles/12824/calculator-application-in-android)’s JavaScript** (usually in `app.js` or inline in your main HTML).

### [Service Worker](https://www.mindstick.com/interview/34348/what-is-a-service-worker-and-how-does-it-differ-from-a-traditional-javascript-script) Registration Example

```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);
            });
    });
}
```

### 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

```plaintext
/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


---

Original Source: https://www.mindstick.com/forum/161852/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.