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

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

PWA做爲今年最火熱的技術概念之一，對提高Web應用的安全、性能和體驗有着很大的意義，很是值得咱們去了解與學習。html

本系列文章《PWA學習與實踐》會逐步拆解PWA背後的各項技術，經過實例代碼來說解這些技術的應用方式。也正是由於PWA中技術點衆多、知識細碎，所以我在學習過程當中，進行了整理，併產出了《PWA學習與實踐》系列文章，但願能帶你們全面瞭解PWA中的各項技術。對PWA感興趣的朋友歡迎關注。前端

首先簡單瞭解一下PWA。node

1. 什麼是PWA

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

咱們須要理解的是，PWA不是某一項技術，或者某一個新的產物；而是一系列Web技術與標準的集合與應用。經過應用這些新的技術與標準，能夠從安全、性能和體驗三個方面，優化咱們的Web App。因此，其實PWA本質上依然是一個Web App。github

所以，學習PWA其實就是了解與掌握這些PWA背後的技術。本系列文章會針對PWA中所涉及到的技術進行介紹，並配合代碼實例來展現各種技術的使用方式。但願經過這一系列文章，讓你們對PWA技術有一個更深刻的認識。而PWA自己漸進式的思想也可讓咱們在業務中「漸進式」地使用這些技術，在成本可控的前提下，不斷優化咱們的產品。chrome

2. PWA中的一些技術

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

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

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

3. 項目DEMO

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

一個根據關鍵字查詢圖書信息的demo（github.com/alienzhou/l…

這個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中學習各種離線策略（寫做中…）