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

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

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

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

首先簡單了解一下PWA。

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

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

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

PWA本身其實(shí)是一個概念集合，它不是指某一項(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 后臺同步

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

……

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

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

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

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

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

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

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

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

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

npm install

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

npm run start

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

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

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

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

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

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

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

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

……

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

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