如何实现前端项目的 Service Worker 缓存？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

// 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 文件内容
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);
      })
  );
});

本题详细解读

Service Worker 的作用

Service Worker 是一种运行在浏览器后台的脚本，独立于网页，能够拦截网络请求、缓存资源、推送消息等。它使得前端应用可以离线工作，提升用户体验。

实现步骤

注册 Service Worker：
- 在主线程中通过 navigator.serviceWorker.register() 方法注册 Service Worker。
- 注册成功后，Service Worker 文件（如 service-worker.js）将被下载并安装。
安装阶段：
- 在 install 事件中，使用 caches.open() 打开一个缓存，并通过 cache.addAll() 缓存指定的资源。
- 这个阶段通常用于预缓存关键资源，以便在离线时使用。
拦截请求：
- 在 fetch 事件中，使用 caches.match() 检查请求的资源是否已经在缓存中。
- 如果缓存中存在该资源，则直接返回缓存内容；否则，继续向网络请求资源。
更新缓存：
- 当 Service Worker 文件发生变化时，浏览器会重新下载并安装新的 Service Worker。
- 可以通过监听 activate 事件来清理旧的缓存。

注意事项

HTTPS：Service Worker 只能在 HTTPS 环境下运行（localhost 除外）。
缓存策略：根据项目需求选择合适的缓存策略，如缓存优先、网络优先等。
缓存清理：定期清理过期的缓存，避免占用过多存储空间。

通过以上步骤，可以实现前端项目的 Service Worker 缓存，提升应用的性能和离线体验。