【PWA学习】1. 初识 PWA

什么是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 在各特性的对比

类型	是否可安装	是否可链接访问	用户体验	用户黏性
传统 Web	无法安装	可链接访问	体验一般	黏性差
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