大綱
前言
1庵楷、什么是PWA
2踪央、PWA 應(yīng)該具備的特點
3百姓、PWA基礎(chǔ)
4渊额、構(gòu)建 PWA 的業(yè)務(wù)場景
5、PWA的核心技術(shù)
6垒拢、應(yīng)用外殼架構(gòu)
前言
接下去幾篇博客是我對PWA的的認(rèn)識和理解旬迹，目前PWA的流行程度還不是很高，所以能找到的資源也是有限子库，我對PWA的了解主要是通過這本書《PWA-Book-CN》以及一些大牛的博客舱权。我的文章比較適合一些對這些還不是很清楚的讀者做個初步介紹用的，如果要精深還是需要去自己研讀這本書并且自身投入實踐當(dāng)中才是仑嗅。
1、什么是PWA
PWA全稱漸進式網(wǎng)絡(luò)應(yīng)用 ( Progressive Web Apps )
漸進式網(wǎng)絡(luò)應(yīng)用程序(Progressive Web Application - PWA)张症，是一種可以提供類似于原生應(yīng)用程序(native app)體驗的網(wǎng)絡(luò)應(yīng)用程序(web app)仓技。PWA 可以用來做很多事。其中最重要的是俗他，在離線(offline)時應(yīng)用程序能夠繼續(xù)運行功能脖捻。這是通過使用名為 Service Workers 的網(wǎng)絡(luò)技術(shù)來實現(xiàn)的。
作為Web開發(fā)者兆衅，這是我們傳統(tǒng)構(gòu)建網(wǎng)站方式的一種轉(zhuǎn)變地沮。這意味著我們可以開始構(gòu)建可以應(yīng)對不斷變化的網(wǎng)絡(luò)條件或無網(wǎng)絡(luò)連接的網(wǎng)站嗜浮。這還意味著我們可以建立更吸引人的網(wǎng)站來為我們的用戶提供一流的瀏覽體驗。
2摩疑、PWA 應(yīng)該具備的特點
響應(yīng)式
獨立于網(wǎng)絡(luò)連接
類似原生應(yīng)用的交互體驗
始終保持更新
安全
可發(fā)現(xiàn)
可重連
可安裝
可鏈接
3危融、PWA基礎(chǔ)
那么 PWA 到底是由什么組成的呢？我們一直將它們作為一組功能和原理來討論雷袋，但真正使某個網(wǎng)站成為 “PWA” 的到底是什么呢吉殃？最最簡單的 PWA 其實只是普通的網(wǎng)站。它們是由我們這些 Web 開發(fā)者所熟悉和喜歡的技術(shù)所創(chuàng)建的楷怒，即 HTML蛋勺、CSS 和 JavaScript 。然而鸠删， PWA 卻更進一步抱完，它為用戶提供了增強的體驗。我非常喜歡 Google Chrome 團隊的開發(fā)人員 Alex Russell 的描述方式：“這些應(yīng)用沒有通過應(yīng)用商店進行打包和部署刃泡，它們只是汲取了所需要的原生功能的網(wǎng)站而已巧娱。”
PWA 會指向一個清單 (manifest) 文件捅僵，其中包含網(wǎng)站相關(guān)的信息家卖，包括圖標(biāo)，背景屏幕庙楚，顏色和默認(rèn)方向上荡。
PWA 使用了叫做 Service Workers 的重要新功能，它可以令你深入網(wǎng)絡(luò)請求并構(gòu)建更好的 Web 體驗馒闷。
PWA 還允許你將其“添加”到設(shè)備的主屏幕上酪捡。它會像原生應(yīng)用那樣，通過點擊圖標(biāo)便可讓你輕松訪問一個 Web 應(yīng)用纳账。
PWA 還可以離線工作逛薇。使用 Service Workers，你可以選擇性地緩存部分網(wǎng)站以提供離線體驗疏虫。
有了 Service Workers永罚，我們的用戶無需再面對恐怖的“無網(wǎng)絡(luò)連接”屏幕了。使用 Service Workers卧秘，你可以攔截并緩存任何來自你網(wǎng)站的網(wǎng)絡(luò)請求呢袱。無論你是為移動設(shè)備，桌面設(shè)備還是平板設(shè)備構(gòu)建網(wǎng)站翅敌， 都可以在有網(wǎng)絡(luò)連接或沒有網(wǎng)絡(luò)連接的情況下控制如何響應(yīng)請求羞福。
簡而言之，PWA 不僅僅是一組非常棒的新功能蚯涮，它們實際上是我們構(gòu)建更好的網(wǎng)站的一種方式治专。PWA 正在迅速成為一套最佳實踐卖陵。構(gòu)建 PWA 所采取的步驟將有利于訪問你網(wǎng)站的任何人，無論他們選擇使用何種設(shè)備张峰。
4泪蔫、構(gòu)建 PWA 的業(yè)務(wù)場景
現(xiàn)在你對 PWA 已經(jīng)有了基本的了解，讓我們先暫時停下腳步挟炬，想象一下用 PWA 來構(gòu)建的各種可能性鸥滨。假設(shè)你的在線業(yè)務(wù)是報紙，人們通過它來了解更多關(guān)于當(dāng)?shù)氐男侣劙妗Ｈ绻阒烙腥私?jīng)常訪問你的網(wǎng)站并瀏覽多個頁面婿滓，為什么不提前緩存這些頁面，這樣他們就可以完全離線地瀏覽新聞粥喜？或者想象下凸主，你的 Web 應(yīng)用服務(wù)于一個慈善機構(gòu)，志愿者們在這個網(wǎng)絡(luò)連接不穩(wěn)定或壓根無網(wǎng)絡(luò)連接的區(qū)域進行工作额湘。PWA 的功能將允許你構(gòu)建一個離線應(yīng)用卿吐，使他們在沒有網(wǎng)絡(luò)連接的現(xiàn)場也能收集信息。一旦他們回到辦公室或有網(wǎng)絡(luò)連接的區(qū)域锋华，數(shù)據(jù)就可以同步到服務(wù)器嗡官。對于 Web 開發(fā)者來說，PWA 是個徹底的顛覆者毯焕，并且我個人對它們將帶給 Web 的功能感到興奮不已衍腥。
5、PWA的核心技術(shù)
Web App Manifest – 在主屏幕添加app圖標(biāo)纳猫，定義手機標(biāo)題欄顏色之類
Service Worker – 緩存婆咸，離線開發(fā)，以及地理位置信息處理等
App Shell – 先顯示APP的主結(jié)構(gòu)芜辕，再填充主數(shù)據(jù)尚骄，更快顯示更好體驗
Push Notification – 消息推送
6、應(yīng)用外殼架構(gòu)
當(dāng)今有很多非常棒的原生應(yīng)用侵续。就個人而言倔丈，我覺得 Facebook 的原生應(yīng)用為用戶提供了非常棒的體驗。當(dāng)你離線時它會給你提示状蜗，它會緩存你的時間軸乃沙，以便你能更快地訪問，它還能做到瞬間加載诗舰。如果你有一段時間沒有訪問 Facebook 的原生應(yīng)用，你仍會在任何動態(tài)內(nèi)容加載之前训裆，立即看到一個空的“UI 外殼”眶根，包括頭部和導(dǎo)航條蜀铲。
借助 Service Workers 的力量，我們沒有任何理由不為 Web 上的用戶提供同樣的體驗属百。使用智能的 Service Worker 緩存记劝，你實際上可以緩存你網(wǎng)站的 UI 外殼，以便用戶重復(fù)訪問族扰。這些新功能使我們能夠以不同的方式來思考和構(gòu)建網(wǎng)站厌丑。
