HTML5是PWA的必要前提,因其原生支持Service Worker、Web App Manifest和Cache API三大核心标准,而HTML4完全不支持;必须使用声明、HTTPS协议及HTML5解析模式才能启用PWA全部能力。
HTML5 对 PWA 的支持远强于传统 HTML(即 HTML4 及更早版本),根本原因在于:PWA 所依赖的三大支柱——Service Worker、Web App Manifest、Cache API——全部是 HTML5 生态中定义并落地的现代 Web 标准,HTML4 完全不支持它们。
Service Worker 是 PWA 离线能力的核心,但它要求页面必须通过 https://(或 localhost)加载,且文档类型必须是 HTML5。如果你在页面顶部看到类似这样的声明:
✅ 这才是 HTML5 文档类型;而 或无声明,会导致部分浏览器(如旧版 Safari、IE)直接拒绝注册 navigator.serviceWorker.register('sw.js'),控制台报错 Uncaught TypeError: Cannot read property 'register' of undefined。
没在 HTML5 模式下解析,navigator.serviceWorker 就为 undefined
localhost 宽松,但 Safari 严格限制 —— HTML5 文档类型 + HTTPS 是硬门槛manifest 属性是否被正确注入Web App Manifest 是 PWA 可安装性的基础,但它必须通过 HTML 的 (已废弃)或更现代的 声明。注意:只有 HTML5 解析器才识别 rel="manifest"。
标签会被忽略,图标、启动屏、主题色等全部失效manifest.json 放错路径(如放在 /src/ 而非根目录),或未在 内声明html-webpack-plugin 自动注入:new HtmlWebpackPlugin({ manifest: './manifest.json' }),它会确保生成的 HTML 是 HTML5 并写入正确
当用户断网访问某个路由(如 /article/123),Service Worker 需返回一个预缓存的 offline.html。但若这个页面本身没被 HTML5 的 Cache API 显式缓存,或 HTML 结构里缺少关键语义标签(如 、),会导致渲染异常或白屏。
install 事件中用 caches.open('static-v1').then(cache => cache.addAll(['/offline.html'])) 显式缓存离线页offline.html 应是完整 HTML5 页面(含 、),否则在 iOS Safari 中可能触发缩放或布局错乱
event.request.destination === 'document' 判断,还要排除导航请求中的跨域重定向,否则 fallback 逻辑被绕过
HTML4 规范发布于 1999 年,而 Service Worker 提案始于 2013 年,Manifest 标准定稿于 2017 年。它们不是“HTML4 可选扩展”,而是完全独立于旧标准的新协议层。
localStorage 都不支持,更别说 Cache API 或 fetch()
)硬塞进 HTML4 页面,也不会激活 PWA 能力 —— 解析器模式决定能力边界真正容易被忽略的点是:很多老项目升级 PWA 时,只改了 JS 和 JSON,却忘了检查 index.html 是否仍是 HTML4 doctype、是否被后端模板引擎强制输出旧声明、甚至被 CDN 缓存了带过期头部的 HTML 文件。这些地方一卡,整个 PWA 就停在门口。