Service Worker 如何使用缓存？

推荐答案

// 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
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles/main.css',
        '/scripts/main.js',
        '/images/logo.png'
      ]);
    })
  );
});

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

本题详细解读

Service Worker 的基本概念

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

如何使用缓存

1. 注册 Service Worker
   首先，需要在主线程中注册 Service Worker。通过 navigator.serviceWorker.register() 方法注册一个 Service Worker 文件（如 service-worker.js），并指定其作用域。

2. 安装阶段
   在 install 事件中，可以预缓存一些静态资源。通过 caches.open() 方法打开一个缓存，然后使用 cache.addAll() 方法将需要缓存的资源添加到缓存中。

3. 拦截请求
   在 fetch 事件中，可以拦截网络请求并返回缓存中的资源。通过 caches.match() 方法匹配请求，如果缓存中有对应的资源，则直接返回缓存的内容；否则，继续从网络获取资源。

代码示例解析

• 注册 Service Worker
  在主线程中注册 Service Worker，并指定其作用域。注册成功后，Service Worker 文件将被下载并安装。

• 安装阶段
  在 install 事件中，打开一个名为 my-cache 的缓存，并将指定的静态资源（如 HTML、CSS、JS、图片等）添加到缓存中。

• 拦截请求
  在 fetch 事件中，拦截所有网络请求。首先尝试从缓存中匹配请求的资源，如果缓存中有对应的资源，则直接返回；否则，继续从网络获取资源。

注意事项

• 缓存策略
  在实际应用中，可能需要根据不同的资源类型和更新频率，制定不同的缓存策略。例如，对于不经常变化的静态资源，可以使用长期缓存；而对于频繁更新的动态资源，可能需要使用网络优先的策略。

• 缓存清理
  随着应用的更新，旧的缓存可能会变得不再适用。可以通过 caches.delete() 方法删除旧的缓存，或者在 activate 事件中清理不再需要的缓存。

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