用 Service Worker 离线应对网络不可靠的应用-JavaScript中文网-JavaScript教程资源分享门户

在移动设备上，网络不可靠是非常常见的情况。为了给用户更好的使用体验，我们需要设计可以应对网络不可靠的应用。在这篇文章中，我将介绍 Service Worker，这一浏览器 API 可以缓存应用资源以提供离线的访问体验。我们将探讨 Service Worker 的用途、开发和部署，并提供示例代码和学习资源。

Service Worker 的用途

Service Worker 是一种浏览器 API。它在后台运行，可以拦截网络请求，处理缓存和资源获取。Service Worker 有以下用途：

缓存资源，以提高应用的性能。
运行离线应用，可以提高应用的可用性。
推送通知，以增加用户参与度。

Service Worker 是一个事件驱动的 JavaScript 线程，它可以在主线程之外运行。这个线程负责管理资源缓存，可以在应用请求资源时，检查本地缓存并返回结果。由于 Service Worker 可以拦截网络请求，所以可以使用缓存来改善网络连接不稳定的情况下的用户体验。

Service Worker 的开发

我们使用以下步骤来开发 Service Worker：

注册 Service Worker。
安装 Service Worker。
缓存资源。
配置离线模式。
部署 Service Worker。

注册 Service Worker

在 HTML 文件中，我们可以通过以下代码来注册 Service Worker：

// www.javascriptcn.com code example
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker
      .register('/service-worker.js')
      .then(function() {
        console.log('Service worker registration successful.');
      })
      .catch(function(error) {
        console.log('Service worker registration failed:', error);
      });
  });
}

这个代码段检测浏览器是否支持 Service Worker，如果支持，就在应用加载时注册 Service Worker。在这个例子中，我们将 Service Worker 的脚本文件放在根目录下，并使用相对 URL。

安装 Service Worker

当 Service Worker 文件被下载并成功注册时，浏览器会触发 serviceWorker.install 事件。在 Service Worker 的脚本文件中，我们可以监听这个事件，以便在 Service Worker 安装后进行一些操作。这里的一个常见任务就是缓存需要离线访问的资源。

以下是示例代码：

// www.javascriptcn.com code example
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/css/main.css',
  '/js/app.js',
  '/images/logo.png',
];

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

在这个示例中，我们定义了一个缓存名称 my-site-cache-v1，然后将需要离线访问的文件添加到缓存列表里。当 Service Worker 安装完毕并触发 install 事件时，它会获取缓存并将资源添加到缓存中。

缓存资源

在实际使用中，我们需要考虑更多的资源类型。这可能包括图像、字体、JavaScript 文件，以及特定于应用程序的资源。为了缓存这些资源，我们应该使用缓存策略，即确定资源何时应该被缓存、更新和如何获取的策略。我们可以使用以下 3 种缓存策略：

缓存优先：先从缓存中加载资源，如果缓存中不存在该资源，则从网络中加载。
网络优先：先从网络中加载资源，如果网络不可用或下载速度较慢，则返回缓存中的资源。
混合缓存：这种策略将结合上述两种缓存策略，提供更可靠的性能。如果资源在缓存中存在，则从缓存中返回资源。否则，从网络中获取资源，并更新缓存。在以后的请求中，它将从缓存中返回资源。

以下是一个使用混合缓存策略的 Service Worker 代码示例：

// www.javascriptcn.com code example
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        }

        return fetch(event.request)
          .then(function(response) {
            // Add response to cache
            return caches.open(CACHE_NAME).then(function(cache) {
              cache.put(event.request, response.clone());
              return response;
            });
          });
      })
  );
});

在这个代码块中，我们首先尝试从缓存中获取该请求的响应。如果缓存中有，我们就返回这个响应。如果缓存中没有，我们从网络中获取响应，并将其添加到缓存中。

配置离线模式

当浏览器无法连接到互联网时，我们需要配置应用程序以使用缓存资源。为此，我们可以使用下面的代码：

// www.javascriptcn.com code example
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        return response || fetch(event.request)
                      .then(function(resp){
                        return caches.open('v1').then(function(cache){
                          cache.put(event.request,resp.clone());
                          return resp;
                        });
                      });
      })
  );
});

在这个示例中，我们检查缓存是否已经存在以响应请求。如果缓存存在，则返回缓存的响应。否则，将从网络中获取响应，并将其添加到缓存中。这就保证了应用可以在离线状态下工作。

部署 Service Worker

在 Service Worker 开发完毕后，我们需要将其部署到服务器上。我们可以将 Service Worker 文件放到服务器根目录下，以便在客户端使用相对路径引用。也可以在 HTML 文件中使用绝对路径引用 Service Worker 文件：

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

当 Service Worker 文件被注册后，它将开始工作并管理应用程序的缓存。

结语

Service Worker 提供了一个唯一的机会来在应用程序中加入离线体验。通过缓存应用程序资源，我们可以提高应用程序的可靠性和性能，并确保用户在网络不太稳定的情况下仍然可以使用应用程序。本文提供了基本的示例和步骤，可以帮助您开始使用Service Worker。如果你想深入了解Service Worker，请参考下面的学习资源。

学习资源

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7f7a5a941bf7134e3bb7b

用 Service Worker 离线应对网络不可靠的应用