渐进式 Web 应用（Progressive Web App，PWA）是用标准网页技术构建的网站，也可以像已安装的 App 一样使用：可以添加到主屏幕、在独立窗口中打开、离线时保留主要页面，并在支持的设备上发送通知。对于在网站、PWA 和原生 App 之间做选择的香港中小企业来说，PWA 处于中间位置：一套网页代码，再加上类似 App 的功能。
网站具备哪些条件才算 PWA
- Web app manifest：一个简短的 JSON 文件，用于设置 App 的名称、图标、起始页和显示模式，例如打开时不显示浏览器地址栏。
- Service worker：浏览器在页面之外单独运行的脚本，可以拦截网络请求、缓存文件，在网络较慢或断开时作出响应，也负责处理推送消息。
- 离线缓存：选定的页面和数据保存在设备上，主要页面离线时仍能加载，或显示清晰的离线提示。
- HTTPS：service worker 只在安全连接下运行，因此需要有效的 SSL 证书。
- 推送通知（可选）：用户同意后，你的服务器可以在平台支持的情况下发送通知。
“安装” PWA 通常只是在主屏幕或桌面添加一个图标，不需要从应用商店下载。
网站、PWA 和原生 App 的区别
- 普通网站：在浏览器标签页中打开，大部分页面需要联网，用户主要通过搜索和链接找到它。
- PWA：沿用同一套网页代码和网址，另外支持安装、离线页面，以及在支持的情况下发送通知。部署到服务器后即可更新，不需要经过应用商店审核。
- 原生 App：针对 iOS 和 Android 开发，通过 App Store 和 Google Play 发布。它对设备功能和后台处理的调用最深入，但每次发布都要经过商店审核。
对中小企业的好处
- 一套代码覆盖多种设备。手机、平板和电脑运行同一个 App，项目范围通常比开发两个原生 App 小。
- 不经过应用商店。客户打开链接即可使用，常用的话再安装。
- 更新更快。服务器上的修复，会在 service worker 获取新版本后到达用户。
- 重复访问更快。缓存配合用于静态文件的 CDN，可以让再次访问时感觉更快。
需要提前考虑的限制
- 平台差异。安装、通知和后台功能的支持情况因浏览器和操作系统而异，也会随时间变化。根据 Apple 的文档，iPhone 和 iPad（iOS 和 iPadOS 16.4 或更高版本）上的网页推送适用于已添加到主屏幕的 Web 应用，不适用于普通 Safari 标签页中的网页。承诺提供功能前，应先查阅最新文档。
- 设备访问有限。原生 App 可以使用的部分硬件和系统功能，在浏览器中可能受到限制。如果需要蓝牙或后台定位，应尽早在目标设备上测试。
- 离线功能需要设计。需要有人决定缓存什么、保留多久，以及离线提交的表单如何处理。浏览器可能清除已存储的数据，所以服务器仍应作为主要记录。
- 获取渠道不同。PWA 默认不会出现在应用商店；如需上架，要额外封装。
- 旧版本残留。缓存策略规划不当，可能让用户一直停留在旧版本，因此更新应先在预发布环境（Staging）中测试。
什么情况适合用 PWA
如果用户经常回来预约、浏览产品目录、填写表单或查看仪表板，而你希望用一个产品同时覆盖手机和电脑，PWA 通常比较合适。它也适合以 MVP 的形式验证想法。如果核心价值依赖设备硬件、大量离线使用，或者客户希望在应用商店找到你，原生 App 可能更合适。如果访客主要阅读信息，普通网站通常就够了。
以下为说明用例子：一家补习机构希望家长查看课程表并接收提醒。PWA 可以让家长安装课程表、离线查看，并在设备支持时选择接收网页推送提醒，同时以电子邮件作为备用方式。
委托开发 PWA 前的检查清单
- 用户实际使用哪些设备和浏览器？每种设备上必须支持哪些功能？
- 哪些页面必须离线可用？数据无法同步时，用户会看到什么？
- 是否需要推送通知？不支持时有什么备用方案？
- 它会通过 API 连接哪些系统，例如预约或支付系统？
- 更新如何测试？由谁确认缓存版本已经刷新？
- 上线后由谁维护 App、托管服务和证书？
如需比较不同方案，可以参阅我们的手机 App、Web App 及微信小程序开发页面，或我们的网站与 Web 应用开发服务。
常见问题
PWA 等于响应式网站吗？
不等于。响应式网站会根据屏幕调整布局。PWA 通常也是响应式的，同时加入 manifest 和 service worker，以支持安装和离线使用。
PWA 能在 iPhone 上使用吗？
它可以像普通网站一样在浏览器中打开，用户也可把它添加到主屏幕。网页推送等功能取决于 iOS 版本，以及 App 是否已添加到主屏幕。请在客户使用的设备上测试。
现有网站可以改成 PWA 吗？
通常可以，方法是加入 manifest、service worker 和 HTTPS。工作量取决于网站的构建方式，以及你需要多少离线功能。
PWA 会取代我们的原生 App 吗？
有时会。如果 App 主要展示内容和表单，PWA 可能已能满足大部分需求。如果它依赖设备硬件或需要在应用商店上架，应先比较两者再决定。