HTML5 词条目录
前端Wiki/词条/PWA 渐进式应用

PWA 渐进式应用

定义用 Web 技术打造的类原生应用:可安装、可离线、可接收推送

PWA 是一套体验标准而非单一技术:HTTPS 基础上,manifest 文件声明应用名称、图标、启动方式与主题色,让浏览器把网页安装到桌面;Service Worker 负责离线缓存与资源代理;Web Push 配合 Notification API 让关闭的页面也能收到推送;配合 App Shell 架构保证秒开。

渐进增强是核心理念:支持新特性的浏览器获得原生级体验,老旧环境自动降级到普通网页。衡量是否达标的工具是 Lighthouse 的 PWA 审计。它适合做电商、资讯、工具类站点的留存优化——用户无需经过应用商店,一次访问即可安装。

HTML
<!-- 页面 head 中声明清单文件 -->
<link rel="manifest" href="/manifest.json">

<!-- manifest.json 示例 -->
<!--
{
  "name": "我的记事本",
  "short_name": "记事本",
  "icons": [{ "src": "/icon.png", "sizes": "192x192", "type": "image/png" }],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4a9eff"
}
-->
<script>
  // 安装提示监听(页面脚本)
  window.addEventListener('beforeinstallprompt', function (e) {
    e.preventDefault();
    console.log('浏览器已允许安装本站为桌面应用');
  });
</script>
⚠ 常见误区
🔗 相关词条离线存储渐进增强
← 返回来源章节离线存储