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

AlienZHOU發表於2018-04-07

《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來獲取資料。

圖書搜尋demo

專案使用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技術學習與實踐》系列文章

相關文章