PWA：Service Workers 与离线缓存

欢迎来到 PWA 的奇妙世界 🌍

大家好，欢迎来到今天的讲座！今天我们要聊的是 Progressive Web Apps (PWA) 中的两个重要角色：Service Workers 和 离线缓存。如果你已经对 PWA 有所了解，那我们今天就深入探讨一下这两个技术是如何协同工作，让你的应用在没有网络的情况下依然能够流畅运行的。

什么是 Service Worker？🔧

简单来说，Service Worker 是一个运行在浏览器后台的脚本，它可以在不干扰用户界面的情况下处理网络请求、推送通知、甚至是离线缓存。你可以把它想象成一个“幕后英雄”，默默地为你的应用保驾护航。

Service Worker 的三大超能力：

拦截网络请求：Service Worker 可以拦截并处理所有从你的应用发出的网络请求。这意味着你可以决定哪些资源需要从服务器获取，哪些可以从本地缓存中读取。
推送通知：即使应用不在前台运行，Service Worker 也可以接收和显示推送通知。这对于那些需要实时更新的应用（比如新闻、天气等）非常有用。
离线支持：这是今天我们重点讨论的功能。通过 Service Worker，你可以将用户的请求缓存下来，当用户再次访问时，即使没有网络连接，应用也能正常加载。

如何注册 Service Worker？📝

要使用 Service Worker，首先需要在你的应用中注册它。这通常是在 index.js 或 app.js 中完成的。下面是一个简单的注册代码示例：

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

这段代码的作用是检查浏览器是否支持 Service Worker，如果支持，则注册位于 /service-worker.js 的 Service Worker 文件。注册成功后，Service Worker 就可以开始工作了。

Service Worker 的生命周期 🔄

Service Worker 有一个有趣的生命周期，主要包括以下几个阶段：

安装 (Install)：当用户第一次访问你的应用时，Service Worker 会被安装。在这个阶段，你可以预缓存一些关键资源（如 HTML、CSS、JavaScript 文件等），以便用户下次访问时可以离线加载。
激活 (Activate)：安装完成后，Service Worker 会进入激活阶段。此时，它可以开始接管页面的网络请求。如果旧版本的 Service Worker 仍在运行，新版本会在所有页面关闭后才激活。
控制 (Control)：激活后，Service Worker 开始控制页面的所有网络请求。它可以通过 fetch 事件来拦截和处理这些请求。
终止 (Terminate)：当浏览器需要释放资源时，Service Worker 会被终止。不过，它可以在下次需要时重新启动。

离线缓存：让应用永不掉线 📲

现在我们来聊聊如何通过 Service Worker 实现离线缓存。离线缓存的核心思想是：当用户首次访问应用时，我们将一些关键资源（如 HTML、CSS、JS 文件）缓存起来。当用户再次访问时，即使没有网络连接，我们也可以从缓存中加载这些资源，确保应用能够正常运行。

使用 Cache API 缓存资源

Service Worker 提供了一个名为 Cache API 的工具，用于管理缓存。我们可以使用 caches.open() 方法打开一个缓存存储，并使用 cache.put() 和 cache.match() 方法来存储和检索资源。

下面是一个简单的例子，展示了如何在 Service Worker 的 install 事件中缓存一些静态资源：

const CACHE_NAME = 'my-app-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
  '/images/logo.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

在这段代码中，我们在 install 事件中打开了一个名为 my-app-cache-v1 的缓存存储，并将 urlsToCache 数组中的所有资源添加到缓存中。这样，当用户下次访问时，这些资源就可以直接从缓存中加载了。

处理网络请求：缓存优先策略

接下来，我们需要告诉 Service Worker 如何处理用户的网络请求。我们可以通过监听 fetch 事件来实现这一点。下面是一个常见的缓存优先策略（Cache-first strategy）的实现：

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // 如果缓存中有资源，直接返回缓存中的资源
        if (response) {
          return response;
        }

        // 如果缓存中没有资源，从网络获取并缓存
        return fetch(event.request)
          .then(response => {
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            const responseToCache = response.clone();
            caches.open(CACHE_NAME)
              .then(cache => {
                cache.put(event.request, responseToCache);
              });

            return response;
          });
      })
  );
});

这段代码的工作原理是：当用户发起一个网络请求时，Service Worker 会首先检查缓存中是否有该资源。如果有，直接返回缓存中的资源；如果没有，则从网络获取资源，并将其缓存下来以备下次使用。

更新缓存：保持最新版本 🔄

随着时间的推移，你的应用可能会发布新的版本，这时你需要确保用户的缓存能够及时更新。为了实现这一点，我们可以在 activate 事件中清理旧版本的缓存。

self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

这段代码会在每次 Service Worker 激活时，检查当前缓存中是否有不再需要的旧版本缓存，并将其删除。这样可以确保用户的缓存始终是最新的。

实战技巧：动态缓存 vs 静态缓存 🛠️

在实际开发中，你可能会遇到两种不同的缓存需求：

静态缓存：适用于那些不会频繁变化的资源，比如 HTML、CSS、JS 文件等。你可以一次性将这些资源缓存下来，并在后续的请求中直接使用。
动态缓存：适用于那些会频繁变化的资源，比如 API 请求返回的数据。对于这些资源，你可以选择只缓存最近一次的请求结果，或者根据某些条件（如时间戳）来决定是否更新缓存。

动态缓存的例子

假设你有一个 API 请求，返回的是最新的天气数据。你可以使用以下代码来实现动态缓存：

self.addEventListener('fetch', event => {
  if (event.request.url.includes('/api/weather')) {
    event.respondWith(
      caches.open('dynamic-cache')
        .then(cache => {
          return fetch(event.request)
            .then(response => {
              if (response.ok) {
                cache.put(event.request, response.clone());
              }
              return response;
            })
            .catch(() => {
              return cache.match(event.request);
            });
        })
    );
  }
});

这段代码的作用是：当用户请求 /api/weather 时，首先尝试从网络获取最新的天气数据。如果请求成功，将结果缓存下来；如果请求失败，则从缓存中返回最近一次的结果。

总结：Service Worker + 离线缓存 = 完美组合 ✨

通过今天的讲座，我们了解了 Service Worker 和离线缓存的基本概念和实现方法。Service Worker 作为 PWA 的核心技术之一，不仅可以帮助我们实现离线支持，还可以提升应用的性能和用户体验。而通过合理使用缓存策略，我们可以确保用户在任何情况下都能流畅地使用我们的应用。

希望今天的分享对你有所帮助！如果你有任何问题或想法，欢迎在评论区留言。我们下期再见！👋

参考文档

MDN Web Docs: Service Workers
Google Developers: Offline Web Applications
W3C: Cache API Specification