漸進式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'); 
}

此代碼在瀏覽器中注冊服務請求（如果支持）。 下一個事件將在服務工作文件中處理。

• 安裝

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);
        })
    );
});

waitUntil（）方法將在安裝事件完成后開始執行promise。

• 激活

activate事件表示已安裝服務器。 激活完成后，服務器將獲得對主應用程序的控制權。 當服務變為“活動”時，它還將檢查緩存的資源，并在數據過期時更新數據。 這可能需要進行額外的網絡請求以進行對比，但這應該不是問題，因為應用程序不會受到請求執行的影響。 服務器還能夠在處于活動狀態時對Fetch，Push和Message等功能事件執行操作。

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

• 抓取

只要調用來自主應用程序的網絡請求，就會觸發Fetch事件。 發生這種情況時，服務器將對該請求負責。 如果請求的信息已被緩存，則服務器可以返回該信息并完全繞過網絡。 或者它仍然可以發送請求，將響應與緩存的信息進行對比，并在必要時進行更新。最后，選擇最適合用戶的策略。

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

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

構建漸進式Web應用程序

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