从零到一掌握Disk Cache技术及其在前端应用中的实战经验分享

先看效果，再看代码

最近在项目里折腾了Disk Cache，发现这玩意儿确实能提升性能。今天就来分享一下我的实战经验，希望对你有帮助。

核心代码就这几行

首先，我们来看一下基本的使用方法。Disk Cache主要是用来缓存一些数据，避免每次都从服务器拉取，从而提升性能。

javascript
import { enableIndexedDbPersistence } from 'firebase/firestore';

const db = firebase.firestore();
enableIndexedDbPersistence(db)
  .then(() => {
    console.log('Persistence enabled');
  })
  .catch((err) => {
    if (err.code == 'failed-precondition') {
      console.error('Multiple tabs open, persistence can only be enabled in one tab at a time.');
    } else if (err.code == 'unimplemented') {
      console.error('The current browser does not support all of the features we need.');
    }
  });

这段代码是开启Firestore的持久化存储功能，简单来说就是把数据缓存到本地磁盘上。这样即使用户断网了，也能继续访问之前的数据。

这个场景最好用

我用Disk Cache最多的场景就是离线模式。比如用户在地铁上，信号不好，这时候如果能让他们看到之前浏览过的页面，体验会好很多。

javascript
const cache = new CacheStorage();

function fetchAndCache(url) {
  return fetch(url)
    .then(response => {
      if (response.ok) {
        const clone = response.clone();
        caches.open('my-cache').then(cache => {
          cache.put(url, clone);
        });
        return response;
      } else {
        throw new Error('Network request failed');
      }
    })
    .catch(error => {
      return caches.match(url).then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;
        } else {
          throw error;
        }
      });
    });
}

fetchAndCache('https://jztheme.com/api/data')
  .then(response => response.json())
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

上面这段代码展示了一个简单的离线缓存机制。当用户请求某个URL时，首先尝试从网络获取数据，成功后将数据缓存到本地；如果网络请求失败，则从缓存中读取数据。

踩坑提醒：这三点一定注意

在使用Disk Cache的过程中，我遇到了不少坑，这里总结一下：

• 多标签问题： 如果用户在多个标签页打开了同一个应用，只能有一个标签页启用持久化存储。其他标签页会报错，提示“multiple tabs open”。解决方法是捕获错误并处理。
• 浏览器兼容性： 不是所有浏览器都支持IndexedDB。如果你的应用需要在老版本浏览器上运行，记得做好兼容性处理。
• 数据一致性： 离线模式下，数据更新可能会延迟。你需要确保数据的一致性，比如在用户重新联网时同步最新的数据。

高级技巧：动态控制缓存策略

有时候，你可能需要根据不同的情况动态调整缓存策略。比如某些数据需要实时更新，而某些数据可以缓存一段时间。

javascript
const CACHE_NAME = 'my-cache';
const urlsToCache = [
  '/',
  '/styles.css',
  '/scripts.js'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response;
        }
        return fetch(event.request)
          .then(response => {
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }
            const responseToCache = response.clone();
            caches.open(CACHE_NAME)
              .then(cache => {
                cache.put(event.request, responseToCache);
              });
            return response;
          });
      })
  );
});

这段代码是一个Service Worker的例子，它会在安装时缓存一些静态资源，并在fetch事件中优先从缓存中读取数据。如果没有找到缓存，则从网络获取数据并缓存下来。

总结

以上是我对Disk Cache的一些实战经验和心得。这个技术的拓展用法还有很多，后续我会继续分享这类博客。如果你有更好的实现方式，欢迎在评论区交流。