yu-zhi-ran/platform/frontend/sw.js

// Service Worker for 宇之然内容创作平台
const CACHE_NAME = 'yuzhiran-v1';
const CACHE_URLS = [
  '/',
  '/index.html',
  '/offline.html',
  '/static/vue.global.prod.js',
  '/static/element-plus.css',
  '/static/element-plus.full.js',
  '/manifest.json'
];

// 安装事件：预缓存核心资源
self.addEventListener('install', (event) => {
  console.log('[SW] Installing...');
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('[SW] Pre-caching core assets');
      return cache.addAll(CACHE_URLS.map(url => {
        // 忽略同源请求404错误（静态资源可能不存在）
        return new Promise((resolve, reject) => {
          fetch(url).then(response => {
            if (response.ok) {
              resolve(url);
            } else {
              reject(new Error(`Failed to fetch ${url}: ${response.status}`));
            }
          }).catch(() => {
            // 静默失败，不阻止安装
            resolve(url);
          });
        });
      }));
    }).catch(err => {
      console.error('[SW] Install failed:', err);
    })
  );
  self.skipWaiting();
});

// 激活事件：清理旧缓存
self.addEventListener('activate', (event) => {
  console.log('[SW] Activating...');
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cache) => {
          if (cache !== CACHE_NAME) {
            console.log('[SW] Deleting old cache:', cache);
            return caches.delete(cache);
          }
        })
      );
    })
  );
  self.clients.claim();
});

// 网络请求拦截：Cache First + Network Fallback
self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);

  // 只处理同源请求
  if (url.origin !== location.origin) {
    return;
  }

  // API 请求：Network Only（不走缓存）
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(fetch(request));
    return;
  }

  // 静态资源：Cache First
  event.respondWith(
    caches.match(request).then((cached) => {
      if (cached) {
        // 返回缓存，并在后台更新
        fetch(request).then(response => {
          if (response.ok) {
            caches.open(CACHE_NAME).then(cache => cache.put(request, response));
          }
        });
        return cached;
      }

      // 无缓存，发起网络请求
      return fetch(request).then(response => {
        // 成功且为有效响应，加入缓存
        if (response.ok && response.status === 200) {
          const responseClone = response.clone();
          caches.open(CACHE_NAME).then(cache => cache.put(request, responseClone));
        }
        return response;
      }).catch(() => {
        // 网络失败，尝试返回离线页面（如果是文档请求）
        if (request.destination === 'document') {
          return caches.match('/offline.html');
        }
      });
    })
  );
});

// 后台同步（可选：在网络恢复后发送错误日志）
self.addEventListener('sync', (event) => {
  if (event.tag === 'sync-logs') {
    event.waitUntil(syncLogs());
  }
});

async function syncLogs() {
  // TODO: 实现日志同步
  console.log('[SW] Syncing logs...');
}