原文
簡書原文：https://www.jianshu.com/p/f38f21ed45dc
大綱
前言
1、什么是PWA
2、PWA 應該具備的特點
3、PWA基礎
4、構建 PWA 的業務場景
5、PWA的核心技術
6、應用外殼架構
前言
接下去幾篇博客是我對PWA的的認識和理解，目前PWA的流行程度還不是很高，所以能找到的資源也是有限，我對PWA的了解主要是通過這本書《PWA-Book-CN》以及一些大牛的博客。我的文章比較適合一些對這些還不是很清楚的讀者做個初步介紹用的，如果要精深還是需要去自己研讀這本書並且自身投入實踐當中才是。
1、什么是PWA
PWA全稱漸進式網絡應用 ( Progressive Web Apps )
漸進式網絡應用程序(Progressive Web Application - PWA)，是一種可以提供類似於原生應用程序(native app)體驗的網絡應用程序(web app)。PWA 可以用來做很多事。其中最重要的是，在離線(offline)時應用程序能夠繼續運行功能。這是通過使用名為 Service Workers 的網絡技術來實現的。
作為Web開發者，這是我們傳統構建網站方式的一種轉變。這意味着我們可以開始構建可以應對不斷變化的網絡條件或無網絡連接的網站。這還意味着我們可以建立更吸引人的網站來為我們的用戶提供一流的瀏覽體驗。
2、PWA 應該具備的特點
響應式
獨立於網絡連接
類似原生應用的交互體驗
始終保持更新
安全
可發現
可重連
可安裝
可鏈接
3、PWA基礎
那么 PWA 到底是由什么組成的呢？我們一直將它們作為一組功能和原理來討論，但真正使某個網站成為 “PWA” 的到底是什么呢？最最簡單的 PWA 其實只是普通的網站。它們是由我們這些 Web 開發者所熟悉和喜歡的技術所創建的，即 HTML、CSS 和 JavaScript 。然而， PWA 卻更進一步，它為用戶提供了增強的體驗。我非常喜歡 Google Chrome 團隊的開發人員 Alex Russell 的描述方式：“這些應用沒有通過應用商店進行打包和部署，它們只是汲取了所需要的原生功能的網站而已。”
PWA 會指向一個清單 (manifest) 文件，其中包含網站相關的信息，包括圖標，背景屏幕，顏色和默認方向。
PWA 使用了叫做 Service Workers 的重要新功能，它可以令你深入網絡請求並構建更好的 Web 體驗。
PWA 還允許你將其“添加”到設備的主屏幕上。它會像原生應用那樣，通過點擊圖標便可讓你輕松訪問一個 Web 應用。
PWA 還可以離線工作。使用 Service Workers，你可以選擇性地緩存部分網站以提供離線體驗。
有了 Service Workers，我們的用戶無需再面對恐怖的“無網絡連接”屏幕了。使用 Service Workers，你可以攔截並緩存任何來自你網站的網絡請求。無論你是為移動設備，桌面設備還是平板設備構建網站， 都可以在有網絡連接或沒有網絡連接的情況下控制如何響應請求。
簡而言之，PWA 不僅僅是一組非常棒的新功能，它們實際上是我們構建更好的網站的一種方式。PWA 正在迅速成為一套最佳實踐。構建 PWA 所采取的步驟將有利於訪問你網站的任何人，無論他們選擇使用何種設備。
4、構建 PWA 的業務場景
現在你對 PWA 已經有了基本的了解，讓我們先暫時停下腳步，想象一下用 PWA 來構建的各種可能性。假設你的在線業務是報紙，人們通過它來了解更多關於當地的新聞。如果你知道有人經常訪問你的網站並瀏覽多個頁面，為什么不提前緩存這些頁面，這樣他們就可以完全離線地瀏覽新聞？或者想象下，你的 Web 應用服務於一個慈善機構，志願者們在這個網絡連接不穩定或壓根無網絡連接的區域進行工作。PWA 的功能將允許你構建一個離線應用，使他們在沒有網絡連接的現場也能收集信息。一旦他們回到辦公室或有網絡連接的區域，數據就可以同步到服務器。對於 Web 開發者來說，PWA 是個徹底的顛覆者，並且我個人對它們將帶給 Web 的功能感到興奮不已。
5、PWA的核心技術
Web App Manifest – 在主屏幕添加app圖標，定義手機標題欄顏色之類
Service Worker – 緩存，離線開發，以及地理位置信息處理等
App Shell – 先顯示APP的主結構，再填充主數據，更快顯示更好體驗
Push Notification – 消息推送
6、應用外殼架構
當今有很多非常棒的原生應用。就個人而言，我覺得 Facebook 的原生應用為用戶提供了非常棒的體驗。當你離線時它會給你提示，它會緩存你的時間軸，以便你能更快地訪問，它還能做到瞬間加載。如果你有一段時間沒有訪問 Facebook 的原生應用，你仍會在任何動態內容加載之前，立即看到一個空的“UI 外殼”，包括頭部和導航條。
借助 Service Workers 的力量，我們沒有任何理由不為 Web 上的用戶提供同樣的體驗。使用智能的 Service Worker 緩存，你實際上可以緩存你網站的 UI 外殼，以便用戶重復訪問。這些新功能使我們能夠以不同的方式來思考和構建網站。