Add a Service Worker to Your Site

Enhance your website's performance and resilience in 2022 by adding a service worker (if you haven't already). This powerful JavaScript tool offers significant advantages. Let's explore its capabilities and provide a simple implementation guide.

Understanding Service Workers

A service worker acts as a middleware for your website. All requests and responses pass through it. It also manages a local cache for storing assets and responses. This enables:

• Improved Performance: Serve frequently accessed assets from the cache, reducing data usage and load times.
• Offline Functionality: Provide access to essential content even when offline.
• Prefetching: Load important assets and API responses proactively.
• Error Handling: Offer fallback assets in case of HTTP errors.

Essentially, service workers create faster, more reliable web experiences. Unlike regular JavaScript, they lack DOM access, run on a separate thread (not blocking other scripts), and are fully asynchronous.

Security Considerations

Due to their role in intercepting requests and responses, service workers have security limitations:

• Same-Origin Policy: Must be hosted on the same domain as the website. CDN or third-party hosting is not permitted.
• SSL Certificate Requirement: Requires an SSL certificate (exceptions exist for localhost testing, but not for file:// protocol).

Many hosting providers offer SSL certificates at minimal or no cost.

Integrating a Service Worker

Registering a service worker involves using navigator.serviceWorker.register(), providing the service worker file's path:

navigator.serviceWorker.register('sw.js');

Ideally, place this within an inline <script></script> tag in your HTML for immediate execution. Service workers operate only within their directory and subdirectories. Therefore, place sw.js in your site's root directory.

Check for browser support before registration:

if (navigator && navigator.serviceWorker) {
  navigator.serviceWorker.register('sw.js');
}

After installation, the browser activates the service worker, typically on page refresh or when no service worker is active. Activation is necessary for request interception.

Handling Requests

Once active, the service worker intercepts requests using self.addEventListener() and the fetch event:

self.addEventListener('fetch', function(event) {
  // Process requests...
});

event.request provides the request object. A Chromium browser bug fix (from Paul Irish) is recommended:

self.addEventListener('fetch', function(event) {
  let request = event.request;
  if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') return;
  // ...rest of your code...
});

Caching Strategies

Two main strategies exist:

1. Network-First: Prioritizes network requests. If unsuccessful, it checks the cache.
2. Offline-First: Checks the cache first, then falls back to the network.

These strategies are often combined. Offline-first is suitable for static assets (CSS, JS, images), while network-first works better for dynamic content (HTML, API responses).

Implementing Caching

Caching involves two approaches:

1. Pre-caching: Cache core assets (CSS, JS, images) during installation.
2. Runtime Caching: Cache assets as they are accessed.

Using request.headers.get('Accept'), you can determine the MIME type and apply different strategies:

self.addEventListener('fetch', function(event) {
  let request = event.request;
  // ...bug fix...
  if (request.headers.get('Accept').includes('text/html')) { // Network-first for HTML
    // ...
  } else if (request.headers.get('Accept').includes('text/css') || request.headers.get('Accept').includes('text/javascript')) { // Offline-first for CSS/JS
    // ...
  } else if (request.headers.get('Accept').includes('image')) { // Offline-first for images
    // ...
  }
});

Network-First Example:

event.respondWith(
  fetch(request).then(response => response).catch(error => caches.match(request))
);

Offline-First Example:

event.respondWith(
  caches.match(request).then(response => response || fetch(request))
);

Pre-caching:

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

Runtime Caching:

// ...inside network-first HTML handling...
fetch(request).then(response => {
  let copy = response.clone();
  event.waitUntil(caches.open('app').then(cache => cache.put(request, copy)));
  return response;
});

A comprehensive boilerplate is available on GitHub (link omitted for brevity, but implied in the original text). This provides a solid foundation for implementing service workers. Further exploration of advanced caching strategies, offline pages, and cache cleanup is encouraged. Resources like Jeremy Keith's "Going Offline" and Jason Grigsby's work on PWAs offer valuable insights.

The above is the detailed content of Add a Service Worker to Your Site. For more information, please follow other related articles on the PHP Chinese website!