#码力全开·技术π对#PWA如何通过Service Workers实现离线缓存与后台同步？

const CACHE_NAME = 'pwa-v1';
const PRECACHE_URLS = ['/', '/index.html', '/app.js', '/styles.css'];

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

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(cached => cached || fetch(event.request))
  );
});

// 在页面中注册同步
navigator.serviceWorker.ready.then(sw => {
  sw.sync.register('sync-messages');
});

// 在Service Worker中处理
self.addEventListener('sync', event => {
  if (event.tag === 'sync-messages') {
    event.waitUntil(sendPendingMessages());
  }
});