JS `Service Workers` 深度：离线缓存、网络代理与 PWA 功能

各位观众老爷们，晚上好！我是你们今晚的 Service Worker 特邀讲解员，江湖人称“代码界的老司机”。今天咱们不聊风花雪月，就来扒一扒 Service Worker 这位前端界的“幕后英雄”的底裤，啊不，是底细！

开场白：Service Worker 是个啥？

想象一下，你的网站就像一家餐厅，用户就是顾客。没有 Service Worker 的时候，顾客想点餐，只能通过服务员（浏览器）跑到厨房（服务器）去下单，厨房做好菜再送回来。如果厨房罢工了（网络断了），那顾客就只能饿肚子了。

但是，有了 Service Worker，相当于餐厅雇了个“代理服务员”，TA 可以：

记住顾客之前点过的菜（缓存）：下次顾客再点同样的菜，直接从“代理服务员”这儿拿，不用跑到厨房去。
代顾客跑腿（网络代理）：就算厨房罢工了，TA 也可以先给顾客上点存货（离线页面），或者告诉顾客厨房正在抢修，让顾客稍安勿躁。
偷偷给顾客发优惠券（推送通知）：趁顾客不注意，TA 还可以推送一些优惠信息，吸引顾客回头。

总而言之，Service Worker 是一个运行在浏览器后台的 JavaScript 脚本，它能拦截网络请求、管理缓存，并且支持推送通知等功能。它主要作用就是让你的 Web 应用拥有更强大的离线能力、更快的加载速度，以及更丰富的用户体验，是 PWA (Progressive Web App) 的核心技术之一。

第一幕：Service Worker 的生命周期

Service Worker 的一生，就像一个人的成长，要经历注册、安装、激活等阶段。

注册 (Registration)

首先，我们需要在网页中注册 Service Worker。这段代码通常放在 index.js 或类似的入口文件中：

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/service-worker.js')
       .then(registration => {
           console.log('Service Worker 注册成功，作用域：', registration.scope);
       })
       .catch(error => {
           console.log('Service Worker 注册失败：', error);
       });
} else {
   console.log('您的浏览器不支持 Service Worker。');
}

这段代码会检查浏览器是否支持 Service Worker，如果支持，就注册 service-worker.js 这个文件。registration.scope 指的是 Service Worker 的作用域，默认是 Service Worker 文件所在的目录及其子目录。

安装 (Installation)

注册成功后，浏览器会下载并安装 Service Worker。在 service-worker.js 文件中，我们可以监听 install 事件，进行一些初始化操作，比如缓存静态资源：
```
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
   '/',
   '/index.html',
   '/style.css',
   '/script.js',
   '/images/logo.png'
];

self.addEventListener('install', event => {
   // 延迟安装过程，直到所有资源都缓存完毕
   event.waitUntil(
       caches.open(CACHE_NAME)
           .then(cache => {
               console.log('已打开缓存');
               return cache.addAll(urlsToCache);
           })
   );
});
```
这段代码定义了一个缓存名称 CACHE_NAME 和一个需要缓存的资源列表 urlsToCache。在 install 事件中，我们打开一个名为 my-site-cache-v1 的缓存，并将 urlsToCache 中的所有资源添加到缓存中。event.waitUntil() 方法用于延迟安装过程，直到所有资源都缓存完毕。

激活 (Activation)

安装完成后，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.indexOf(cacheName) === -1) {
                       console.log('清除旧缓存：', cacheName);
                       return caches.delete(cacheName);
                   }
               })
           );
       })
   );
});

这段代码定义了一个缓存白名单 cacheWhitelist，只有白名单中的缓存才会被保留。在 activate 事件中，我们遍历所有缓存，如果缓存名称不在白名单中，就将其删除。这样做可以确保我们始终使用最新的缓存版本。

第二幕：离线缓存策略

Service Worker 最重要的功能之一就是离线缓存。我们可以使用不同的缓存策略，来满足不同的需求。

Cache First (缓存优先)

这种策略会先检查缓存，如果缓存中有对应的资源，就直接返回缓存中的资源。如果没有，再去网络请求。

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

               // 没有缓存，发起网络请求
               return fetch(event.request);
           }
       )
   );
});

这种策略适用于静态资源，比如图片、CSS 文件、JavaScript 文件等。

Network First (网络优先)

这种策略会先发起网络请求，如果网络请求成功，就返回网络请求的结果，并将结果缓存起来。如果网络请求失败，再去检查缓存。

self.addEventListener('fetch', event => {
   event.respondWith(
       fetch(event.request)
           .then(response => {
               // 检查是否收到了有效的响应
               if (!response || response.status !== 200 || response.type !== 'basic') {
                   return response;
               }

               // 克隆一份 response。因为 response 是 stream 类型的，只能被消费一次
               const responseToCache = response.clone();

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

               return response;
           }).catch(() => {
               // 网络请求失败，返回缓存中的资源
               return caches.match(event.request);
           })
   );
});

这种策略适用于动态资源，比如 API 接口的数据。

Cache Only (仅缓存)

这种策略只从缓存中获取资源，如果缓存中没有对应的资源，就返回一个错误。

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

               // 没有缓存，返回错误
               return new Response('Network error happened', {
                   status: 408,
                   headers: { 'Content-Type': 'text/plain' }
               });
           }
       )
   );
});

这种策略适用于一些必须离线访问的资源，比如离线页面。

Network Only (仅网络)

这种策略只从网络获取资源，不使用缓存。
```
self.addEventListener('fetch', event => {
   event.respondWith(fetch(event.request));
});
```
这种策略适用于一些不需要缓存的资源，比如一些实时更新的数据。

Stale-While-Revalidate (过时内容验证)

这种策略会先返回缓存中的资源，同时在后台发起网络请求，更新缓存。下次请求时，会返回最新的缓存资源。

self.addEventListener('fetch', event => {
   event.respondWith(
       caches.match(event.request)
           .then(response => {
               // 返回缓存中的资源，同时在后台更新缓存
               const fetchPromise = fetch(event.request).then(networkResponse => {
                   caches.open(CACHE_NAME)
                       .then(cache => {
                           cache.put(event.request, networkResponse.clone());
                           return networkResponse;
                       });
               })
               return response || fetchPromise;
           })
   );
});

这种策略适用于一些对实时性要求不高，但又希望尽快显示内容的资源。

缓存策略选择指南

缓存策略	适用场景	优点	缺点
Cache First	静态资源（图片、CSS、JS）	加载速度快，离线可用	缓存更新不及时
Network First	动态资源（API 接口）	保证数据最新，可以缓存	加载速度慢，离线不可用（除非有缓存）
Cache Only	离线页面	保证离线可用	必须事先缓存
Network Only	实时更新的数据	保证数据最新	离线不可用
Stale-While-Revalidate	对实时性要求不高，但希望尽快显示内容的资源（例如：文章列表）	加载速度快，可以后台更新缓存，下次请求返回最新数据	首次请求可能返回旧数据

第三幕：网络代理

Service Worker 可以拦截所有的网络请求，并进行处理。这使得我们可以实现一些高级功能，比如：

请求重定向

可以将某些请求重定向到其他 URL。

self.addEventListener('fetch', event => {
   if (event.request.url.includes('/api/old')) {
       event.respondWith(
           fetch(event.request.url.replace('/api/old', '/api/new'))
       );
   } else {
       event.respondWith(fetch(event.request));
   }
});

这段代码会将所有包含 /api/old 的请求重定向到 /api/new。

请求修改

可以修改请求的 header 或 body。

self.addEventListener('fetch', event => {
   const newRequest = new Request(event.request, {
       headers: {
           'X-Custom-Header': 'Custom Value'
       }
   });

   event.respondWith(fetch(newRequest));
});

这段代码会给所有请求添加一个 X-Custom-Header header。

自定义响应

可以返回自定义的响应，而不发起网络请求。

self.addEventListener('fetch', event => {
   if (event.request.url.includes('/api/')) {
       event.respondWith(
           new Response(JSON.stringify({ message: 'Hello from Service Worker!' }), {
               headers: { 'Content-Type': 'application/json' }
           })
       );
   } else {
       event.respondWith(fetch(event.request));
   }
});

这段代码会拦截所有包含 /api/ 的请求，并返回一个 JSON 格式的响应。

第四幕：PWA 功能

Service Worker 是 PWA 的核心技术之一，它可以让你的 Web 应用拥有以下 PWA 功能：

离线访问

通过缓存静态资源和 API 接口的数据，可以让你的 Web 应用在离线状态下也能访问。
添加到主屏幕

用户可以将你的 Web 应用添加到手机主屏幕，像原生应用一样打开。
推送通知

可以向用户发送推送通知，即使他们没有打开你的 Web 应用。
后台同步

可以在后台同步数据，即使 Web 应用处于关闭状态。

推送通知 (Push Notifications) 简述

推送通知允许你在用户离开你的网站后仍然与他们进行交互。实现推送通知需要以下步骤：

获取用户授权: 在你的 JavaScript 代码中，请求用户授予发送推送通知的权限。

navigator.serviceWorker.ready.then(function(registration) {
  return registration.pushManager.getSubscription()
  .then(function(subscription) {
    if (subscription) {
      return subscription;
    }

    const vapidPublicKey = "YOUR_VAPID_PUBLIC_KEY"; // Replace with your VAPID public key
    const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey);

    return registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey: convertedVapidKey
    });
  });
});

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/-/g, '+')
    .replace(/_/g, '/');

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

VAPID 密钥: 使用 VAPID (Voluntary Application Server Identification) 密钥来验证你的服务器。你需要生成一对 VAPID 密钥（公钥和私钥）。公钥放在客户端代码中，私钥用于服务器发送推送消息。
服务器端逻辑: 使用你的服务器端语言（例如 Node.js, Python, PHP）和库，将推送消息发送到用户的浏览器。这通常涉及到向一个推送服务 (例如 Firebase Cloud Messaging, Web Push Protocol) 发送一个 POST 请求。

Service Worker 监听 push 事件: 在你的 service-worker.js 文件中，监听 push 事件来处理接收到的推送消息。

self.addEventListener('push', function(event) {
  const data = event.data.json();
  const title = data.title || 'Default Title';
  const options = {
    body: data.body || 'Default Message',
    icon: data.icon || 'default-icon.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

后台同步 (Background Sync) 简述

后台同步允许你的 Web 应用在用户离线时发送数据，并在网络连接恢复后自动同步这些数据。

注册同步: 使用 navigator.serviceWorker.ready.then(registration => registration.sync.register('my-sync')) 来注册一个同步事件。

Service Worker 监听 sync 事件: 在 service-worker.js 文件中，监听 sync 事件来处理同步请求。

self.addEventListener('sync', function(event) {
  if (event.tag === 'my-sync') {
    event.waitUntil(doSomeBackgroundWork()); // Replace with your actual sync logic
  }
});

async function doSomeBackgroundWork() {
  // Your logic to sync data with the server
  // For example, retry failed API calls
}

结语：Service Worker 的注意事项

HTTPS：Service Worker 只能在 HTTPS 环境下运行，这是为了安全考虑。
作用域：Service Worker 的作用域决定了它可以拦截哪些请求。要小心设置作用域，避免拦截不必要的请求。
更新：当 Service Worker 文件发生变化时，浏览器会自动更新 Service Worker。但是，旧的 Service Worker 会继续运行，直到所有打开的页面都关闭。
调试：可以使用 Chrome 的开发者工具来调试 Service Worker。在 "Application" -> "Service Workers" 面板中，可以查看 Service Worker 的状态、拦截的请求、缓存等信息。

总结

Service Worker 是一个强大的技术，它可以让你的 Web 应用拥有更强大的离线能力、更快的加载速度，以及更丰富的用户体验。但是，Service Worker 也有一些需要注意的地方。希望今天的讲解能帮助你更好地理解 Service Worker，并在你的 Web 应用中应用它。

好了，今天的讲座就到这里。希望大家能从中学到一些东西。如果有什么问题，欢迎提问。谢谢大家！

发表回复 取消回复

发表回复取消回复