JavaScript 中如何使用 Service Workers？

推荐答案

// www.javascriptcn.com code example
// 注册 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker 注册成功:', registration.scope);
    })
    .catch(function(error) {
      console.log('Service Worker 注册失败:', error);
    });
}

// 在 service-worker.js 文件中编写 Service Worker 逻辑
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/index.html',
        '/styles.css',
        '/script.js'
      ]);
    })
  );
});

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

本题详细解读

什么是 Service Worker？

Service Worker 是一种运行在浏览器后台的脚本，独立于网页，主要用于拦截网络请求、缓存资源、推送通知等。它可以让网页在没有网络连接的情况下也能正常工作，提升用户体验。

Service Worker 的生命周期

1. 注册：通过 navigator.serviceWorker.register() 方法注册 Service Worker。注册成功后，Service Worker 会进入安装阶段。
2. 安装：在 install 事件中，可以缓存静态资源。使用 event.waitUntil() 确保缓存完成后再进入下一阶段。
3. 激活：在 activate 事件中，可以清理旧的缓存。
4. 拦截请求：在 fetch 事件中，可以拦截网络请求并返回缓存的资源或从网络获取资源。

代码解析

1. 注册 Service Worker：

   • 使用 navigator.serviceWorker.register() 方法注册 Service Worker，并指定 Service Worker 脚本的路径。
   • 注册成功后，registration.scope 表示 Service Worker 的作用域。

2. 安装阶段：

   • 在 install 事件中，使用 caches.open() 打开一个缓存，并使用 cache.addAll() 缓存指定的资源。
   • event.waitUntil() 确保缓存完成后才会进入下一阶段。

3. 拦截请求：

   • 在 fetch 事件中，使用 caches.match() 检查请求的资源是否已经缓存。
   • 如果缓存中存在该资源，则直接返回缓存的资源；否则，从网络获取资源。

注意事项

• Service Worker 只能在 HTTPS 或 localhost 环境下运行。
• Service Worker 的作用域由注册时的路径决定，默认情况下，Service Worker 只能拦截其所在目录及其子目录下的请求。
• Service Worker 的更新需要手动处理，通常可以通过 self.skipWaiting() 和 clients.claim() 强制更新。

通过以上步骤，你可以在 JavaScript 中使用 Service Worker 来实现离线缓存、资源预加载等功能，从而提升网页的性能和用户体验。