Service Worker：构建离线优先的Web应用程序

在当今世界，用户期望 Web 应用程序能够快速、可靠且易于访问，即使在网络连接受限或不可用时也是如此。这正是“离线优先”设计理念发挥作用的地方。Service Worker 是一项强大的技术，使开发人员能够构建可无缝离线工作的 Web 应用程序，从而提供卓越的用户体验。

什么是 Service Worker？

Service Worker 是一个在后台运行的 JavaScript 文件，独立于主浏览器线程。它充当 Web 应用程序和网络之间的代理，拦截网络请求并管理缓存。Service Worker 可以处理以下任务：

缓存静态资源（HTML、CSS、JavaScript、图像）
在离线时提供缓存内容
推送通知
后台同步

重要的是，Service Worker 由浏览器控制，而非网页。这使得即使用户关闭了标签页或浏览器窗口，它们也能继续运行。

为何要离线优先？

构建离线优先的 Web 应用程序具有诸多优势：

提升性能：通过缓存静态资源并直接从缓存中提供，Service Worker 显著减少了加载时间，从而带来了更快、更灵敏的用户体验。
增强可靠性：即使在网络不可用时，用户仍然可以访问缓存内容，确保应用程序保持功能正常。
提高参与度：离线功能使应用程序更加实用和易于访问，从而提高了用户参与度和留存率。
减少数据消耗：通过缓存资源，Service Worker 减少了需要通过网络下载的数据量，这对于数据套餐有限或在基础设施欠发达地区网速较慢的用户尤其有益。例如，在非洲和南美的许多地区，数据成本可能是互联网用户的一大障碍。离线优先设计有助于缓解这一问题。
改善SEO：搜索引擎偏爱速度快且可靠的网站，因此构建离线优先的应用程序可以提高您的搜索引擎排名。

Service Worker 的工作原理

Service Worker 的生命周期包括几个阶段：

注册：向浏览器注册 Service Worker，指定其将控制的应用程序范围。
安装：安装 Service Worker，在此期间通常会缓存静态资源。
激活：Service Worker 被激活并开始控制 Web 应用程序。这可能涉及注销旧的 Service Worker 并清理旧缓存。
空闲：Service Worker 保持空闲状态，等待网络请求或其他事件。
捕获(Fetch)：当发起网络请求时，Service Worker 会拦截它，并可以提供缓存内容或从网络获取资源。

通过 Service Worker 实现离线优先：分步指南

以下是如何使用 Service Worker 实现离线优先功能的基本示例：

第 1 步：注册 Service Worker

在您的主 JavaScript 文件（例如 `app.js`）中：


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

此代码检查浏览器是否支持 Service Worker，并注册 `service-worker.js` 文件。作用域（scope）定义了 Service Worker 将控制的 URL 范围。

第 2 步：创建 Service Worker 文件 (service-worker.js)

创建一个名为 `service-worker.js` 的文件，并包含以下代码：


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

self.addEventListener('install', function(event) {
  // 执行安装步骤
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // 缓存命中 - 返回响应
        if (response) {
          return response;
        }

        // 重要提示：克隆请求。
        // 请求是一个流，只能被消费一次。由于我们一次由缓存消费，一次由浏览器 fetch 消费，因此需要克隆该响应。
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            // 检查我们是否收到了有效的响应
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // 重要提示：克隆响应。
            // 响应是一个流，只能被消费一次。
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

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

self.addEventListener('activate', function(event) {

  var cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

这段代码执行以下操作：

定义一个 `CACHE_NAME` 和一个 `urlsToCache` 数组。
在 `install` 事件期间，它会打开缓存并将指定的 URL 添加进去。
在 `fetch` 事件期间，它会拦截网络请求。如果请求的资源在缓存中，则返回缓存版本。否则，它会从网络获取资源，将其缓存，然后返回响应。
在 `activate` 事件期间，它会删除旧的缓存，以保持缓存大小的可管理性。

第 3 步：测试您的离线功能

要测试您的离线功能，您可以使用浏览器的开发者工具。在 Chrome 中，打开 DevTools，转到“Application”选项卡，然后选择“Service Workers”。然后，您可以通过选中“Offline”复选框来模拟离线模式。

高级 Service Worker 技术

一旦您对 Service Worker 有了基本了解，就可以探索更高级的技术来增强您的离线优先应用程序：

缓存策略

根据资源类型和应用程序的要求，您可以使用多种缓存策略：

缓存优先：始终从缓存中提供内容，仅当在缓存中找不到资源时才从网络获取。
网络优先：始终首先尝试从网络获取内容，仅将缓存用作后备。
缓存后网络更新：立即从缓存提供内容，然后用来自网络的最新版本更新缓存。这提供了快速的初始加载，并确保用户最终总能获得最新的内容。
后台更新时返回旧缓存 (Stale-while-revalidate)：与“缓存后网络更新”类似，但在后台更新缓存，而不会阻塞初始加载。
仅限网络：强制应用程序始终从网络获取内容。
仅限缓存：强制应用程序仅使用存储在缓存中的内容。

选择正确的缓存策略取决于特定资源和您的应用程序要求。例如，像图像和 CSS 文件这样的静态资源通常最好使用“缓存优先”策略，而动态内容可能更适合“网络优先”或“缓存后网络更新”策略。

后台同步

后台同步允许您将任务推迟到用户有稳定的网络连接时再执行。这对于提交表单或上传文件等任务非常有用。例如，印度尼西亚偏远地区的用户可能在离线时填写表单。然后，Service Worker 可以等到有网络连接时再提交数据。

推送通知

Service Worker 可用于向用户发送推送通知，即使用户没有打开应用程序。这可以用于重新吸引用户并提供及时的更新。例如，一个新闻应用程序可以实时向用户提供突发新闻提醒，无论该应用是否正在活动。

Workbox

Workbox 是一组 JavaScript 库，可以更轻松地构建 Service Worker。它为缓存、路由和后台同步等常见任务提供了抽象。使用 Workbox 可以简化您的 Service Worker 代码，并使其更易于维护。许多公司现在将 Workbox 作为开发 PWA 和离线优先体验的标准组件。

面向全球受众的注意事项

在为全球受众构建离线优先的 Web 应用程序时，考虑以下因素非常重要：

多变的网络条件：不同地区的网络连接状况可能差异很大。一些用户可能拥有高速互联网，而另一些用户可能依赖缓慢或不稳定的连接。设计您的应用程序以优雅地处理不同的网络条件。
数据成本：在世界某些地区，数据成本可能是互联网用户的一大障碍。通过积极缓存资源和优化图像来最小化数据消耗。
语言支持：确保您的应用程序支持多种语言，并且用户即使在离线时也能以其首选语言访问内容。将本地化内容存储在缓存中，并根据用户的语言设置提供。
可访问性：确保您的 Web 应用程序对残障用户是可访问的，无论其网络连接如何。遵循可访问性最佳实践，并使用辅助技术测试您的应用程序。
内容更新：规划如何有效处理内容更新。像 `stale-while-revalidate` 这样的策略可以为用户提供快速的初始体验，同时确保他们最终看到最新内容。考虑对缓存资源使用版本控制，以便顺利部署更新。
本地存储限制：虽然本地存储对少量数据很有用，但 Service Worker 可以访问 Cache API，该 API 允许存储更大的文件和更复杂的数据结构，这对于离线体验至关重要。

离线优先应用示例

一些流行的 Web 应用程序已成功使用 Service Worker 实现了离线优先功能：

Google 地图：允许用户下载地图以供离线使用，使他们即使没有互联网连接也能导航。
Google 文档：允许用户离线创建和编辑文档，在有网络连接时同步更改。
星巴克 (Starbucks)：使用户能够离线浏览菜单、下订单和管理他们的奖励账户。
全球速卖通 (AliExpress)：允许用户离线浏览产品、将商品添加到购物车以及查看订单详情。
维基百科 (Wikipedia)：提供对文章和内容的离线访问，使得即使没有互联网也能获取知识。

结论

Service Worker 是构建快速、可靠且引人入胜的离线优先 Web 应用程序的强大工具。通过缓存资源、拦截网络请求和处理后台任务，Service Worker 即使在网络连接受限或不可用时也能提供卓越的用户体验。由于全球范围内的网络访问仍然不一致，专注于离线优先设计对于确保在 Web 上公平地获取信息和服务至关重要。

通过遵循本指南中概述的步骤并考虑上述因素，您可以创建能够无缝离线工作并为全球用户提供愉快体验的 Web 应用程序。拥抱 Service Worker 的力量，构建 Web 的未来——一个无论网络连接如何，每个人、在任何地方都能访问 Web 的未来。