HTML怎么离线使用_HTML缓存策略基础配置【教程】

HTML离线运行唯一可靠方式是Service Worker，需HTTPS（localhost除外）、同源注册、两次刷新或skipWaiting生效；缓存须完整包含HTML及其依赖资源，fetch事件中按request.destination精准分流请求。HTML 离线运行靠的是 Service Worker，不是 meta 标签或 manifest 文件很多人以为加个 <meta http-equiv="Cache-Control" content="max-age=3600"> 或扔个 manifest.json 就能离线打开 HTML，实际根本不行。现代浏览器（Chrome/Firefox/Edge）已废弃 Application Cache（即 manifest），唯一可靠路径是注册并激活 ServiceWorker，它才能拦截网络请求、返回缓存资源。关键点：Service Worker 必须通过 HTTPS 提供（localhost 除外），且注册脚本必须和页面同源；注册后不会立即生效，需刷新两次或调用 skipWaiting()。只在支持 navigator.serviceWorker 的浏览器中启用，旧版 Safari 需降级处理service-worker.js 文件不能被其他缓存策略干扰（比如 Nginx 返回了 Cache-Control: no-store，会导致注册失败）首次加载页面时注册成功，但 install 事件里的缓存逻辑只对后续访问生效缓存静态 HTML 页面的正确写法：用 cache.addAll() 预加载关键资源直接 fetch index.html 并 put 到 cache 是错的------你得把 HTML + 它依赖的 JS/CSS/图片一并缓存，否则离线时 HTML 加载了，但 <script src="app.js"> 404。常见错误现象：Failed to load resource: net::ERR_FAILED 出现在控制台，但页面空白或功能缺失，本质是缓存不完整。立即学习"前端免费学习笔记（深入）"；在 install 事件里用 cache.addAll(['/', '/style.css', '/app.js', '/logo.png'])，注意路径必须是相对根路径（/ 表示站点根目录）不要缓存带查询参数的 URL（如 /data.json?v=1.2），不同参数会被视为不同键，容易爆缓存空间HTML 文件本身建议用 Stale-While-Revalidate 策略：先返回缓存，再后台更新，避免用户看到过期内容又卡住fetch 事件里怎么判断该走缓存还是网络：优先匹配 HTML，其余走缓存兜底Service Worker 的 fetch 事件是离线逻辑的核心开关。不能无差别缓存所有请求（比如 API 接口不该离线返回旧数据），也不能全走网络（那就没离线意义）。 Trenz AI驱动的社交电商营销平台，专为TikTok Shop设计