The mdn/serviceworker-cookbook is a collection of working examples demonstrating how to use Service Workers in web applications. It provides practical implementations of various Service Worker features, helping developers understand and implement offline functionality, push notifications, and other progressive web app capabilities.

Pros

• Comprehensive collection of Service Worker examples
• Well-documented and easy to understand implementations
• Maintained by Mozilla Developer Network (MDN), ensuring reliability and up-to-date information
• Covers a wide range of Service Worker use cases

Cons

• Some examples may become outdated as browser implementations evolve
• Limited to Service Worker functionality, not covering other aspects of Progressive Web Apps
• May require additional research for more complex real-world scenarios

Code Examples

1. Basic Service Worker Registration:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(error => {
      console.error('Service Worker registration failed:', error);
    });
}

This code checks if the browser supports Service Workers and registers a Service Worker file (sw.js) if supported.

2. Caching Assets in the Install Event:

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache-v1').then(cache => {
      return cache.addAll([
        '/',
        '/styles/main.css',
        '/scripts/app.js'
      ]);
    })
  );
});

This example shows how to cache assets during the Service Worker installation phase.

3. Intercepting Fetch Events:

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

This code intercepts fetch events and attempts to serve cached responses before making network requests.

Getting Started

To get started with the Service Worker Cookbook:

1. Clone the repository:

   git clone https://github.com/mdn/serviceworker-cookbook.git
   

2. Navigate to the project directory:

   cd serviceworker-cookbook
   

3. Install dependencies:

   npm install
   

4. Start the local server:

   npm start
   

5. Open your browser and visit http://localhost:3000 to explore the examples.