PWA 的 Service Worker 使用详解

PWA 的 Service Worker 使用详解

随着移动互联网的快速发展，PWA（Progressive Web App）作为一种新型的 Web 应用程序模式，越来越受到前端开发者的关注。其中，Service Worker 是 PWA 中的重要组成部分，它可以让 Web 应用程序具备离线缓存、消息推送、网络代理等功能，提高了 Web 应用程序的用户体验。本文将详细介绍 Service Worker 的使用方法，包括注册、安装、激活以及常用的缓存策略。

一、Service Worker 简介

Service Worker 是运行在浏览器后台的 JavaScript 脚本，它可以拦截和处理浏览器发出的网络请求和响应，从而实现离线缓存、消息推送、网络代理等功能。Service Worker 与 Web Worker 类似，但不同的是，Service Worker 可以在浏览器关闭后依然运行，并且可以在离线状态下使用。

二、Service Worker 注册

要使用 Service Worker，首先需要在 Web 应用程序中注册它。在注册 Service Worker 之前，需要确保 Web 应用程序运行在 HTTPS 协议下，这是因为 Service Worker 需要使用 HTTPS 协议才能被注册。

Service Worker 的注册代码如下所示：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    console.log('Service Worker 注册成功：', registration.scope);
  }).catch(function(error) {
    console.log('Service Worker 注册失败：', error);
  });
}

在上面的代码中，我们首先使用 navigator.serviceWorker 对象判断浏览器是否支持 Service Worker，然后调用 register() 方法注册 Service Worker。register() 方法接受一个参数，即 Service Worker 脚本文件的路径，这里我们将 Service Worker 脚本文件命名为 sw.js，并放在 Web 应用程序的根目录下。

Service Worker 注册成功后，我们可以在浏览器的开发者工具中查看到注册的 Service Worker，如下图所示：

三、Service Worker 安装

Service Worker 注册成功后，下一步就是安装它。Service Worker 的安装过程一般在 install 事件中完成。在 Service Worker 安装过程中，我们可以将需要缓存的资源添加到缓存列表中。

Service Worker 的安装代码如下所示：

// javascriptcn.com 代码示例
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/css/style.css',
        '/js/main.js'
      ]);
    })
  );
});

在上面的代码中，我们首先使用 self.addEventListener() 方法监听 install 事件，然后使用 event.waitUntil() 方法等待缓存操作完成。在 caches.open() 方法中，我们创建一个名为 v1 的缓存列表，然后使用 cache.addAll() 方法将需要缓存的资源添加到缓存列表中。在这里，我们将根目录、首页、样式表和 JavaScript 文件添加到缓存列表中。

四、Service Worker 激活

Service Worker 安装成功后，下一步就是激活它。Service Worker 的激活过程一般在 activate 事件中完成。在 Service Worker 激活过程中，我们可以清理旧版本的缓存列表。

Service Worker 的激活代码如下所示：

// javascriptcn.com 代码示例
self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          return cacheName !== 'v1';
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
});

在上面的代码中，我们首先使用 self.addEventListener() 方法监听 activate 事件，然后使用 event.waitUntil() 方法等待清理操作完成。在 caches.keys() 方法中，我们获取所有缓存列表的名称，然后使用 Promise.all() 方法将所有需要清理的缓存列表删除。在这里，我们只保留名为 v1 的缓存列表，并删除其他所有的缓存列表。

五、Service Worker 缓存策略

Service Worker 的缓存策略是实现离线缓存的关键。在 Service Worker 中，我们可以使用不同的缓存策略来控制缓存的行为。常用的缓存策略包括 Cache First、Network First、Cache Only 和 Network Only。

1. Cache First

Cache First 策略是指优先使用缓存中的资源，如果缓存中不存在，则从网络中获取资源。这种策略适用于静态资源，例如图片、样式表和 JavaScript 文件等。

Cache First 策略的代码如下所示：

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

在上面的代码中，我们使用 caches.match() 方法查找缓存中是否存在请求的资源，如果存在，则返回缓存中的资源，否则从网络中获取资源。

1. Network First

Network First 策略是指优先从网络中获取资源，如果网络不可用，则使用缓存中的资源。这种策略适用于动态资源，例如 API 接口等。

Network First 策略的代码如下所示：

self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request).catch(function() {
      return caches.match(event.request);
    })
  );
});

在上面的代码中，我们使用 fetch() 方法从网络中获取资源，如果网络不可用，则使用 caches.match() 方法查找缓存中是否存在请求的资源。

1. Cache Only

Cache Only 策略是指只使用缓存中的资源，不从网络中获取资源。这种策略适用于离线状态下的应用程序。

Cache Only 策略的代码如下所示：

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
  );
});

在上面的代码中，我们直接使用 caches.match() 方法查找缓存中是否存在请求的资源。

1. Network Only

Network Only 策略是指只从网络中获取资源，不使用缓存中的资源。这种策略适用于需要实时更新的资源，例如聊天室等。

Network Only 策略的代码如下所示：

self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request)
  );
});

在上面的代码中，我们直接使用 fetch() 方法从网络中获取资源，不使用缓存中的资源。

六、Service Worker 示例代码

下面是一个完整的 Service Worker 示例代码：

// javascriptcn.com 代码示例
// 注册 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    console.log('Service Worker 注册成功：', registration.scope);
  }).catch(function(error) {
    console.log('Service Worker 注册失败：', error);
  });
}

// 安装 Service Worker
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/css/style.css',
        '/js/main.js'
      ]);
    })
  );
});

// 激活 Service Worker
self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          return cacheName !== 'v1';
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
});

// 缓存策略：Cache First
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

七、总结

Service Worker 是 PWA 中的重要组成部分，它可以让 Web 应用程序具备离线缓存、消息推送、网络代理等功能，提高了 Web 应用程序的用户体验。在使用 Service Worker 的过程中，我们需要注意注册、安装、激活以及缓存策略等方面的问题。希望本文对大家学习和使用 Service Worker 有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65719c19d2f5e1655da4d222