配置浏览器自动本地缓存图片的JavaScript实现方案

<script>// 检查浏览器是否支持 Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('ServiceWorker 注册成功:', registration.scope);
      })
      .catch(err => {
        console.log('ServiceWorker 注册失败:', err);
      });
  });
}</script>

// 定义缓存名称和版本const CACHE_NAME = 'image-cache-v1';const IMAGE_REGEX = /\.(png|jpe?g|webp|gif|svg)$/i;// 安装阶段：预缓存关键资源（可选）self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll([
          '/default-image.jpg', // 预缓存默认图片
        ]);
      })
  );});// 拦截请求并缓存图片self.addEventListener('fetch', (event) => {
  const url = event.request.url;

  // 仅处理图片请求
  if (IMAGE_REGEX.test(url)) {
    event.respondWith(
      caches.match(event.request)
        .then(cachedResponse => {
          // 返回缓存内容，若不存在则请求并缓存
          return cachedResponse || fetch(event.request)
            .then(response => {
              // 克隆响应以存入缓存
              const responseClone = response.clone();
              caches.open(CACHE_NAME)
                .then(cache => {
                  cache.put(event.request, responseClone);
                });
              return response;
            });
        })
    );
  } else {
    // 非图片请求直接通过
    return event.respondWith(fetch(event.request));
  }});// 清理旧缓存self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cache => {
          if (cache !== CACHE_NAME) {
            return caches.delete(cache);
          }
        })
      );
    })
  );});

// 在 fetch 事件中添加缓存有效期控制const MAX_AGE = 86400 * 7; // 缓存7天event.respondWith(
  caches.match(event.request)
    .then(cachedResponse => {
      const fetchPromise = fetch(event.request)
        .then(response => {
          if (response.status === 200) {
            const headers = new Headers(response.headers);
            headers.set('sw-cache-date', new Date().getTime());
            const modifiedResponse = new Response(response.body, {
              status: response.status,
              statusText: response.statusText,
              headers: headers            });
            caches.open(CACHE_NAME)
              .then(cache => cache.put(event.request, modifiedResponse));
          }
          return response.clone();
        });

      // 检查缓存是否过期
      if (cachedResponse) {
        const cacheDate = new Date(parseInt(cachedResponse.headers.get('sw-cache-date'))).getTime();
        if ((Date.now() - cacheDate) / 1000 < MAX_AGE) {
          return cachedResponse;
        }
      }
      return fetchPromise;
    }));

// 在缓存时检查存储配额navigator.storage.estimate()
  .then(estimate => {
    const used = estimate.usage;
    const quota = estimate.quota;
    if (used / quota > 0.9) {
      console.log('存储空间不足，清理旧缓存...');
      caches.open(CACHE_NAME)
        .then(cache => {
          cache.keys()
            .then(keys => {
              if (keys.length > 50) {
                cache.delete(keys[0]);
              }
            });
        });
    }
  });

Access-Control-Allow-Origin: *Access-Control-Allow-Methods: GET

fetch(event.request, { mode: 'cors' });