PWA(Progressive Web App)入門系列：（一）PWA簡單介紹

時間 2019-11-29

標籤 pwa progressive web app 入門系列簡單介紹欄目 HTML 简体版

原文原文鏈接

前言

PWA作爲一門Google推出的WEB端的新技術，長處不言而喻。但眼下對於相關方面的知識不是很是豐富。這裏我推出一下這方面的新手教程系列。提供PWA方面學習。css

什麼是PWA

PWA全稱Progressive Web App，直譯是漸進式WEB應用，是 Google 在 2015 年提出，2016年6月才推廣的項目。是結合了一系列現代Web技術的組合。在網頁應用中實現和原生應用相近的用戶體驗。html

所謂的P（Progressive）這裏有兩層含義，一方面是漸進加強，讓WEB APP的體驗和功能可以用漸進加強的方式來更接近原生APP的體驗及功能。另外一方面是指下一代WEB技術。PWA並不是描寫敘述一個技術。而是一些技術的合集。前端

PWA特性

漸進加強 - 可以讓每一位用戶使用。無論用戶使用什麼瀏覽器，因爲它是始終以漸進加強爲原則。
響應式用戶界面 - 適應不論什麼環境：桌面電腦，智能手機，筆記本電腦，或者其餘設備。
不依賴網絡鏈接 - 經過 service workers 可以在離線或者網速極差的環境下工做。
類原生應用 - 有像原生應用般的交互和導航給用戶原生應用般的體驗，因爲它是創建在 app shell model 上的。
持續更新 - 受益於 service worker 的更新進程，應用可以始終保持更新。
安全 - 經過 HTTPS 來提供服務來防止網絡窺探。保證內容不被篡改。
可發現 - 得益於 W3C manifests 元數據和 service worker 的登記。讓搜索引擎可以找到 web 應用。
再次訪問 - 經過消息推送等特性讓用戶再次訪問變得easy。
可安裝 - 贊成用戶保留對他們實用的應用在主屏幕上，不需要經過應用商店。
可鏈接性 - 經過 URL 可以輕鬆分享應用，不用複雜的安裝就能夠執行。

PWA優、缺點

長處：

上面提到的，所有這些現代 Web 特性。
Web最重要的意義在於開放和去中心化，這纔是萬維網的初衷

缺點：

門檻不低。部署的server要求HTTPS，ServiceWorker涉及API衆多，需要單獨學習
瀏覽器支持不夠全面。蘋果Safari 短期內不會支持，5 年計劃裏可能實施
用戶體驗習慣。
網頁應用替代原生應用的方式，用戶短期內不適應web

PWA關鍵技術

Manifest（應用清單）

Web App Manifest是一個W3C規範，定義了一個基於JSON的清單，爲開發人員提供一個放置與Web應用程序關聯的元數據的集中地點。manifest 就是 PWA 概念的一環，它給你了控制你的應用怎樣出現在用戶期待出現的地方（比方用戶手機主屏幕）。這直接影響到用戶能啓動什麼。以及更重要的。用戶怎樣啓動它。shell

使用 web 應用程序清單，你的應用可以：編程

可以真實存在於用戶主屏幕上
在 Android 上可以全屏啓動，不顯示地址欄
控制屏幕方向已得到最佳效果
定義啓動畫面，爲你的站點定義主題
追蹤你的應用是從主屏幕仍是 URL 啓動的

好比：瀏覽器

{
  "lang": "en",
  "dir": "ltr",
  "name": "Donate App",
  "description": "This app helps you donate to worthy causes.",
  "short_name": "Donate",
  "icons": [{
    "src": "icon/lowres.webp",
    "sizes": "64x64",
    "type": "image/webp"
  },{
    "src": "icon/lowres.png",
    "sizes": "64x64"
  }, {
    "src": "icon/hd_hi",
    "sizes": "128x128"
  }],
  "scope": "/racer/",
  "start_url": "/racer/start.html",
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "aliceblue",
  "background_color": "red",
  "serviceworker": {
    "src": "sw.js",
    "scope": "/racer/",
    "use_cache": false
  },
  "screenshots": [{
    "src": "screenshots/in-game-1x.jpg",
    "sizes": "640x480",
    "type": "image/jpeg"
  },{
    "src": "screenshots/in-game-2x.jpg",
    "sizes": "1280x920",
    "type": "image/jpeg"
  }]
}

Service Workers

Service Worker是瀏覽器在後臺獨立於網頁執行的腳本，它打開了通向不需要網頁或用戶交互的功能的大門。緩存

這個 API 之因此使人興奮，是因爲它可以支持離線體驗，讓開發人員可以全面控制這一體驗。安全

ServiceWorker是由兩部分構成。一部分是 cache，另外一部分則是 Worker。markdown

它被設計爲一個相對底層、高度可編程、子概念衆多，也所以異常靈活且強大的 API，它就像一個位於client和網絡之間的代理。可以攔截、處理、響應流經的網絡請求，配合Cache API，你可以自由管理網絡請求文件的緩存，這使得 Service Worker 可以從緩存中向 web 應用提供資源，即便是在離線的環境下。

這樣。在離線和網速低的狀況下也能秒開。說白了，以前的Hybrid架構的出現不就是爲了這個功能麼。

以前儘管有AppCache。但它具備至關多的缺陷，這裏就不說了。

來張官網的形象圖：