interview

home / developersection / interviews / minimal offline-ready service worker example

Ask Question
ICSM Computer

IT-Hardware & Networking

Ravi Vishwakarma is a dedicated Software Developer with a passion for crafting efficient and innovative solutions. With a keen eye for detail and years of experience, he excels in developing robust software systems that meet client needs. His expertise spans across multiple programming languages and technologies, making him a valuable asset in any software development project.

Follow Message
Can you answer this question?
Answer

1 Answers

ICSM Computer

ICSM Computer

12-Aug-2025

1. Project Structure

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

2. index.html

A basic page with a linked JS file to register the service worker.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Service Worker Demo</title>
</head>
<body>
    <h1>Hello Service Worker</h1>
    <p>Turn off your internet after first load and refresh to see it work offline.</p>

    <script src="app.js"></script>
</body>
</html>

3. app.js (Registers the service worker)

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

4. service-worker.js (Caches files for offline use)

const CACHE_NAME = 'demo-cache-v1';
const ASSETS_TO_CACHE = [
    '/',            // Root
    '/index.html',
    '/app.js'
];

// Install event - cache the files
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => {
                console.log('Caching assets...');
                return cache.addAll(ASSETS_TO_CACHE);
            })
    );
});

// Activate event - clean old caches
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(keys => {
            return Promise.all(
                keys.map(key => {
                    if (key !== CACHE_NAME) {
                        console.log('Deleting old cache:', key);
                        return caches.delete(key);
                    }
                })
            );
        })
    );
});

// Fetch event - serve from cache, fallback to network
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => response || fetch(event.request))
    );
});

5. How to Test

  1. Serve files locally using HTTPS or localhost (e.g., with npx http-server or Live Server in VS Code).
  2. Open the site in Chrome.
  3. Check DevTools → Application → Service Workers — you should see it active.
  4. Load once, then go offline and refresh — the cached files will still load.
MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy