【PWA學習與實踐】(1) 2018，開始你的PWA學習之旅

《PWA學習與實踐》系列文章已整理至gitbook - PWA學習手冊，文字內容已同步至learning-pwa-ebook。轉載請註明作者與出處。

PWA作為今年最火熱的技術概念之一，對提升Web應用的安全、效能和體驗有著很大的意義，非常值得我們去了解與學習。

本系列文章《PWA學習與實踐》會逐步拆解PWA背後的各項技術，通過例項程式碼來講解這些技術的應用方式。也正是因為PWA中技術點眾多、知識細碎，因此我在學習過程中，進行了整理，併產出了《PWA學習與實踐》系列文章，希望能帶大家全面瞭解PWA中的各項技術。對PWA感興趣的朋友歡迎關注。

首先簡單瞭解一下PWA。

1. 什麼是PWA

PWA，即Progressive Web App, 是提升 Web App 的體驗的一種新方法，能給使用者原生應用的體驗。

我們需要理解的是，PWA不是某一項技術，或者某一個新的產物；而是一系列Web技術與標準的集合與應用。通過應用這些新的技術與標準，可以從安全、效能和體驗三個方面，優化我們的Web App。所以，其實PWA本質上依然是一個Web App。

因此，學習PWA其實就是了解與掌握這些PWA背後的技術。本系列文章會針對PWA中所涉及到的技術進行介紹，並配合程式碼例項來展示各類技術的使用方式。希望通過這一系列文章，讓大家對PWA技術有一個更深入的認識。而PWA本身漸進式的思想也可以讓我們在業務中“漸進式”地使用這些技術，在成本可控的前提下，不斷優化我們的產品。

2. PWA中的一些技術

PWA本身其實是一個概念集合，它不是指某一項技術，而是通過一系列的Web技術與Web標準來優化Web App的安全、效能和體驗。其中涉及到的一些技術概念包括了：

• Web App Manifest
• Service Worker
• Cache API 快取
• Push&Notification 推送與通知
• Background Sync 後臺同步
• 響應式設計
• ……

這些技術都是你在學習PWA中不可或缺的。而隨著apple在iOS Safari中也開始支援PWA（其中的某些技術），PWA的舞臺更大了。

3. 專案DEMO

為了配合PWA中相關知識的學習，我專門建立了一個demo Web App——

一個根據關鍵字查詢圖書資訊的demo（https://github.com/alienzhou/learning-pwa）。

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

首先簡單介紹一下這個demo。這是一個根據關鍵詞搜尋圖書資訊的應用，使用者在前端輸入關鍵詞，點選搜尋，會請求我們自己的伺服器，而伺服器使用豆瓣圖書API V2來獲取資料。

專案使用Koa來搭建node伺服器，所以需要node版本>7.6.0，可以使用nvm來切換到適合的node版本。

要執行該專案，首先

git clone git@github.com:alienzhou/learning-pwa.git
# 切換到基礎專案分支
git checkout basic
複製程式碼

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

npm install
複製程式碼

最後，執行專案：

npm run start
複製程式碼

然後就可以在127.0.0.1:8085上訪問到該專案。

基礎demo的程式碼比較簡單，這裡就不去贅述demo中的程式碼細節了。簡單瞭解一下專案結構，前端程式碼都存放於public目錄中，具體結構如下：

|---public---|---index.html // 前端頁面
|            |---index.js // browser的JavaScript指令碼
|            |---style.css // 樣式檔案
|            |---img // 圖片資料夾
|---app.js // node服務啟動入口
|---util.js // node服務工具庫
複製程式碼

值得一提的是，後續文章內的程式碼會以分支的形式存在，每篇文章的最終程式碼會存放於一個對應的分支中。你可以通過方便得切換分支，來檢視每篇文章對應的示例程式碼。

• basic分支：基礎專案demo，一個普通的圖書搜尋應用（網站）；
• manifest分支：基於basic分支，新增manifest等功能；
• sw-cache分支：基於manifest分支，新增快取與離線功能；
• master分支：應用的最新程式碼。
• ……

作為本系列的第一篇文章，本文簡單介紹了PWA與其相關的技術概念。通過學習PWA，我們可以很快將其中的優秀技術應用到我們的工作裡。在下一篇文章中，我就會介紹如何使用manifest來讓你的Web App“更Native”，擁有一個App Shell。想了解PWA更多的後續知識，關注《PWA學習與實踐》系列文章。

話不多說，下面就讓我們來具體地學習PWA相關技術吧！

《PWA技術學習與實踐》系列文章

• 第一篇：2018，開始你的PWA學習之旅（本文）
• 第二篇：10分鐘學會使用Manifest，讓你的WebApp更“Native”
• 第三篇：從今天開始，讓你的WebApp離線可用
• 第四篇：TroubleShooting: 解決FireBase login驗證失敗問題
• 第五篇：與你的使用者保持聯絡: Web Push功能
• 第六篇：How to Debug? 在chrome中除錯你的PWA
• 第七篇：增強互動：使用Notification API來進行提醒
• 第八篇：使用Service Worker進行後臺資料同步
• 第九篇：PWA實踐中的問題與解決方案
• 第十篇：Resource Hint - 提升頁面載入效能與體驗
• 第十一篇：從PWA離線工具集workbox中學習各類離線策略（寫作中…）