React 中 Service Worker 的初学者指南：打造离线应用

2023-10-03 20:22:25

Service Worker 是一个脚本，它可以在后台运行，即使页面被关闭。这使得它非常适合用于缓存资源和处理离线请求。

Service Worker 的好处

使用 Service Worker 有很多好处，包括：

提高性能：Service Worker 可以缓存资源，以便在以后的请求中更快地提供这些资源。
提高可靠性：Service Worker 可以处理离线请求，以便即使在没有互联网连接的情况下，用户也能继续使用您的应用程序。
提高安全性：Service Worker 可以用来拦截请求并检查是否有害内容，以便保护您的应用程序免受攻击。

在 React 中使用 Service Worker

在 React 中使用 Service Worker 非常简单。首先，您需要创建一个 Service Worker 文件。这个文件通常称为 service-worker.js。

// service-worker.js

self.addEventListener('install', (event) => {
  // 在 Service Worker 被安装时触发此事件
});

self.addEventListener('activate', (event) => {
  // 在 Service Worker 成为活动的 Service Worker 时触发此事件
});

self.addEventListener('fetch', (event) => {
  // 在 Service Worker 拦截请求时触发此事件
});

接下来，您需要将 Service Worker 注册到您的应用程序中。您可以通过在 index.html 文件中添加以下代码来完成此操作：

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('service-worker.js');
  }
</script>

现在，您的 Service Worker 已经安装并注册到您的应用程序中。您现在可以开始使用它来缓存资源和处理离线请求了。

缓存资源

要缓存资源，您需要在 Service Worker 的 fetch 事件监听器中使用 cache.add() 方法。例如：

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.open('my-cache').then((cache) => {
      return cache.add(event.request);
    })
  );
});

这段代码将把请求的资源缓存到名为 my-cache 的缓存中。当用户再次请求该资源时，Service Worker 将从缓存中提供该资源，而不是从网络中获取。

处理离线请求

要处理离线请求，您需要在 Service Worker 的 fetch 事件监听器中使用 cache.match() 方法。例如：

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

这段代码将首先尝试从缓存中获取请求的资源。如果资源存在于缓存中，Service Worker 将从缓存中提供该资源。如果资源不存在于缓存中，Service Worker 将从网络中获取该资源。