Progressive Web Apps入門

PC和Mobile開發技術演進

PC方向，從用戶端到富用戶端，到現在廣泛使用的Web。

移動方向，目前主要還是原生應用和Mobile Web，PWA相關技術是未來發展方向。

PWA的概念

Progressive Web App (中文翻譯為：漸進式Web應用)帶來的體驗将網絡應用的優點與原生應用的優點相結合。使用者在浏覽器中第一次通路時就能體會到它們的好處，因為不需要進行任何安裝。在使用者随着時間的推移增進與應用的關系後，其功能會變得越來越強大。它即使在不可靠網絡上也能快速加載、能夠發送相關推送通知、具有桌面圖示，并且可采用頂層全屏體驗的方式加載。

PWA的特點

漸進式 - 适用于選用任何浏覽器的所有使用者，因為它是以漸進式增強作為核心宗旨來開發的。

自适應 - 适合任何機型：桌面裝置、移動裝置、平闆電腦或任何未來裝置。

連接配接無關性 - 能夠借助于服務工作線程在離線或低品質網絡狀況下工作。

類似應用 - 由于是在 App Shell 模型基礎上開發，是以具有應用風格的互動和導航，給使用者以應用般的熟悉感。

持續更新 - 在服務工作線程更新程序的作用下時刻保持最新狀态。

安全 - 通過 HTTPS 提供，以防止窺探和確定内容不被篡改。

可發現 - W3C 清單和服務工作線程注冊作用域能夠讓搜尋引擎找到它們，進而将其識别為“應用”。

可再互動 - 通過推送通知之類的功能簡化了再互動。

可安裝 - 使用者可免去使用應用商店的麻煩，直接将對其最有用的應用“保留”在主螢幕上。

可連結 - 可通過網址輕松分享，無需複雜的安裝。

PWA vs Native App

Native App：依賴運作的平台作業系統，比如Android或iOS，需要将應用送出到應用商店，比如Apple App Store或者Google Play Store，國内各大應用商店等。

PWA：不關系平台作業系統，運作在浏覽器中，使用标準的Web開發技術，無需送出到應用商店進行稽核，釋出即用。

PWA vs Web App

Web App:使用标準的Web技術，但是在處理離線，推送上欠缺，不能生成桌面圖示等。

PWA：使用标準的Web開發技術，可以支援離線可用，通過service worker進行更新和緩存，采用App shell模型基礎開發，界面和互動類似應用。支援推送，未來還支援操作裝置（調用攝像頭、讀取陀螺儀等）。

PWA關鍵技術

Manifest

網絡應用清單是一個 JSON 檔案，您（即開發者）可以利用它控制在使用者想要看到應用的區域（例如移動裝置主螢幕）中如何向使用者顯示網絡應用或網站，訓示使用者可以啟動哪些功能，以及定義其在啟動時的外觀。網絡應用清單提供了将網站書簽儲存到裝置主螢幕的功能。一個PWA的manifest.json示例：

<a></a>

Service Worker

Service Worker 是一段腳本，與 Web Worker 一樣，也是在背景運作。作為一個獨立的線程，運作環境與普通腳本不同，是以不能直接參與 Web 互動行為。Native App 可以做到離線使用、消息推送、背景自動更新，Service Worker 的出現是正是為了使得 Web App 也可以具有類似的能力。頁面注入service worker代碼示例：

Responsive Web Design

RWD是一種網頁設計的技術做法，該設計可使網站在不同的裝置（從桌面電腦顯示器到行動電話或其他移動産品裝置）上浏覽時對應不同分辨率皆有适合的呈現，減少使用者進行縮放、平移和滾動等操作行為。

第4-6點不在這裡展開，剛興趣的可以查找相應資料進行學習。

浏覽器對PWA的支援

越來越多的浏覽器支援PWA的技術，特别是移動浏覽器，比如Chrome，Firefox，UC移動浏覽器等。

PWA案例欣賞