กลยุทธ์การแคชออฟไลน์: CacheFirst และ NetworkFirst

เหตุใดกลยุทธ์การเก็บแคชจึงสำคัญ

Cache API

// open a cache:
const cache = await caches.open('v1');

// add resources:
await cache.add('/styles.css');
await cache.addAll(['/', '/app.js', '/styles.css']);

// look up:
const response = await cache.match('/styles.css');

// delete:
await cache.delete('/styles.css');

ใช้ cache ก่อน

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      if (cached) return cached;
      return fetch(event.request).then(res => {
        const clone = res.clone();
        caches.open('v1').then(c => c.put(event.request, clone));
        return res;
      });
    })
  );
});

ใช้ network ก่อน

self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request).then(res => {
      const clone = res.clone();
      caches.open('api-v1').then(c => c.put(event.request, clone));
      return res;
    }).catch(() => caches.match(event.request))
  );
});

แสดงข้อมูลเก่าพร้อมตรวจสอบใหม่

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      const network = fetch(event.request).then(res => {
        caches.open('v1').then(c => c.put(event.request, res.clone()));
        return res;
      });
      return cached || network;
    })
  );
});

ใช้ network เท่านั้น

self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('/api/auth')) {
    event.respondWith(fetch(event.request));
    return;
  }
  // ... other strategies
});

ใช้ cache เท่านั้น

กลยุทธ์ของ Workbox

import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';

registerRoute(({ request }) => request.destination === 'image',
  new CacheFirst({ cacheName: 'images' })
);

registerRoute(({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 })
);

registerRoute(({ request }) => request.destination === 'document',
  new StaleWhileRevalidate({ cacheName: 'pages' })
);

การหมดอายุของ cache

import { ExpirationPlugin } from 'workbox-expiration';

new CacheFirst({
  cacheName: 'images',
  plugins: [new ExpirationPlugin({
    maxEntries: 50,
    maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
  })]
});

การตอบกลับที่เก็บใน cache ได้

หน้าสำรองเมื่อออฟไลน์

self.addEventListener('install', (e) => {
  e.waitUntil(caches.open('offline').then(c => c.add('/offline.html')));
});

self.addEventListener('fetch', (e) => {
  if (e.request.mode === 'navigate') {
    e.respondWith(
      fetch(e.request).catch(() => caches.match('/offline.html'))
    );
  }
});

เลือกกลยุทธ์ที่เหมาะสม

ตรวจสอบอย่างรวดเร็ว

สรุป: กลยุทธ์การเก็บแคช