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

Minimal offline-ready Service Worker example

ICSM Computer 630 12 Aug 2025

Ask by ICSM Computer

Updated 12 Aug 2025

1 Answers

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

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

advertising

Markdown for AI

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