漸進式Web應用程序的深刻概述

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://www.grapecity.com.cn/blogs/wijmo-depth-overview-progressive-web-applications

若是您是Web開發人員，您可能已經瞭解漸進式Web應用程序（PWA）或已經實現了本身的應用程序。 若是您不熟悉，本文將深刻概述漸進式Web應用程序的實現原理，以及它們在現代Web開發中的重要程度。

漸進式Web應用程序自推出就被定義爲響應式、可獨立鏈接、APP般輕盈、安全、模塊化、高度自定義、免安裝、打開即用的Web體驗。這是一個冗長的描述，若是用一句話簡要的歸納：我認爲PWA只是一個具備良好用戶體驗的Web應用程序，僅此而已。

爲了更清晰地理解這個定義，讓咱們來一探其核心原則。在此以前，你可能已經熟悉了其中的一些，但我保證，你並不是所有了解。

漸進式 Web 應用的原則

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只須要三個基本要求：

1. 經過HTTPS提供Web應用程序
2. 添加應用程序清單文件
3. 使用服務器

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％的應用程序（最經常使用的應用程序）可能最有意義。用戶能夠根據須要，選擇下載和緩存其餘部分，這徹底取決於用戶與您應用程序的交互方式。

服務請求

服務請求的實現因應用程序而異，但在應用程序中開始使用它們時應該瞭解一些事項。以前，我提到服務請求在瀏覽器中的不一樣線程上運行。這意味着它具備管理生命週期的能力，就像您的應用程序同樣。

如下是主要的服務器生命週期事件：

• 註冊

當應用程序第一次加載到瀏覽器中時，將發生這一請求。 這不是真正的Service Worker事件，由於此時服務不存在於瀏覽器上下文中，但這是重要的一步。 應用程序的主JavaScript文件應檢查瀏覽器是否支持ServiceWorker API，若是是，請註冊服務請求。註冊成功後，將下載服務文件，而後開始安裝。

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./service-worker.js'); } if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./service-worker.js'); } 

此代碼在瀏覽器中註冊服務請求（若是支持）。 下一個事件將在服務工做文件中處理。

• 安裝

Install事件是服務器能夠本身處理的第一個事件。它在註冊/下載後當即啓動。 完成安裝後，最好開始緩存靜態資源，由於安裝事件只發生一次。

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); }) ); }); 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（）方法將在安裝事件完成後開始執行promise。

• 激活

activate事件表示已安裝服務器。 激活完成後，服務器將得到對主應用程序的控制權。 當服務變爲「活動」時，它還將檢查緩存的資源，並在數據過時時更新數據。 這可能須要進行額外的網絡請求以進行對比，但這應該不是問題，由於應用程序不會受到請求執行的影響。 服務器還可以在處於活動狀態時對Fetch，Push和Message等功能事件執行操做。

注意：註冊並安裝服務請求後，它將存在於瀏覽器中，直到用戶將其刪除。 當用戶關閉應用程序時，不會自動刪除該文件，瀏覽器將每24小時下載一次配置文件，以免錯誤/陳舊的代碼。

• 抓取

只要調用來自主應用程序的網絡請求，就會觸發Fetch事件。 發生這種狀況時，服務器將對該請求負責。 若是請求的信息已被緩存，則服務器能夠返回該信息並徹底繞過網絡。 或者它仍然能夠發送請求，將響應與緩存的信息進行對比，並在必要時進行更新。最後，選擇最適合用戶的策略。

Push和Message事件也是服務器在活動時偵聽的事件。 它們可用於實現推送通知和同步發送的數據。

正如您所看到的，服務器是完成大部分工做的核心，也是使Web應用程序不斷髮展的重要組成部分。 它爲您的應用程序提供網絡代理和存儲管理服務，是改善Web應用程序用戶體驗的絕佳工具。

構建漸進式Web應用程序

嘗試構建PWA。若是您已經擁有Web應用程序，那麼很容易上手。咱們目前正在撰寫一篇描述如何使用前端開發工具包WijmoJS構建PWA的文章。同時，這也是如何將現有應用程序遷移到漸進式標準的最佳示例。