PWA 是一套体验标准而非单一技术:HTTPS 基础上,manifest 文件声明应用名称、图标、启动方式与主题色,让浏览器把网页安装到桌面;Service Worker 负责离线缓存与资源代理;Web Push 配合 Notification API 让关闭的页面也能收到推送;配合 App Shell 架构保证秒开。
渐进增强是核心理念:支持新特性的浏览器获得原生级体验,老旧环境自动降级到普通网页。衡量是否达标的工具是 Lighthouse 的 PWA 审计。它适合做电商、资讯、工具类站点的留存优化——用户无需经过应用商店,一次访问即可安装。
<!-- 页面 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>