Service Worker 的缓存策略有哪些？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

Cache Only

这种策略适用于那些不经常变化的静态资源。Service Worker 会直接从缓存中返回资源，如果缓存中没有，则请求失败。这种策略可以确保极快的响应速度，但需要确保所有需要的资源都已经预先缓存。

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

Network Only

这种策略适用于需要实时获取最新数据的场景。Service Worker 会直接从网络获取资源，不使用缓存。这种策略确保了数据的实时性，但可能会增加网络请求的延迟。

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

Cache First, Fallback to Network

这种策略首先从缓存中获取资源，如果缓存中没有，则从网络获取。这种策略适用于那些不经常变化但需要快速加载的资源。

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

Network First, Fallback to Cache

这种策略首先从网络获取资源，如果网络请求失败，则从缓存中获取。这种策略适用于那些需要实时性但允许在无网络时使用缓存的场景。

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

Stale-While-Revalidate

这种策略首先从缓存中返回资源，同时在后台从网络获取最新资源并更新缓存。这种策略适用于那些需要快速响应但允许稍后更新资源的场景。

// www.javascriptcn.com code example
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cachedResponse => {
      const fetchPromise = fetch(event.request).then(networkResponse => {
        caches.open('my-cache').then(cache => {
          cache.put(event.request, networkResponse.clone());
        });
        return networkResponse;
      });
      return cachedResponse || fetchPromise;
    })
  );
});

这些缓存策略可以根据具体的应用场景进行选择和组合，以达到最佳的性能和用户体验。

Service Worker 的缓存策略有哪些？

推荐答案