摘要：學(xué)習(xí)與實(shí)踐系列文章已整理至學(xué)習(xí)手冊(cè)，文字內(nèi)容已同步至。本系列文章學(xué)習(xí)與實(shí)踐會(huì)逐步拆解背后的各項(xiàng)技術(shù)，通過(guò)實(shí)例代碼來(lái)講解這些技術(shù)的應(yīng)用方式。而隨著在中也開(kāi)始支持其中的某些技術(shù)，的舞臺(tái)更大了。這個(gè)最開(kāi)始是不具備任何的能力。

《PWA學(xué)習(xí)與實(shí)踐》系列文章已整理至gitbook - PWA學(xué)習(xí)手冊(cè)，文字內(nèi)容已同步至learning-pwa-ebook。轉(zhuǎn)載請(qǐng)注明作者與出處。

PWA作為今年最火熱的技術(shù)概念之一，對(duì)提升Web應(yīng)用的安全、性能和體驗(yàn)有著很大的意義，非常值得我們?nèi)チ私馀c學(xué)習(xí)。

本系列文章《PWA學(xué)習(xí)與實(shí)踐》會(huì)逐步拆解PWA背后的各項(xiàng)技術(shù)，通過(guò)實(shí)例代碼來(lái)講解這些技術(shù)的應(yīng)用方式。也正是因?yàn)镻WA中技術(shù)點(diǎn)眾多、知識(shí)細(xì)碎，因此我在學(xué)習(xí)過(guò)程中，進(jìn)行了整理，并產(chǎn)出了《PWA學(xué)習(xí)與實(shí)踐》系列文章，希望能帶大家全面了解PWA中的各項(xiàng)技術(shù)。對(duì)PWA感興趣的朋友歡迎關(guān)注。

首先簡(jiǎn)單了解一下PWA。

PWA，即Progressive Web App, 是提升 Web App 的體驗(yàn)的一種新方法，能給用戶原生應(yīng)用的體驗(yàn)。

我們需要理解的是，PWA不是某一項(xiàng)技術(shù)，或者某一個(gè)新的產(chǎn)物；而是一系列Web技術(shù)與標(biāo)準(zhǔn)的集合與應(yīng)用。通過(guò)應(yīng)用這些新的技術(shù)與標(biāo)準(zhǔn)，可以從安全、性能和體驗(yàn)三個(gè)方面，優(yōu)化我們的Web App。所以，其實(shí)PWA本質(zhì)上依然是一個(gè)Web App。

因此，學(xué)習(xí)PWA其實(shí)就是了解與掌握這些PWA背后的技術(shù)。本系列文章會(huì)針對(duì)PWA中所涉及到的技術(shù)進(jìn)行介紹，并配合代碼實(shí)例來(lái)展示各類技術(shù)的使用方式。希望通過(guò)這一系列文章，讓大家對(duì)PWA技術(shù)有一個(gè)更深入的認(rèn)識(shí)。而PWA本身漸進(jìn)式的思想也可以讓我們?cè)跇I(yè)務(wù)中“漸進(jìn)式”地使用這些技術(shù)，在成本可控的前提下，不斷優(yōu)化我們的產(chǎn)品。

PWA本身其實(shí)是一個(gè)概念集合，它不是指某一項(xiàng)技術(shù)，而是通過(guò)一系列的Web技術(shù)與Web標(biāo)準(zhǔn)來(lái)優(yōu)化Web App的安全、性能和體驗(yàn)。其中涉及到的一些技術(shù)概念包括了：

Web App Manifest

Service Worker

Cache API 緩存

Push&Notification 推送與通知

Background Sync 后臺(tái)同步

響應(yīng)式設(shè)計(jì)

……

這些技術(shù)都是你在學(xué)習(xí)PWA中不可或缺的。而隨著apple在iOS Safari中也開(kāi)始支持PWA（其中的某些技術(shù)），PWA的舞臺(tái)更大了。

為了配合PWA中相關(guān)知識(shí)的學(xué)習(xí)，我專門創(chuàng)建了一個(gè)demo Web App——

一個(gè)根據(jù)關(guān)鍵字查詢圖書(shū)信息的demo（https://github.com/alienzhou/...）。

這個(gè)Web App最開(kāi)始是不具備任何PWA的能力。我會(huì)在這一系列文章中以這個(gè)demo為例，闡述各項(xiàng)技術(shù)的同時(shí)，將其應(yīng)用在demo上。也就是說(shuō)，在這一系列的文章中，我會(huì)和大家一起將一個(gè)普通的網(wǎng)頁(yè)應(yīng)用逐步升級(jí)為一個(gè)簡(jiǎn)單的PWA，通過(guò)這種方式一起學(xué)習(xí)。

首先簡(jiǎn)單介紹一下這個(gè)demo。這是一個(gè)根據(jù)關(guān)鍵詞搜索圖書(shū)信息的應(yīng)用，用戶在前端輸入關(guān)鍵詞，點(diǎn)擊搜索，會(huì)請(qǐng)求我們自己的服務(wù)器，而服務(wù)器使用豆瓣圖書(shū)API V2來(lái)獲取數(shù)據(jù)。

項(xiàng)目使用Koa來(lái)搭建node服務(wù)器，所以需要node版本>7.6.0，可以使用nvm來(lái)切換到適合的node版本。

要運(yùn)行該項(xiàng)目，首先

git clone git@github.com:alienzhou/learning-pwa.git
# 切換到基礎(chǔ)項(xiàng)目分支
git checkout basic

注意，需要切換到basic分支，master分支是上經(jīng)過(guò)PWA升級(jí)后最新的demo代碼。只有在basic分支才能看到原始的Web App。接下來(lái)，安裝依賴：

npm install

最后，運(yùn)行項(xiàng)目：

npm run start

然后就可以在127.0.0.1:8085上訪問(wèn)到該項(xiàng)目。

基礎(chǔ)demo的代碼比較簡(jiǎn)單，這里就不去贅述demo中的代碼細(xì)節(jié)了。簡(jiǎn)單了解一下項(xiàng)目結(jié)構(gòu)，前端代碼都存放于public目錄中，具體結(jié)構(gòu)如下：

|---public---|---index.html // 前端頁(yè)面
|            |---index.js // browser的JavaScript腳本
|            |---style.css // 樣式文件
|            |---img // 圖片文件夾
|---app.js // node服務(wù)啟動(dòng)入口
|---util.js // node服務(wù)工具庫(kù)

值得一提的是，后續(xù)文章內(nèi)的代碼會(huì)以分支的形式存在，每篇文章的最終代碼會(huì)存放于一個(gè)對(duì)應(yīng)的分支中。你可以通過(guò)方便得切換分支，來(lái)查看每篇文章對(duì)應(yīng)的示例代碼。

basic分支：基礎(chǔ)項(xiàng)目demo，一個(gè)普通的圖書(shū)搜索應(yīng)用（網(wǎng)站）；

manifest分支：基于basic分支，添加manifest等功能；

sw-cache分支：基于manifest分支，添加緩存與離線功能；

master分支：應(yīng)用的最新代碼。

……

作為本系列的第一篇文章，本文簡(jiǎn)單介紹了PWA與其相關(guān)的技術(shù)概念。通過(guò)學(xué)習(xí)PWA，我們可以很快將其中的優(yōu)秀技術(shù)應(yīng)用到我們的工作里。在下一篇文章中，我就會(huì)介紹如何使用manifest來(lái)讓你的Web App“更Native”，擁有一個(gè)App Shell。想了解PWA更多的后續(xù)知識(shí)，關(guān)注專欄《精益前端》。

話不多說(shuō)，下面就讓我們來(lái)具體地學(xué)習(xí)PWA相關(guān)技術(shù)吧！