《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(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中學習各類離線策略(寫作中…)