常用HTML网页离线缓存配置文件代码-html教程-PHP中文网

html网页离线缓存现在只应使用service worker，因application cache（manifest）已被chrome 95+、firefox 85+、safari 16.4+全面移除支持，配置.cache-manifest文件完全无效；唯一可行方案是https或localhost下注册service worker并配合cache api实现离线缓存。

常用html网页离线缓存配置文件代码

HTML 网页离线缓存现在只应使用 Service Worker，manifest 已被所有主流浏览器弃用（Chrome 95+、Firefox 85+、Safari 16.4+ 均已移除支持），继续配置 cache.manifest 或 .appcache 文件将完全无效，且可能引发控制台警告甚至加载失败。

为什么不能用 manifest 文件了

浏览器已彻底移除 Application Cache API，调用 window.applicationCache 会返回 undefined，属性被忽略，服务器返回 text/cache-manifest MIME 类型也不再触发任何缓存行为。即使旧代码看似“没报错”，实际也零效果。

Chrome 控制台会输出：Application Cache is deprecated and will be removed in a future version.（该提示在 2023 年后已升级为直接静默失效）
Firefox 在 v85 后完全屏蔽 manifest 解析逻辑，不发请求也不建缓存
Safari 自 16.4 起删除所有相关 DOM 接口和事件（如 updateready），applicationCache 全局变量不存在

Service Worker 最小可用配置（sw.js）

必须部署在 HTTPS 或 localhost 下；注册脚本需放在主页面的 JS 中（不能延迟或包裹在异步回调里）；缓存命名建议带版本号，避免旧缓存残留。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

注册代码（写在 <script></script> 标签内，越早执行越好）：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').catch(err => console.error('SW registration failed:', err));
}

sw.js 内容示例（缓存 HTML/CSS/JS 三类核心资源）：

const CACHE_NAME = 'my-app-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/logo.png'
];

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

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

注意：caches.match() 默认只匹配 GET 请求；若需处理 POST 或带 credentials 的请求，需显式传参 {ignoreSearch: true, ignoreVary: true}

常见踩坑点：缓存不生效或更新失败

Service Worker 的生命周期和缓存策略比 manifest 更严格，出问题往往不是代码写错，而是环境或时机不对。

本地开发时用了 HTTP（非 localhost）→ register() 直接抛 SecurityError，必须切到 HTTPS 或保持 localhost
修改了 sw.js 内容但页面没更新 → 浏览器仍运行旧版 SW，需手动在 DevTools → Application → Service Workers 点击 Update on reload，或调用 skipWaiting()
缓存了 / 但未缓存 /index.html → 访问根路径时可能 fallback 到网络，导致离线白屏；务必确保 HTML 文件明确列入 urlsToCache
动态路由（如 /user/123）未预缓存 → caches.match() 找不到，又没配 fallback 逻辑 → 返回空响应；此时应改用 NetworkFirst 或 StaleWhileRevalidate 策略