漸進式Web應用程式（PWA）的深入概述
如果您是Web開發人員，您可能已經瞭解漸進式Web應用程式（PWA）或已經實現了自己的應用程式。 如果您不熟悉，本文將深入概述漸進式Web應用程式的實現原理，以及它們在現代Web開發中的重要程度。 漸進式Web應用程式自推出就被定義為響應式、可獨立連線、APP般輕盈、安全、模組化、高度自定義、免安裝、開啟即用的Web體驗。這是一個冗長的描述，如果用一句話簡要的概括：我認為PWA只是一個具有良好使用者體驗的Web應用程式，僅此而已。 為了更清晰地理解這個定義，讓我們來一探其核心原則。在此之前，你可能已經熟悉了其中的一些，但我保證，你並非全部瞭解。
漸進式 Web 應用的原則
- Responsive（響應式）
- Connectivity-independent （獨立連線）
- App-like（app的樣式）
- Fresh （不斷更新）
- Safe （安全）
- Discoverable （可發現）
- Re-engageable （可重用）
- Installable （可安裝）
- Linkable （可連結）
Responsive（響應式）
對於Web開發人員，這意味著應用程式中顯示的元素在不同的螢幕大小上可自行縮放，以便適應螢幕尺寸。對於設計人員，這意味著更高的效能，比如應用程式是否快速響應使用者互動、事件、頁面載入等。構建高效能的應用程式是產品最核心的競爭力，漸進式Web應用程式自然也同樣遵循這一法則，尤其是針對 Web開發人員方面。響應式 Web 應用程式在任何裝置上都具備同樣良好的適應能力，無論螢幕是寬、窄、短，甚至是曲面，應用程式佈局都會自適應，滿足使用者的最佳使用體驗。
Connectivity-independent （獨立連線）
由於我們討論的是Web應用程式，因此在應用程式生命週期的某個時刻一定需要網路連線，特別是首次訪問應用程式時。當網路不可用或速度太慢時，應用程式應做到不影響使用者體驗，即不應向用戶顯示空白頁面或400錯誤，這在PWA出現以前難以做到，但PWA利用瀏覽器的儲存機制使這成為可能。
App-like（app的樣式）
我認為“原生app-like”是描述這一原則的最好方式，即本地化應用程式的外觀和感覺就像是用於使用外部裝置，某些應用程式專門針對iOS或Android等平臺構建，然而之前的Web應用程式則無法提供相同的體驗，尤其是在移動裝置上。 PWA則不同，漸進式Web應用程式旨在提供所有裝置類似的使用體驗，使用者可以從手機切換到膝上型電腦，在類似的UI下，輕鬆完成相同的任務。
Fresh （不斷更新）
我想把它稱為A.F.A.P – 應用程式中的資料應儘可能保持最新。如果新資料可用且與客戶端相關，則需要使用最新資料更新應用程式。管理網路請求和瀏覽器儲存對於提供出色的使用者體驗和在客戶端上保持最新內容至關重要。
Safe （安全第一）
安全第一！如果應用程式不能保證資料的安全性，應用程式有什麼用處？市場大多數 Web 應用程式中都包含了只應為通訊方所知的客戶敏感資訊。因此，保護應用程式中的隱私資料是必要的。PWA採取了簡單而有效的方式：使用HTTPS協議為網路流量新增一層安全防護。
Discoverable （可發現
） 應用程式應該很容易在網上/應用商店中找到，這就是應用程式的可發現性。如果搜尋引擎找不到應用程式，將怎樣發掘潛在使用者？應用程式搜尋清單可以提供幫助。它在識別瀏覽器的應用程式方面起著重要作用，包含了有關應用程式的資訊，即名稱、作者和說明。應用程式搜尋清單同樣有助於識別安裝在其裝置上的PWA。
Re-engageable （可重用）
可重複使用的應用程式可以傳送推送通知來拉回使用者。目的是讓使用者知道應用程式推出了一些他們可能感興趣的更新點。我們習慣於智慧手機和原生移動應用程式，但瀏覽器也通過Push和Notification API支援這一特點。
Installable （可安裝）
漸進式Web應用程式可以直接安裝到移動裝置的主螢幕上。這主要是移動瀏覽器功能，使用Chrome，您也可以在桌面上執行此操作。 iOS Safari也支援此功能，因此如果你有iPhone，你可以加入PWA陣營。 安裝Web應用程式真的很酷，您無需通過App Store或Google Play Store等市場下載應用程式。只需訪問該網站，點選“新增到主螢幕”選項，該應用程式將立即顯示在您的主螢幕上。
Linkable （可連結）
可連結的Web應用程式是可共享的，因此託管在專用域上的應用程式不適用。 您只需要一個URL即可。
建立漸進式Web應用程式
上述原則在實踐中如何實現？與標準Web應用程式相比，建立PWA只需要三個基本要求：
- 通過HTTPS提供Web應用程式
- 新增應用程式清單檔案
- 使用伺服器
HTTPS是現代Web應用程式的基本協議，漸進式Web應用程式也不例外。
應用程式清單是一個JSON檔案，其中包含有關應用程式的元資料。它只提供基本資訊。在Android應用程式中，清單檔案要複雜得多，可能需要在整個應用程式開發過程中進行更改。 Web應用程式清單涉及較少，並且在建立後不需要經常更新，因為它們不包含配置引數或依賴項。
建立漸進式Web應用程式的最後一步是新增伺服器。奇蹟發生的地方是它啟用了離線功能。對於PWA來說，伺服器只是另一個JavaScript檔案 – 一個非常強大的JavaScript檔案。它實際上在瀏覽器中的一個單獨的執行緒上執行，因此服務工作執行緒上的執行不會中斷主應用程式執行緒。這使開發人員可以靈活地通過併發性建立更好的使用者體驗。伺服器可以處理網路請求/響應和快取。從主執行緒中刪除此工作將應用程式邏輯與資料管理和網路相關的操作分開。
如您所見，這裡的大多數漸進式應用都涉及伺服器實現。但在實現之前，必須考慮應用程式的體系結構。
PWA應用程式結構
應用程式shell是描述應用程式基礎結構的概念。它包含您的應用程式需要執行的所有靜態檔案。在Web開發的上下文中，這將包括HTML，CSS，JavaScript和影象檔案。
內容是可以在應用程式的整個生命週期中更改的資料。它被排除在應用程式shell之外，因為它是動態的，並且在載入應用程式時可能會過時。它通常通過API服務公開，易於查詢。需要在應用程式中管理此內容，以確保根據請求提供最新鮮的內容。 伺服器承擔此責任。
在首次載入應用程式時，應快取應用程式shell檔案，以便應用程式可以在沒有網路連線的情況下工作。
一個好的PWA將避免顯示此螢幕出現：
當頁面未載入時，使用者將完全脫離應用程式。顯然，與網路相關的問題會影響使用者體驗，但不應該讓使用者遠離應用程式。這個想法類似於原生體驗，即使應用程式中顯示空白螢幕，PWA也可以讓使用者參與應用程式。為了在網路較慢時讓使用者保持參與，您可以使用動畫或提供具備視覺反饋的客戶端互動，就像帶有小拼圖或3D互動模型的重新整理按鈕一樣簡單。要有創意！
使用應用程式shell模型的一個缺點是其效能。它確實減慢了初始載入時間;但是，這可以改善。要減少載入應用程式shell檔案所需的時間，您可以嘗試縮小程式碼（以減小檔案大小）、捆綁檔案（以最小化網路請求的數量）、刪除未使用的程式碼。您可以在需要時將此刪除的程式碼傳送給客戶端。這將根據要求而有所不同。
這裡描述的架構非常常見。如果您已經開發了其他平臺的應用程式，您可能會認識到類似的設計結構。例如，需要訪問網路的移動應用程式遵循類似的方法與伺服器進行通訊。通常有一些Factory類處理網路請求和響應。 Factory類提供了一個抽象層，如果非同步生成，則效果最佳。應用程式邏輯不必等待請求。它可以允許使用者繼續並在請求完成時通知他們，可以通過分離資料訪問實用程式和UI邏輯來簡化測試。
使用App Shell模型是一個很好的起點，但它不是漸進式Web應用程式的要求。如果您有現有的應用程式，則可以評估應用程式的哪些部分使用最多，並優化初始載入。如果95％的使用者群僅使用25％的應用程式，那麼僅下載和快取25％的應用程式（最常用的應用程式）可能最有意義。使用者可以根據需要，選擇下載和快取其他部分，這完全取決於使用者與您應用程式的互動方式。
服務請求
服務請求的實現因應用程式而異，但在應用程式中開始使用它們時應該瞭解一些事項。之前，我提到服務請求在瀏覽器中的不同執行緒上執行。這意味著它具有管理生命週期的能力，就像您的應用程式一樣。
以下是主要的伺服器生命週期事件：
1. 註冊
當應用程式第一次載入到瀏覽器中時，將發生這一請求。 這不是真正的Service Worker事件，因為此時服務不存在於瀏覽器上下文中，但這是重要的一步。 應用程式的主JavaScript檔案應檢查瀏覽器是否支援ServiceWorker API，如果是，請註冊服務請求。註冊成功後，將下載服務檔案，然後開始安裝。
| 12345 | if('serviceWorker'innavigator){navigator.serviceWorker.register('./service-worker.js');} |
此程式碼在瀏覽器中註冊服務請求（如果支援）。 下一個事件將在服務工作檔案中處理。
2. 安裝
Install事件是伺服器可以自己處理的第一個事件。它在註冊/下載後立即啟動。 完成安裝後，最好開始快取靜態資源，因為安裝事件只發生一次。
| 12345678 | self.addEventListener('install',function(e){e.waitUntil(// waitUntil() from ExtendableEventcaches.open(cacheName).then(function(cache){console.log('[ServiceWorker] Caching app shell');returncache.addAll(filesToCache);}));}); |
waitUntil（）方法將在安裝事件完成後開始執行promise。
3. 啟用
activate事件表示已安裝伺服器。 啟用完成後，伺服器將獲得對主應用程式的控制權。 當服務變為“活動”時，它還將檢查快取的資源，並在資料過期時更新資料。 這可能需要進行額外的網路請求以進行對比，但這應該不是問題，因為應用程式不會受到請求執行的影響。 伺服器還能夠在處於活動狀態時對Fetch，Push和Message等功能事件執行操作。
注意：註冊並安裝服務請求後，它將存在於瀏覽器中，直到使用者將其刪除。 當用戶關閉應用程式時，不會自動刪除該檔案，瀏覽器將每24小時下載一次配置檔案，以避免錯誤/陳舊的程式碼。
4. 抓取
只要呼叫來自主應用程式的網路請求，就會觸發Fetch事件。 發生這種情況時，伺服器將對該請求負責。 如果請求的資訊已被快取，則伺服器可以返回該資訊並完全繞過網路。 或者它仍然可以傳送請求，將響應與快取的資訊進行對比，並在必要時進行更新。最後，選擇最適合使用者的策略。
Push和Message事件也是伺服器在活動時偵聽的事件。 它們可用於實現推送通知和同步傳送的資料。
正如您所看到的，伺服器是完成大部分工作的核心，也是使Web應用程式不斷髮展的重要組成部分。 它為您的應用程式提供網路代理和儲存管理服務，是改善Web應用程式使用者體驗的絕佳工具。
構建漸進式Web應用程式
嘗試構建PWA。如果您已經擁有Web應用程式，那麼很容易上手。我們目前正在撰寫一篇描述如何使用前端開發工具包WijmoJS構建PWA的文章。同時，這也是如何將現有應用程式遷移到漸進式標準的最佳示例。