请解释 Service Worker 的作用和用法。如何使用 Service Worker 实现离线缓存？

推荐答案

Service Worker 是一种运行在浏览器后台的脚本，独立于网页，主要用于拦截网络请求、缓存资源、推送通知等。它可以让网页在没有网络连接的情况下依然能够正常运行，从而实现离线缓存。

使用 Service Worker 实现离线缓存的步骤：

1. 注册 Service Worker： 在网页的主 JavaScript 文件中注册 Service Worker。

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

2. 编写 Service Worker 脚本： 在 service-worker.js 文件中编写缓存逻辑。

   // www.javascriptcn.com code example
   const CACHE_NAME = 'my-site-cache-v1';
   const urlsToCache = [
     '/',
     '/styles/main.css',
     '/script/main.js',
     '/images/logo.png'
   ];
   
   self.addEventListener('install', function(event) {
     event.waitUntil(
       caches.open(CACHE_NAME)
         .then(function(cache) {
           console.log('Opened cache');
           return cache.addAll(urlsToCache);
         })
     );
   });
   
   self.addEventListener('fetch', function(event) {
     event.respondWith(
       caches.match(event.request)
         .then(function(response) {
           if (response) {
             return response;
           }
           return fetch(event.request);
         })
     );
   });

3. 更新缓存： 当资源更新时，可以通过更新 CACHE_NAME 来强制更新缓存。

   // www.javascriptcn.com code example
   self.addEventListener('activate', function(event) {
     const cacheWhitelist = ['my-site-cache-v2'];
   
     event.waitUntil(
       caches.keys().then(function(cacheNames) {
         return Promise.all(
           cacheNames.map(function(cacheName) {
             if (cacheWhitelist.indexOf(cacheName) === -1) {
               return caches.delete(cacheName);
             }
           })
         );
       })
     );
   });

本题详细解读

Service Worker 的作用

Service Worker 是一个独立于网页的脚本，运行在浏览器后台，主要用于：

• 拦截网络请求：可以拦截并处理网页发出的所有网络请求。
• 缓存资源：可以将资源缓存到本地，使得网页在离线状态下依然可以访问。
• 推送通知：可以在后台接收服务器推送的通知。
• 后台同步：可以在网络恢复时同步数据。

Service Worker 的用法

1. 注册：通过 navigator.serviceWorker.register() 方法注册 Service Worker。
2. 安装：在 install 事件中缓存资源。
3. 拦截请求：在 fetch 事件中拦截网络请求，并返回缓存的资源。
4. 更新缓存：在 activate 事件中删除旧的缓存。

实现离线缓存的关键点

• 缓存策略：选择合适的缓存策略，如“缓存优先”或“网络优先”。
• 缓存更新：通过更新 CACHE_NAME 或使用版本控制来管理缓存更新。
• 错误处理：在 fetch 事件中处理网络请求失败的情况，确保用户体验。

通过以上步骤和策略，可以有效地使用 Service Worker 实现离线缓存，提升网页的性能和用户体验。