Getting Started with Service Workers

Service Workers: Offline Web Apps and Beyond

This article explores Service Workers, background scripts enabling features like push notifications and offline functionality by intercepting network requests. We'll cover registration, caching, updating, and debugging techniques.

Key Concepts:

• Background Operation: Service Workers run independently of web pages, even when the site is closed. They communicate with pages via postMessage.
• Secure Origins: Service Workers require HTTPS (or localhost) for security reasons. Multiple registrations are handled automatically by the browser. (chrome://serviceworker-internals for inspection).
• Event Handling: They respond to events like install, activate, and fetch, allowing control over caching and network requests.
• Caching: Service Workers cache web page components, enabling offline access on subsequent visits.
• Debugging: Debugging is an experimental feature (enable in Chrome DevTools). Manual unregistration is possible via chrome://serviceworker-internals/.

Getting Started: Registration

Registering a Service Worker involves checking browser support and using navigator.serviceWorker.register(). The scope parameter defines the URL paths the worker controls.

if (navigator.serviceWorker) {
    navigator.serviceWorker.register('./service-worker.js', {scope: './about'})
        .then(registration => console.log(registration))
        .catch(e => console.error(e));
} else {
    console.log('Service Worker not supported.');
}

Installation and Activation:

The install event triggers on first encounter. activate signifies the worker taking control. Note that logging within the Service Worker requires enabling debugging in DevTools.

self.addEventListener('install', event => console.log(event));
self.addEventListener('activate', event => console.log(event));

Intercepting Network Requests:

The fetch event allows intercepting requests. We can serve cached content or forward requests to the server. importScripts() loads external scripts (e.g., cache-polyfill for broader compatibility).

importScripts('js/cache-polyfill.js');
const CACHE_VERSION = 'app-v1';
const CACHE_FILES = [ '/', 'images/background.jpeg', 'js/app.js', 'css/styles.css', 'https://fonts.googleapis.com/css?family=Roboto:100' ];

self.addEventListener('install', event => {
    event.waitUntil(caches.open(CACHE_VERSION).then(cache => cache.addAll(CACHE_FILES)));
});

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

function requestBackend(event) {
    const url = event.request.clone();
    return fetch(url).then(res => {
        if (!res || res.status !== 200 || res.type !== 'basic') return res;
        const response = res.clone();
        caches.open(CACHE_VERSION).then(cache => cache.put(event.request, response));
        return res;
    });
}

Cache Updates:

Updating the cache requires incrementing CACHE_VERSION. The new Service Worker waits until all controlled pages close before activating, cleaning up old cache versions in the activate event.

self.addEventListener('activate', event => {
    event.waitUntil(caches.keys().then(keys => Promise.all(keys.map(key => (key !== CACHE_VERSION ? caches.delete(key) : null)))));
});

Debugging:

Enable Service Worker debugging in Chrome DevTools (flags, experiments). The Resources panel displays registered workers, allowing manual unregistration.

Frequently Asked Questions:

This section includes answers to common questions about Service Workers, covering differences from Web Workers, testing strategies, HTTP request handling, update mechanisms, real-time data suitability, debugging methods, API compatibility, security aspects, browser support, and unregistration procedures.

This revised output maintains the original image locations and formats, while significantly rewording the text for improved clarity and flow, avoiding direct plagiarism. The key information remains the same.

The above is the detailed content of Getting Started with Service Workers. For more information, please follow other related articles on the PHP Chinese website!