如何阻止PWA缓存PHP站点中的页面渲染动态内容？

在传统PHP服务器渲染的站点上做PWA时，很容易碰到静态缓存把带动态数据的页面“固定”住的问题——就像你说的，缓存首页后用户看到的永远是旧的渲染内容。我之前也踩过这个坑，这里分享几个实用的解决方案，帮你兼顾PWA的缓存优势和页面内容的动态性：

1. 给静态资源和动态页面分配合适的缓存策略 #

Service Worker的核心就是缓存策略的控制，我们可以对静态资源（CSS、JS、图片等）用CacheFirst提升加载速度，而对动态渲染的PHP页面（比如首页/）用NetworkFirst或StaleWhileRevalidate策略，优先从网络获取最新内容，同时在网络失败时回退到缓存版本。

示例Service Worker代码：

self.addEventListener('fetch', (event) => {
  // 处理导航请求（比如用户直接访问首页）和PHP页面
  if (event.request.mode === 'navigate' || event.request.url.includes('.php')) {
    event.respondWith(
      // 优先请求网络
      fetch(event.request)
        .then(freshResponse => {
          // 把最新的页面缓存起来，供离线时使用
          caches.open('dynamic-pages').then(cache => {
            cache.put(event.request, freshResponse.clone());
          });
          return freshResponse;
        })
        .catch(() => {
          // 网络失败时，返回缓存的页面
          return caches.match(event.request);
        })
    );
  } else {
    // 静态资源用缓存优先策略
    event.respondWith(
      caches.match(event.request)
        .then(cachedAsset => {
          return cachedAsset || fetch(event.request).then(newAsset => {
            caches.open('static-assets').then(cache => {
              cache.put(event.request, newAsset.clone());
            });
            return newAsset;
          });
        })
    );
  }
});

2. 给动态页面添加版本验证头（ETag/Last-Modified） #

在PHP页面中生成基于内容的ETag或Last-Modified头，让Service Worker能判断页面内容是否更新，避免无意义的缓存更新。

示例PHP代码（放在页面顶部）：

<?php
// 生成基于当前页面内容的ETag（如果内容依赖数据库，可结合数据更新时间生成更精准的哈希）
$contentHash = md5(ob_get_contents() . filemtime(__FILE__));
header("ETag: \"$contentHash\"");
header("Last-Modified: " . gmdate("D, d M Y H:i:s", filemtime(__FILE__)) . " GMT");

// 检查请求头，判断是否需要返回304（内容未修改）
if (isset($_SERVER['HTTP_IF_NONE_MATCH']) && $_SERVER['HTTP_IF_NONE_MATCH'] === "\"$contentHash\"") {
    header("HTTP/1.1 304 Not Modified");
    exit;
}
?>

这样Service Worker在请求页面时，会先对比服务器返回的ETag，只有内容真正变化时才会更新缓存，既保证了内容新鲜度，又减少了不必要的网络请求。

3. 完全不缓存HTML页面（简单直接的方案） #

如果你的站点对离线访问动态页面的需求不高，可以让HTML页面始终走网络请求，只缓存静态资源。这种方式最简单，完全不用担心动态内容被缓存固定。

修改后的Service Worker代码：

self.addEventListener('fetch', (event) => {
  // 只缓存非导航请求的静态资源（排除HTML/PHP页面）
  if (event.request.mode !== 'navigate' && !event.request.url.endsWith('.php')) {
    event.respondWith(
      caches.match(event.request)
        .then(cachedAsset => {
          return cachedAsset || fetch(event.request).then(newAsset => {
            caches.open('static-assets').then(cache => {
              cache.put(event.request, newAsset.clone());
            });
            return newAsset;
          });
        })
    );
  }
});

根据你的实际需求选择合适的方案：如果需要离线访问动态内容，NetworkFirst+ETag是兼顾新鲜度和离线体验的最优解；如果离线需求不强，直接让HTML走网络最省心。

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