离线状态下如何使用缓存访问PHP网页 解决断网500错误问题

你遇到的断网加载失败、报500错误的核心原因是：PHP默认输出的动态响应会携带禁止缓存的HTTP头，浏览器不会持久化存储PHP生成的入口HTML内容，断网时浏览器无法向服务器发起请求获取入口资源，自然无法加载页面。普通HTTP缓存的规则受服务端响应头控制，不会默认缓存动态生成的PHP内容。

1. 调整HTTP缓存策略 #

首先对不同类型的资源配置对应的缓存头，让浏览器可以合法缓存可复用的内容：

• 静态资源（CSS、JS、图片、字体等）：在服务端配置响应头Cache-Control: public, max-age=31536000，设置1年的强缓存时间，资源更新时通过添加版本戳（如style.css?v=20240601）的方式触发缓存更新。
• PHP生成的入口HTML：在PHP代码顶部添加协商缓存逻辑，允许浏览器缓存内容，联网时校验内容是否更新，断网时直接使用缓存：

<?php
// 根据当前页面内容生成唯一ETag，可根据实际业务逻辑调整生成规则
$etag = md5(filemtime(__FILE__));
header("ETag: \"{$etag}\"");
header("Cache-Control: public, max-age=0");

// 校验客户端缓存是否有效，有效则返回304不重复返回内容
if (isset($_SERVER['HTTP_IF_NONE_MATCH']) && trim($_SERVER['HTTP_IF_NONE_MATCH']) === "\"{$etag}\"") {
    http_response_code(304);
    exit;
}
?>

2. 接入Service Worker实现离线可控缓存 #

Service Worker是实现离线访问的标准方案，运行在浏览器后台，可以自主拦截请求、管理缓存，不受默认HTTP缓存规则限制：

• 首先在页面的公共JS中注册Service Worker：

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js')
            .then(() => console.log('离线缓存服务注册成功'))
            .catch(() => console.log('离线缓存服务注册失败'));
    });
}

• 在站点根目录新建sw.js文件，添加基础缓存逻辑：

const CACHE_VERSION = 'site-cache-v1';
// 填写所有需要离线缓存的资源路径，包括PHP入口地址
const CACHE_ASSETS = [
    '/',
    '/css/style.css',
    '/js/main.js'
];

// 安装时预缓存指定资源
self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(CACHE_VERSION)
            .then(cache => cache.addAll(CACHE_ASSETS))
            .then(() => self.skipWaiting())
    );
});

// 激活时清理旧版本缓存
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.filter(name => name !== CACHE_VERSION)
                    .map(name => caches.delete(name))
            );
        })
    );
});

// 拦截请求，联网时更新缓存，断网时返回缓存内容
self.addEventListener('fetch', event => {
    event.respondWith(
        fetch(event.request)
            .then(networkResponse => {
                caches.open(CACHE_VERSION).then(cache => {
                    cache.put(event.request, networkResponse.clone());
                });
                return networkResponse;
            })
            .catch(() => caches.match(event.request))
    );
});

3. 用localStorage存储动态数据 #

如果页面存在需要动态拉取的业务数据，可以在联网时将数据序列化后存入localStorage，页面渲染时优先读取本地存储的数据，断网时无需发起网络请求即可直接渲染内容：

// 联网时存储数据
localStorage.setItem('userData', JSON.stringify(userData));

// 页面加载时读取数据
const userData = JSON.parse(localStorage.getItem('userData') || '{}');

• Service Worker仅支持HTTPS环境和localhost本地开发环境，生产环境部署必须开启HTTPS。
• 不要缓存实时性要求高的接口和敏感数据，仅缓存允许离线展示的静态资源和非实时内容。

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