如何为PHP/MySQL开发的生鲜电商网站实现离线支持？

嘿，这个问题问得太实用了！我刚好在做Web应用离线支持的时候研究过这套方案，给你拆解一下核心实现逻辑，尤其是你关心的CSS/HTML/JS这些静态资源怎么处理：

这俩是实现完整离线加载的核心——Service Worker就像浏览器后台的“守门人”，能拦截所有网络请求，而Cache API则负责把需要离线用的资源存在本地。

1. 先注册Service Worker #

首先得在你的主页面脚本里注册Service Worker，让浏览器知道要启用这个“守门人”：

// 比如在你的app.js里
if ('serviceWorker' in navigator) {
  // 等页面加载完成后注册，避免影响首屏速度
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('Service Worker注册成功啦:', reg.scope))
      .catch(err => console.error('Service Worker注册失败:', err));
  });
}

2. 首次访问时缓存静态资源 #

Service Worker有个install事件，在用户第一次访问网站时触发，你可以在这里把所有需要离线加载的静态资源（HTML、CSS、JS、图片甚至字体）都存入Cache：

// sw.js（这个文件要放在网站根目录，不然会影响作用域）
const CACHE_VERSION = 'grocery-store-v1';
// 把你需要离线访问的资源都列在这里
const CACHE_ASSETS = [
  '/', // 首页路由
  '/index.html',
  '/css/main.css',
  '/js/app.js',
  '/images/store-logo.png',
  '/fonts/roboto.woff2'
];

self.addEventListener('install', (event) => {
  // 等待所有资源缓存完成后，再完成Service Worker的安装
  event.waitUntil(
    caches.open(CACHE_VERSION)
      .then(cache => cache.addAll(CACHE_ASSETS))
      .then(() => self.skipWaiting()) // 跳过等待，直接激活新的Service Worker
  );
});

3. 离线时拦截请求，返回缓存资源 #

当用户离线访问网站时，Service Worker的fetch事件会拦截所有网络请求，这时候我们就可以直接返回之前缓存的资源：

// 继续在sw.js里添加
self.addEventListener('fetch', (event) => {
  // 处理页面导航请求（比如用户输入网址打开页面）
  if (event.request.mode === 'navigate') {
    event.respondWith(
      caches.match(event.request)
        .then(cachedRes => {
          // 有缓存就用缓存，没缓存再尝试网络（离线时网络会失败，但至少能返回缓存的页面）
          return cachedRes || fetch(event.request);
        })
    );
  } else {
    // 处理静态资源请求，采用"缓存优先"策略
    event.respondWith(
      caches.match(event.request)
        .then(cachedRes => {
          // 缓存存在就直接返回，否则去网络拉取并存入缓存
          return cachedRes || fetch(event.request)
            .then(networkRes => {
              caches.open(CACHE_VERSION)
                .then(cache => cache.put(event.request, networkRes.clone()));
              return networkRes;
            });
        })
    );
  }
});

4. 动态内容（比如产品列表）的离线处理 #

你提到的产品列表这类动态数据，可以用IndexedDB（比LocalStorage更适合存大量结构化数据）来存储：

• 首次访问时，从你的PHP接口拉取产品数据，存入IndexedDB
• 离线时，直接从IndexedDB读取数据渲染页面

举个简单的示例：

// 保存产品数据到IndexedDB
function saveProductsLocally(products) {
  const dbReq = indexedDB.open('GroceryStoreDB', 1);
  
  dbReq.onupgradeneeded = (e) => {
    const db = e.target.result;
    // 创建存储产品的对象仓库，用id作为主键
    db.createObjectStore('products', { keyPath: 'id' });
  };
  
  dbReq.onsuccess = (e) => {
    const db = e.target.result;
    const tx = db.transaction('products', 'readwrite');
    const store = tx.objectStore('products');
    
    // 批量存入产品数据
    products.forEach(prod => store.put(prod));
    
    tx.oncomplete = () => db.close();
  };
}

// 离线时读取本地产品数据
async function getLocalProducts() {
  return new Promise((resolve, reject) => {
    const dbReq = indexedDB.open('GroceryStoreDB', 1);
    
    dbReq.onsuccess = (e) => {
      const db = e.target.result;
      const tx = db.transaction('products', 'readonly');
      const store = tx.objectStore('products');
      const getReq = store.getAll();
      
      getReq.onsuccess = () => {
        resolve(getReq.result);
        db.close();
      };
      getReq.onerror = () => reject('读取本地产品失败');
    };
    dbReq.onerror = () => reject('打开数据库失败');
  });
}

几个关键注意事项 #

• 缓存版本管理：当你更新了静态资源（比如改了CSS），一定要修改CACHE_VERSION的值，这样Service Worker会重新安装并缓存新资源，避免用户看到旧内容。
• HTTPS要求：Service Worker只能在HTTPS环境下运行（本地开发的localhost例外），所以你的线上网站必须配置HTTPS。
• 资源列表要全：CACHE_ASSETS里一定要包含所有需要离线加载的资源，不然离线时会出现样式缺失、JS不运行的情况。
• 离线操作同步：如果用户离线时做了操作（比如添加购物车），可以用Background Sync API，等网络恢复后自动把数据同步到你的PHP后端。

内容的提问来源于stack exchange，提问作者KaZaT