轉(zhuǎn)載請注明出處：葡萄城官網(wǎng)，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù)，賦能開發(fā)者。
如果您是Web開發(fā)人員，您可能已經(jīng)了解漸進式Web應(yīng)用程序（PWA）或已經(jīng)實現(xiàn)了自己的應(yīng)用程序。 如果您不熟悉，本文將深入概述漸進式Web應(yīng)用程序的實現(xiàn)原理，以及它們在現(xiàn)代Web開發(fā)中的重要程度。
漸進式Web應(yīng)用程序自推出就被定義為響應(yīng)式、可獨立連接、APP般輕盈、安全、模塊化、高度自定義、免安裝、打開即用的Web體驗。這是一個冗長的描述，如果用一句話簡要的概括：我認為PWA只是一個具有良好用戶體驗的Web應(yīng)用程序，僅此而已。
為了更清晰地理解這個定義，讓我們來一探其核心原則。在此之前，你可能已經(jīng)熟悉了其中的一些，但我保證，你并非全部了解。
對于Web開發(fā)人員，這意味著應(yīng)用程序中顯示的元素在不同的屏幕大小上可自行縮放，以便適應(yīng)屏幕尺寸。對于設(shè)計人員，這意味著更高的性能，比如應(yīng)用程序是否快速響應(yīng)用戶交互、事件、頁面加載等。構(gòu)建高性能的應(yīng)用程序是產(chǎn)品最核心的競爭力，漸進式Web應(yīng)用程序自然也同樣遵循這一法則，尤其是針對 Web開發(fā)人員方面。響應(yīng)式 Web 應(yīng)用程序在任何設(shè)備上都具備同樣良好的適應(yīng)能力，無論屏幕是寬、窄、短，甚至是曲面，應(yīng)用程序布局都會自適應(yīng)，滿足用戶的最佳使用體驗。
由于我們討論的是Web應(yīng)用程序，因此在應(yīng)用程序生命周期的某個時刻一定需要網(wǎng)絡(luò)連接，特別是首次訪問應(yīng)用程序時。當網(wǎng)絡(luò)不可用或速度太慢時，應(yīng)用程序應(yīng)做到不影響用戶體驗，即不應(yīng)向用戶顯示空白頁面或400錯誤，這在PWA出現(xiàn)以前難以做到，但PWA利用瀏覽器的存儲機制使這成為可能。
我認為“原生app-like”是描述這一原則的最好方式，即本地化應(yīng)用程序的外觀和感覺就像是用于使用外部設(shè)備，某些應(yīng)用程序?qū)ｉT針對iOS或Android等平臺構(gòu)建，然而之前的Web應(yīng)用程序則無法提供相同的體驗，尤其是在移動設(shè)備上。 PWA則不同，漸進式Web應(yīng)用程序旨在提供所有設(shè)備類似的使用體驗，用戶可以從手機切換到筆記本電腦，在類似的UI下，輕松完成相同的任務(wù)。
我想把它稱為A.F.A.P - 應(yīng)用程序中的數(shù)據(jù)應(yīng)盡可能保持最新。如果新數(shù)據(jù)可用且與客戶端相關(guān)，則需要使用最新數(shù)據(jù)更新應(yīng)用程序。管理網(wǎng)絡(luò)請求和瀏覽器存儲對于提供出色的用戶體驗和在客戶端上保持最新內(nèi)容至關(guān)重要。
安全第一！如果應(yīng)用程序不能保證數(shù)據(jù)的安全性，應(yīng)用程序有什么用處？市場大多數(shù) Web 應(yīng)用程序中都包含了只應(yīng)為通信方所知的客戶敏感信息。因此，保護應(yīng)用程序中的隱私數(shù)據(jù)是必要的。PWA采取了簡單而有效的方式：使用HTTPS協(xié)議為網(wǎng)絡(luò)流量添加一層安全防護。
）
應(yīng)用程序應(yīng)該很容易在網(wǎng)上/應(yīng)用商店中找到，這就是應(yīng)用程序的可發(fā)現(xiàn)性。如果搜索引擎找不到應(yīng)用程序，將怎樣發(fā)掘潛在用戶？應(yīng)用程序搜索清單可以提供幫助。它在識別瀏覽器的應(yīng)用程序方面起著重要作用，包含了有關(guān)應(yīng)用程序的信息，即名稱、作者和說明。應(yīng)用程序搜索清單同樣有助于識別安裝在其設(shè)備上的PWA。
可重復(fù)使用的應(yīng)用程序可以發(fā)送推送通知來拉回用戶。目的是讓用戶知道應(yīng)用程序推出了一些他們可能感興趣的更新點。我們習慣于智能手機和原生移動應(yīng)用程序，但瀏覽器也通過Push和Notification API支持這一特點。
漸進式Web應(yīng)用程序可以直接安裝到移動設(shè)備的主屏幕上。這主要是移動瀏覽器功能，使用Chrome，您也可以在桌面上執(zhí)行此操作。 iOS Safari也支持此功能，因此如果你有iPhone，你可以加入PWA陣營。 安裝Web應(yīng)用程序真的很酷，您無需通過App Store或Google Play Store等市場下載應(yīng)用程序。只需訪問該網(wǎng)站，點擊“添加到主屏幕”選項，該應(yīng)用程序?qū)⒘⒓达@示在您的主屏幕上。
可鏈接的Web應(yīng)用程序是可共享的，因此托管在專用域上的應(yīng)用程序不適用。 您只需要一個URL即可。
上述原則在實踐中如何實現(xiàn)？與標準Web應(yīng)用程序相比，創(chuàng)建PWA只需要三個基本要求：
HTTPS是現(xiàn)代Web應(yīng)用程序的基本協(xié)議，漸進式Web應(yīng)用程序也不例外。
應(yīng)用程序清單是一個JSON文件，其中包含有關(guān)應(yīng)用程序的元數(shù)據(jù)。它只提供基本信息。在Android應(yīng)用程序中，清單文件要復(fù)雜得多，可能需要在整個應(yīng)用程序開發(fā)過程中進行更改。 Web應(yīng)用程序清單涉及較少，并且在創(chuàng)建后不需要經(jīng)常更新，因為它們不包含配置參數(shù)或依賴項。
創(chuàng)建漸進式Web應(yīng)用程序的最后一步是添加服務(wù)器。奇跡發(fā)生的地方是它啟用了離線功能。對于PWA來說，服務(wù)器只是另一個JavaScript文件 - 一個非常強大的JavaScript文件。它實際上在瀏覽器中的一個單獨的線程上運行，因此服務(wù)工作線程上的執(zhí)行不會中斷主應(yīng)用程序線程。這使開發(fā)人員可以靈活地通過并發(fā)性創(chuàng)建更好的用戶體驗。服務(wù)器可以處理網(wǎng)絡(luò)請求/響應(yīng)和緩存。從主線程中刪除此工作將應(yīng)用程序邏輯與數(shù)據(jù)管理和網(wǎng)絡(luò)相關(guān)的操作分開。
如您所見，這里的大多數(shù)漸進式應(yīng)用都涉及服務(wù)器實現(xiàn)。但在實現(xiàn)之前，必須考慮應(yīng)用程序的體系結(jié)構(gòu)。
應(yīng)用程序shell是描述應(yīng)用程序基礎(chǔ)結(jié)構(gòu)的概念。它包含您的應(yīng)用程序需要運行的所有靜態(tài)文件。在Web開發(fā)的上下文中，這將包括HTML，CSS，JavaScript和圖像文件。
內(nèi)容是可以在應(yīng)用程序的整個生命周期中更改的數(shù)據(jù)。它被排除在應(yīng)用程序shell之外，因為它是動態(tài)的，并且在加載應(yīng)用程序時可能會過時。它通常通過API服務(wù)公開，易于查詢。需要在應(yīng)用程序中管理此內(nèi)容，以確保根據(jù)請求提供最新鮮的內(nèi)容。 服務(wù)器承擔此責任。
在首次加載應(yīng)用程序時，應(yīng)緩存應(yīng)用程序shell文件，以便應(yīng)用程序可以在沒有網(wǎng)絡(luò)連接的情況下工作。
一個好的PWA將避免顯示此屏幕出現(xiàn)：
當頁面未加載時，用戶將完全脫離應(yīng)用程序。顯然，與網(wǎng)絡(luò)相關(guān)的問題會影響用戶體驗，但不應(yīng)該讓用戶遠離應(yīng)用程序。這個想法類似于原生體驗，即使應(yīng)用程序中顯示空白屏幕，PWA也可以讓用戶參與應(yīng)用程序。為了在網(wǎng)絡(luò)較慢時讓用戶保持參與，您可以使用動畫或提供具備視覺反饋的客戶端交互，就像帶有小拼圖或3D交互模型的刷新按鈕一樣簡單。要有創(chuàng)意！
使用應(yīng)用程序shell模型的一個缺點是其性能。它確實減慢了初始加載時間;但是，這可以改善。要減少加載應(yīng)用程序shell文件所需的時間，您可以嘗試縮小代碼（以減小文件大小）、捆綁文件（以最小化網(wǎng)絡(luò)請求的數(shù)量）、刪除未使用的代碼。您可以在需要時將此刪除的代碼發(fā)送給客戶端。這將根據(jù)要求而有所不同。
這里描述的架構(gòu)非常常見。如果您已經(jīng)開發(fā)了其他平臺的應(yīng)用程序，您可能會認識到類似的設(shè)計結(jié)構(gòu)。例如，需要訪問網(wǎng)絡(luò)的移動應(yīng)用程序遵循類似的方法與服務(wù)器進行通信。通常有一些Factory類處理網(wǎng)絡(luò)請求和響應(yīng)。 Factory類提供了一個抽象層，如果異步生成，則效果最佳。應(yīng)用程序邏輯不必等待請求。它可以允許用戶繼續(xù)并在請求完成時通知他們，可以通過分離數(shù)據(jù)訪問實用程序和UI邏輯來簡化測試。
使用App Shell模型是一個很好的起點，但它不是漸進式Web應(yīng)用程序的要求。如果您有現(xiàn)有的應(yīng)用程序，則可以評估應(yīng)用程序的哪些部分使用最多，并優(yōu)化初始加載。如果95％的用戶群僅使用25％的應(yīng)用程序，那么僅下載和緩存25％的應(yīng)用程序（最常用的應(yīng)用程序）可能最有意義。用戶可以根據(jù)需要，選擇下載和緩存其他部分，這完全取決于用戶與您應(yīng)用程序的交互方式。
服務(wù)請求的實現(xiàn)因應(yīng)用程序而異，但在應(yīng)用程序中開始使用它們時應(yīng)該了解一些事項。之前，我提到服務(wù)請求在瀏覽器中的不同線程上運行。這意味著它具有管理生命周期的能力，就像您的應(yīng)用程序一樣。
以下是主要的服務(wù)器生命周期事件：
1. 注冊
當應(yīng)用程序第一次加載到瀏覽器中時，將發(fā)生這一請求。 這不是真正的Service Worker事件，因為此時服務(wù)不存在于瀏覽器上下文中，但這是重要的一步。 應(yīng)用程序的主JavaScript文件應(yīng)檢查瀏覽器是否支持ServiceWorker API，如果是，請注冊服務(wù)請求。注冊成功后，將下載服務(wù)文件，然后開始安裝。
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./service-worker.js'); }此代碼在瀏覽器中注冊服務(wù)請求（如果支持）。 下一個事件將在服務(wù)工作文件中處理。
2. 安裝
Install事件是服務(wù)器可以自己處理的第一個事件。它在注冊/下載后立即啟動。 完成安裝后，最好開始緩存靜態(tài)資源，因為安裝事件只發(fā)生一次。
self.addEventListener('install', function(e) { e.waitUntil( // waitUntil() from ExtendableEvent caches.open(cacheName).then(function(cache) { console.log('[ServiceWorker] Caching app shell'); return cache.addAll(filesToCache); }) ); });waitUntil（）方法將在安裝事件完成后開始執(zhí)行promise。
3. 激活
activate事件表示已安裝服務(wù)器。 激活完成后，服務(wù)器將獲得對主應(yīng)用程序的控制權(quán)。 當服務(wù)變?yōu)椤盎顒印睍r，它還將檢查緩存的資源，并在數(shù)據(jù)過期時更新數(shù)據(jù)。 這可能需要進行額外的網(wǎng)絡(luò)請求以進行對比，但這應(yīng)該不是問題，因為應(yīng)用程序不會受到請求執(zhí)行的影響。 服務(wù)器還能夠在處于活動狀態(tài)時對Fetch，Push和Message等功能事件執(zhí)行操作。
注意：注冊并安裝服務(wù)請求后，它將存在于瀏覽器中，直到用戶將其刪除。 當用戶關(guān)閉應(yīng)用程序時，不會自動刪除該文件，瀏覽器將每24小時下載一次配置文件，以避免錯誤/陳舊的代碼。
4. 抓取
只要調(diào)用來自主應(yīng)用程序的網(wǎng)絡(luò)請求，就會觸發(fā)Fetch事件。 發(fā)生這種情況時，服務(wù)器將對該請求負責。 如果請求的信息已被緩存，則服務(wù)器可以返回該信息并完全繞過網(wǎng)絡(luò)。 或者它仍然可以發(fā)送請求，將響應(yīng)與緩存的信息進行對比，并在必要時進行更新。最后，選擇最適合用戶的策略。
Push和Message事件也是服務(wù)器在活動時偵聽的事件。 它們可用于實現(xiàn)推送通知和同步發(fā)送的數(shù)據(jù)。
正如您所看到的，服務(wù)器是完成大部分工作的核心，也是使Web應(yīng)用程序不斷發(fā)展的重要組成部分。 它為您的應(yīng)用程序提供網(wǎng)絡(luò)代理和存儲管理服務(wù)，是改善Web應(yīng)用程序用戶體驗的絕佳工具。
嘗試構(gòu)建PWA。如果您已經(jīng)擁有Web應(yīng)用程序，那么很容易上手。我們目前正在撰寫一篇描述如何使用前端開發(fā)工具包WijmoJS構(gòu)建PWA的文章。同時，這也是如何將現(xiàn)有應(yīng)用程序遷移到漸進式標準的最佳示例。
WijmoJS | 下載試用
快如閃電，觸控優(yōu)先。純前端控件集 WijmoJS，為您的企業(yè)應(yīng)用提供更加靈活的操作體驗，在全球率先支持 AngularJS，并提供性能卓越、零依賴的 FlexGrid 和金融圖表等多個控件，為您提供易用、輕松的操作體驗，全面滿足開發(fā)所需。
