PWA 中的图片缓存：应该注意些什么？-JavaScript中文网-JavaScript教程资源分享门户

什么是 PWA？

PWA（渐进式网络应用程序）是指能够提供类似于本地应用程序的体验的 Web 应用程序。PWA 是一种全新的 Web 应用程序开发方式，它能够提供更好的离线功能、更快的加载速度、更好的用户体验等好处。

PWA 常用的技术有 Service Worker（服务工作线程）、Web App Manifest（应用程序清单）、离线缓存等。

图片缓存在 PWA 中的作用

在 PWA 中，图片缓存能够显著提高用户的体验。在用户访问网站时，首次加载的图片需要从服务器上下载。如果用户在下次访问时，图片依然没有被缓存，用户会再次需要下载这些图片，这将耗费用户的时间和流量。

使用图片缓存技术，可以将图片缓存到客户端本地，这样用户在下次访问网站时，就可以直接从缓存中读取图片，节约了用户的时间和流量。

图片缓存注意事项

1. 缓存有效性

图片缓存需要注意缓存有效性的问题。一些图片可能会更新或删除，如果过了缓存期限还从缓存中读取，就会出现问题。可以设置缓存过期时间来保证有效性，不过最好还是加上版本号，当图片更新时更新版本号，这样强制刷新即可。

// 设置缓存时间为一小时
const CACHE_TIME = 60 * 60 * 1000;
//缓存图片
self.addEventListener('fetch', function(event) {
  if (event.request.url.indexOf('example.com/images/') !== -1) {
    event.respondWith(
      caches.match(event.request).then(function(response) {
        if (response) {
          const cachedDate = response.headers.get('date');
          if (cachedDate && Date.now() - Date.parse(cachedDate) > CACHE_TIME) {
            // 过期了
            return fetchAndUpdate(event.request);
          }
          return response;
        }
        return fetchAndUpdate(event.request);
      })
    );
  }
});

// 缓存图片并更新时间
function fetchAndUpdate(request) {
  return fetch(request).then(function(response) {
    const clonedResponse = response.clone();
    caches.open(CACHE_NAME).then(function(cache) {
      cache.put(request, clonedResponse);
    });
    return response;
  }).catch(function() {
    console.log('缓存图片失败！');
  });
}

2. 内存占用

图片缓存可能会占用过多的内存，导致页面卡顿。可以设置缓存大小限制，当缓存大小达到上限时，可以移除最近最少使用的缓存。

// 设置缓存大小限制
const MAX_SIZE = 20 * 1024 * 1024; // 最大 20M
var cacheSize = 0;

// 缓存图片并更新时间
function fetchAndUpdate(request) {
  return fetch(request).then(function(response) {
    const clonedResponse = response.clone();
    const contentLength = response.headers.get('content-length');
    if (contentLength < MAX_SIZE) {
      caches.open(CACHE_NAME).then(function(cache) {
        cache.put(request, clonedResponse);
      });
      cacheSize += contentLength;
      // 移除最近最少使用的缓存
      const keysPromise = caches.keys().then(function(keys) {
        let delSize = 0;
        keys.forEach(function(key) {
          delSize += caches.delete(key);
          if (delSize >= Math.ceil(cacheSize * 0.2) || delSize === keys.length) {
            cacheSize -= delSize;
            return;
          }
        });
      });
      return response;
    } else {
      console.log('图片文件过大，不缓存！');
      return response;
    }
  }).catch(function() {
    console.log('缓存图片失败！');
  });
}

3. 网络状况检测

在缓存图片时，应该考虑不同网络状况下的处理方式。例如，在弱网络状况下，应该尽可能使用缓存图片以减少网络流量的消耗。

// 缓存图片并更新时间
function fetchAndUpdate(request) {
  return fetch(request).then(function(response) {
    const clonedResponse = response.clone();
    // 判断网络状况，选择是否缓存
    const connectionType = navigator.connection.effectiveType;
    if (connectionType === 'slow-2g' || connectionType === '2g') {
      console.log('网络状况较差，使用缓存图片！');
      return caches.match(request).then(function(response) {
        if (response) {
          return response;
        }
        return fetch(request);
      });
    } else {
      caches.open(CACHE_NAME).then(function(cache) {
        cache.put(request, clonedResponse);
      });
      return response;
    }
  }).catch(function() {
    console.log('缓存图片失败！');
  });
}

总结

在 PWA 中，使用图片缓存可以提高用户体验和网站性能。但同时也需要注意缓存有效性、内存占用和网络状况检测等问题。

我们需要选择合适的缓存策略来优化用户体验和页面性能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a3d053add4f0e0ffbfaaf4

PWA 中的图片缓存：应该注意些什么？