什么是PWA
PWA（Progressive Web Apps，漸進(jìn)式 Web 應(yīng)用）運(yùn)用現(xiàn)代的 Web API 以及傳統(tǒng)的漸進(jìn)式增強(qiáng)策略來創(chuàng)建跨平臺(tái) Web 應(yīng)用程序。這些應(yīng)用無(wú)處不在、功能豐富，使其具有與原生應(yīng)用相同的用戶體驗(yàn)優(yōu)勢(shì)
我們需要理解的是，PWA 不是某一項(xiàng)技術(shù)，或者某一個(gè)新的產(chǎn)物；而是一系列 Web 技術(shù)與標(biāo)準(zhǔn)的集合與應(yīng)用。通過應(yīng)用這些新的技術(shù)與標(biāo)準(zhǔn)，可以從安全、性能和體驗(yàn)三個(gè)方面，優(yōu)化我們的 Web App。所以，其實(shí) PWA 本質(zhì)上依然是一個(gè) Web App
特點(diǎn)
PWA 具有快速、可靠、粘性的特點(diǎn)?？焖偌纯焖夙憫?yīng)，通過獨(dú)立的線程進(jìn)行資源緩存，提高頁(yè)面的加載時(shí)間；可靠指在不穩(wěn)當(dāng)?shù)木W(wǎng)絡(luò)環(huán)境下， App 也能瞬間加載并展現(xiàn)內(nèi)容，在離線環(huán)境下也提供用戶有效反饋；粘性則是通過沉浸式的用戶界面、桌面圖標(biāo)、消息推送等手段來增強(qiáng)用戶的粘度?？偨Y(jié)下來，PWA 具有如下特性：
- 漸進(jìn)式 - 適用于所有瀏覽器，因?yàn)樗且詽u進(jìn)式增強(qiáng)作為宗旨開發(fā)的
- 連接無(wú)關(guān)性 - 能夠借助 Service Worker 在離線或者網(wǎng)絡(luò)較差的情況下正常訪問
- 類原生應(yīng)用 - 由于是在 App Shell 模型基礎(chǔ)上開發(fā)，因此應(yīng)具有 Native App 的交互，給用戶 Native App 的體驗(yàn)
- 持續(xù)更新 - 始終是最新的，無(wú)版本和更新問題
- 安全 - 通過 HTTPS 協(xié)議提供服務(wù)，防止窺探，確保內(nèi)容不被篡改
- 可索引 - manifest 文件和 Service Worker 可以讓搜索引擎索引到，從而將其識(shí)別為『應(yīng)用』
- 黏性 - 通過推送離線通知等，可以讓用戶回流
- 可安裝 - 用戶可以添加常用的 Web App 到桌面，免去到應(yīng)用商店下載的麻煩
- 可鏈接 - 通過鏈接即可分享內(nèi)容，無(wú)需下載安裝
下表列出了傳統(tǒng) Web App，Native App 和 PWA 在各特性的對(duì)比
| 類型 | 是否可安裝 | 是否可鏈接訪問 | 用戶體驗(yàn) | 用戶黏性 |
|---|---|---|---|---|
| 傳統(tǒng) Web | 無(wú)法安裝 | 可鏈接訪問 | 體驗(yàn)一般 | 黏性差 |
| Native App | 可安裝 | 不可鏈接訪問 | 體驗(yàn)好 | 黏性強(qiáng) |
| PWA | 可安裝 | 可鏈接訪問 | 體驗(yàn)好 | 黏性強(qiáng) |
技術(shù)
PWA 本身其實(shí)是一個(gè)概念集合，它不是指某一項(xiàng)技術(shù)，而是通過一系列的 Web 技術(shù)與 Web 標(biāo)準(zhǔn)來優(yōu)化 Web App 的安全、性能和體驗(yàn)。其中涉及到的一些技術(shù)概念包括了：
- Web App Manifest
- Service Worker
- Cache API 緩存
- Push&Notification 推送與通知
- Background Sync 后臺(tái)同步
- 響應(yīng)式設(shè)計(jì)
- ……
舉例
項(xiàng)目 demo
為了方便演示, 我們用腳手架搭建一個(gè) node 項(xiàng)目 GitHub 地址
- 安裝腳手架
npm install -g koa-generator - 使用 ejs 引擎創(chuàng)建名為 project 的項(xiàng)目
koa2 -e learning-pwa
本章分支: basic
