什么是PWA

PWA（Progressive Web Apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势

我们需要理解的是，PWA 不是某一项技术，或者某一个新的产物；而是一系列 Web 技术与标准的集合与应用。通过应用这些新的技术与标准，可以从安全、性能和体验三个方面，优化我们的 Web App。所以，其实 PWA 本质上依然是一个 Web App

特点

PWA 具有快速、可靠、粘性的特点。快速即快速响应，通过独立的线程进行资源缓存，提高页面的加载时间；可靠指在不稳当的网络环境下， App 也能瞬间加载并展现内容，在离线环境下也提供用户有效反馈；粘性则是通过沉浸式的用户界面、桌面图标、消息推送等手段来增强用户的粘度。总结下来，PWA 具有如下特性：

• 渐进式 - 适用于所有浏览器，因为它是以渐进式增强作为宗旨开发的
• 连接无关性 - 能够借助 Service Worker 在离线或者网络较差的情况下正常访问
• 类原生应用 - 由于是在 App Shell 模型基础上开发，因此应具有 Native App 的交互，给用户 Native App 的体验
• 持续更新 - 始终是最新的，无版本和更新问题
• 安全 - 通过 HTTPS 协议提供服务，防止窥探，确保内容不被篡改
• 可索引 - manifest 文件和 Service Worker 可以让搜索引擎索引到，从而将其识别为『应用』
• 黏性 - 通过推送离线通知等，可以让用户回流
• 可安装 - 用户可以添加常用的 Web App 到桌面，免去到应用商店下载的麻烦
• 可链接 - 通过链接即可分享内容，无需下载安装

下表列出了传统 Web App，Native App 和 PWA 在各特性的对比

技术

PWA 本身其实是一个概念集合，它不是指某一项技术，而是通过一系列的 Web 技术与 Web 标准来优化 Web App 的安全、性能和体验。其中涉及到的一些技术概念包括了：

• Web App Manifest
• Service Worker
• Cache API 缓存
• Push&Notification 推送与通知
• Background Sync 后台同步
• 响应式设计
• ……

举例

微博

项目 demo

为了方便演示, 我们用脚手架搭建一个 node 项目 GitHub 地址

• 安装脚手架 npm install -g koa-generator
• 使用 ejs 引擎创建名为 project 的项目 koa2 -e learning-pwa

本章分支: basic