Service Workers | Advanced | Javascript Essentials Tutorial

Introduction to service workers

Service workers are a powerful feature in JavaScript that allow you to intercept and handle network requests, cache resources, and enable offline functionality for web applications. This tutorial covers the basics of service workers and how to implement them.

Key Points:

Service workers run in the background, separate from the web page.
They can intercept network requests and cache resources for offline use.
Service workers are essential for building Progressive Web Apps (PWAs).

Registering a Service Worker

To register a service worker, you need to call the navigator.serviceWorker.register method in your main JavaScript file.


// main.js
if ('serviceWorker' in navigator) {
    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);
    });
}

Service Worker Lifecycle

Service workers have a specific lifecycle that includes installing, activating, and running phases. You can listen to these lifecycle events and perform actions like caching resources during the install event.


// service-worker.js
self.addEventListener('install', event => {
    console.log('Service Worker installing.');
    event.waitUntil(
        caches.open('static-v1').then(cache => {
            return cache.addAll([
                '/',
                '/index.html',
                '/styles.css',
                '/script.js',
                '/images/logo.png'
            ]);
        })
    );
});

self.addEventListener('activate', event => {
    console.log('Service Worker activating.');
});

self.addEventListener('fetch', event => {
    console.log('Fetching:', event.request.url);
    event.respondWith(
        caches.match(event.request).then(response => {
            return response || fetch(event.request);
        })
    );
});

Caching Strategies

There are various caching strategies you can implement with service workers, including:

Cache First: Use cached resources first, then fetch from the network if not available.
Network First: Fetch from the network first, then use cache if the network is unavailable.
Cache Only: Use only cached resources.
Network Only: Fetch only from the network.

Example: Cache First Strategy

In a cache-first strategy, the service worker tries to serve the resources from the cache first. If the resource is not found in the cache, it fetches it from the network and caches it for future use.


// service-worker.js
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request).then(cachedResponse => {
            if (cachedResponse) {
                return cachedResponse;
            }
            return fetch(event.request).then(networkResponse => {
                return caches.open('dynamic-v1').then(cache => {
                    cache.put(event.request, networkResponse.clone());
                    return networkResponse;
                });
            });
        })
    );
});

Summary

In this tutorial, you learned about service workers in JavaScript. Service workers enable you to intercept network requests, cache resources, and build offline-capable web applications. Understanding and implementing service workers is essential for developing Progressive Web Apps (PWAs).