前端必会黑科技之PWA

从 2018 年到写稿时，号称下一代 Web 应用模型的 PWA 成了各前端厂商争相布局的技术。它对标 Native App：原生在安全、性能、体验上确实领先，但开发贵，上架和版本更新都要过商店审核；低频 App 还得下一整包，隔一阵又得更新。

PWA 作为 Web 应用，天生能绕开安装包和审核链。下面按背景、定义、核心能力和和原生的差距来写。

一、背景

• 原生开发成本高。
• 上线、更新要发到不同商店并过审。
• 用得少也得装大包，停用一段时间后又要跟着版本重装。

二、什么是 PWA

PWA 是 Progressive Web App 的缩写，渐进式增强 Web 应用。Google 2016 年提出、2017 年落地，目标是在移动端用标准化能力，让网页接近原生体验。

官方三点：

Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.

Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.

Engaging - Feel like a natural app on the device, with an immersive user experience.

可靠——即时加载，弱网也不轻易挂。从主屏幕启动时，Service Worker 可立刻拉起应用；它像客户端代理，控制缓存和响应逻辑，预缓存关键资源后就能少依赖网络。

快速。据统计，站点加载超过 3s，53% 用户会放弃。页面出来后，用户还期望平滑过渡和快速响应。

沉浸——像设备上的原生应用。可安装到主屏幕，不必走应用商店；全屏体验，还能用 Web 推送把用户召回。

Web 应用可通过 manifest.json 控制显示和启动方式：主屏幕图标、启动要加载的页面、屏幕方向，以及是否显示浏览器 Chrome。

三、核心功能

PWA 不是单指某一项技术，更像一组思想和配套能力：用一系列 Web 技术把网站的安全性、性能、流畅度和体验往原生靠。

四、如何弥补和原生 App 的差距

性能：App Shell

PWA 使用 App Shell 架构：

1. 快速加载
2. 尽可能使用较少的数据
3. 使用本机缓存中的静态资产
4. 将内容与导航分离开来
5. 检索和显示特定页面的内容（HTML、JSON 等）
6. 缓存动态内容 App Shell 可保证 UI 的本地化以及从 API 动态加载内容，但同时不影响网络的可链接性和可检测性。 用户下次访问您的应用时，应用会自动显示最新版本。无需在使用前下载新版本。
为了保证首屏的加载，在内容请求完成之前，可以优先保证 App Shell 的渲染，做到和 Native App 一样的体验，App Shell 是 PWA 界面展现所需的最小资源。

无法离线使用

Service Worker + HTTPS +Cache Api + indexedDB 等一系列web技术实现离线加载和缓存

数据更新

Background Sync 后台同步技术

无法实现推送

Push&Notification 实现推送与通知

无法添加到桌面

通过manifest.json文件配置，使得可以直接添加到手机的桌面上。

天生优势：

• 无需安装下载，访问一次后加到桌面就能持续用。
• 发布不必提交应用商店审核。
• 版本迭代也不用重新过审。
• 现有网页改进即可成为 PWA，转型快。
• 不必各写一套 Android / iOS。

劣势：

• 浏览器支持还不全面，不是每款都能 100% 覆盖所有 PWA 能力。
• 调底层硬件（如摄像头）往往要靠第三方库。
• 当时国内部分 Android 定制系统似乎屏蔽了 PWA；等生态起来后这个问题会弱化。

五、发展趋势

2016 年 PWA 在 Google 落地；基于 Chromium 的 Chrome 和 Opera 已完全支持。iOS 11.3 起正式开始支持；Windows Edge 也支持。国内小程序同样吸收了 PWA 理念。随着浏览器大厂跟进，PWA 的窗口会越来越大。

一句话总结：PWA 用 Manifest + Service Worker + Cache/推送/后台同步，把 Web 做成可安装、可离线、接近原生的渐进增强应用；代价是浏览器和国内 ROM 支持仍不整齐。