<meta>标签无法配置离线访问授权策略，真正决定网页能否离线运行的是Service Worker的编程式缓存逻辑，而非任何<meta>标签。
HTML <meta> 标签无法配置离线访问的授权策略。它对页面离线可用性完全不生效，也不参与任何离线能力的授权或控制。
真正决定网页能否离线运行的，是 Service Worker 的编程式缓存逻辑，而非任何 <meta> 标签。
为什么 <meta> 标签不能支持离线访问
<meta http-equiv="Cache-Control" content="max-age=3600">
只影响浏览器对当前 HTML 文件的短期内存/磁盘缓存，不会预加载 JS、CSS、图片等资源，断网后仍会请求失败。<meta manifest="cache.appcache">
已被所有主流浏览器（Chrome 95+、Firefox 85+、Safari 16.4+）彻底移除，注册即静默失效，navigator.applicationCache为undefined。所有基于
<meta>的“缓存声明”都缺乏 fetch 拦截与响应注入能力，而离线访问必须在请求发出前就决定：是读缓存，还是走网络。
真正有效的离线访问实现路径
✅ 必须用 Service Worker（SW）
离线能力依赖两个核心环节，缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
install事件中预加载关键资源self.addEventListener('install', e => { e.waitUntil( caches.open('v1').then(cache => cache.addAll([ '/', '/index.html', '/app.js', '/style.css', '/logo.png' ]) ) ); }); -
fetch事件中按需返回缓存self.addEventListener('fetch', e => { if (e.request.destination === 'document') { e.respondWith( fetch(e.request).catch(() => caches.match('/offline.html')) ); } else if (['script', 'style', 'image'].includes(e.request.destination)) { e.respondWith( caches.match(e.request).then(r => r || fetch(e.request)) ); } });
✅ 关键生效条件（常被忽略）
- SW 脚本（如
sw.js）必须部署在根目录（或显式设置scope: '/'） - 页面必须通过 HTTPS 提供（
localhost除外；HTTP 下navigator.serviceWorker为undefined） - 首次访问只完成注册，缓存逻辑对下一次访问才生效
- 如需立即生效，需在
waiting状态调用skipWaiting()，并在activate中调用clients.claim()
常见误区澄清
- ❌ “加个
<meta>就能离线” —— 不成立，浏览器不解析这类语义 - ❌ “用
manifest+Cache-Control组合兼容旧版” —— AppCache 已全平台删除，无 fallback - ❌ “把数据塞进
<meta name="offline-config">就算授权” —— 这只是自定义元数据，和离线机制零关联
离线不是“声明”，而是“接管”：由 Service Worker 主动拦截网络请求，并决定返回缓存还是发起真实请求。这个闭环无法用声明式标签替代。
