轉(zhuǎn)載請注明出處：葡萄城官網(wǎng)，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務，賦能開發(fā)者。
原文出處：https://www.grapecity.com.cn/blogs/wijmo-depth-overview-progressive-web-applications

創(chuàng)新互聯(lián)建站是一家專業(yè)提供金牛企業(yè)網(wǎng)站建設,專注與網(wǎng)站建設、成都做網(wǎng)站、H5技術(shù)、小程序制作等業(yè)務。10年已為金牛眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。

如果您是Web開發(fā)人員，您可能已經(jīng)了解漸進式Web應用程序（PWA）或已經(jīng)實現(xiàn)了自己的應用程序。 如果您不熟悉，本文將深入概述漸進式Web應用程序的實現(xiàn)原理，以及它們在現(xiàn)代Web開發(fā)中的重要程度。

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

為了更清晰地理解這個定義，讓我們來一探其核心原則。在此之前，你可能已經(jīng)熟悉了其中的一些，但我保證，你并非全部了解。

漸進式 Web 應用的原則

Responsive（響應式）

對于Web開發(fā)人員，這意味著應用程序中顯示的元素在不同的屏幕大小上可自行縮放，以便適應屏幕尺寸。對于設計人員，這意味著更高的性能，比如應用程序是否快速響應用戶交互、事件、頁面加載等。構(gòu)建高性能的應用程序是產(chǎn)品最核心的競爭力，漸進式Web應用程序自然也同樣遵循這一法則，尤其是針對 Web開發(fā)人員方面。響應式 Web 應用程序在任何設備上都具備同樣良好的適應能力，無論屏幕是寬、窄、短，甚至是曲面，應用程序布局都會自適應，滿足用戶的最佳使用體驗。

Connectivity-independent（獨立連接）

由于我們討論的是Web應用程序，因此在應用程序生命周期的某個時刻一定需要網(wǎng)絡連接，特別是首次訪問應用程序時。當網(wǎng)絡不可用或速度太慢時，應用程序應做到不影響用戶體驗，即不應向用戶顯示空白頁面或400錯誤，這在PWA出現(xiàn)以前難以做到，但PWA利用瀏覽器的存儲機制使這成為可能。

App-like（app的樣式）

我認為“原生app-like”是描述這一原則的最好方式，即本地化應用程序的外觀和感覺就像是用于使用外部設備，某些應用程序?qū)ｉT針對iOS或Android等平臺構(gòu)建，然而之前的Web應用程序則無法提供相同的體驗，尤其是在移動設備上。 PWA則不同，漸進式Web應用程序旨在提供所有設備類似的使用體驗，用戶可以從手機切換到筆記本電腦，在類似的UI下，輕松完成相同的任務。

Fresh （不斷更新）

我想把它稱為A.F.A.P - 應用程序中的數(shù)據(jù)應盡可能保持最新。如果新數(shù)據(jù)可用且與客戶端相關(guān)，則需要使用最新數(shù)據(jù)更新應用程序。管理網(wǎng)絡請求和瀏覽器存儲對于提供出色的用戶體驗和在客戶端上保持最新內(nèi)容至關(guān)重要。

Safe （安全第一）

安全第一！如果應用程序不能保證數(shù)據(jù)的安全性，應用程序有什么用處？市場大多數(shù) Web 應用程序中都包含了只應為通信方所知的客戶敏感信息。因此，保護應用程序中的隱私數(shù)據(jù)是必要的。PWA采取了簡單而有效的方式：使用HTTPS協(xié)議為網(wǎng)絡流量添加一層安全防護。

Discoverable （可發(fā)現(xiàn)）

應用程序應該很容易在網(wǎng)上/應用商店中找到，這就是應用程序的可發(fā)現(xiàn)性。如果搜索引擎找不到應用程序，將怎樣發(fā)掘潛在用戶？應用程序搜索清單可以提供幫助。它在識別瀏覽器的應用程序方面起著重要作用，包含了有關(guān)應用程序的信息，即名稱、作者和說明。應用程序搜索清單同樣有助于識別安裝在其設備上的PWA。

Re-engageable （可重用）

可重復使用的應用程序可以發(fā)送推送通知來拉回用戶。目的是讓用戶知道應用程序推出了一些他們可能感興趣的更新點。我們習慣于智能手機和原生移動應用程序，但瀏覽器也通過Push和Notification API支持這一特點。

Installable （可安裝）

漸進式Web應用程序可以直接安裝到移動設備的主屏幕上。這主要是移動瀏覽器功能，使用Chrome，您也可以在桌面上執(zhí)行此操作。 iOS Safari也支持此功能，因此如果你有iPhone，你可以加入PWA陣營。 安裝Web應用程序真的很酷，您無需通過App Store或Google Play Store等市場下載應用程序。只需訪問該網(wǎng)站，點擊“添加到主屏幕”選項，該應用程序?qū)⒘⒓达@示在您的主屏幕上。

Linkable （可鏈接）

可鏈接的Web應用程序是可共享的，因此托管在專用域上的應用程序不適用。 您只需要一個URL即可。

創(chuàng)建漸進式Web應用程序

上述原則在實踐中如何實現(xiàn)？與標準Web應用程序相比，創(chuàng)建PWA只需要三個基本要求：

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

HTTPS是現(xiàn)代Web應用程序的基本協(xié)議，漸進式Web應用程序也不例外。

應用程序清單是一個JSON文件，其中包含有關(guān)應用程序的元數(shù)據(jù)。它只提供基本信息。在Android應用程序中，清單文件要復雜得多，可能需要在整個應用程序開發(fā)過程中進行更改。 Web應用程序清單涉及較少，并且在創(chuàng)建后不需要經(jīng)常更新，因為它們不包含配置參數(shù)或依賴項。

創(chuàng)建漸進式Web應用程序的最后一步是添加服務器。奇跡發(fā)生的地方是它啟用了離線功能。對于PWA來說，服務器只是另一個JavaScript文件 - 一個非常強大的JavaScript文件。它實際上在瀏覽器中的一個單獨的線程上運行，因此服務工作線程上的執(zhí)行不會中斷主應用程序線程。這使開發(fā)人員可以靈活地通過并發(fā)性創(chuàng)建更好的用戶體驗。服務器可以處理網(wǎng)絡請求/響應和緩存。從主線程中刪除此工作將應用程序邏輯與數(shù)據(jù)管理和網(wǎng)絡相關(guān)的操作分開。

如您所見，這里的大多數(shù)漸進式應用都涉及服務器實現(xiàn)。但在實現(xiàn)之前，必須考慮應用程序的體系結(jié)構(gòu)。

PWA應用程序結(jié)構(gòu)

應用程序shell是描述應用程序基礎結(jié)構(gòu)的概念。它包含您的應用程序需要運行的所有靜態(tài)文件。在Web開發(fā)的上下文中，這將包括HTML，CSS，JavaScript和圖像文件。

內(nèi)容是可以在應用程序的整個生命周期中更改的數(shù)據(jù)。它被排除在應用程序shell之外，因為它是動態(tài)的，并且在加載應用程序時可能會過時。它通常通過API服務公開，易于查詢。需要在應用程序中管理此內(nèi)容，以確保根據(jù)請求提供最新鮮的內(nèi)容。 服務器承擔此責任。

在首次加載應用程序時，應緩存應用程序shell文件，以便應用程序可以在沒有網(wǎng)絡連接的情況下工作。

一個好的PWA將避免顯示此屏幕出現(xiàn)：

當頁面未加載時，用戶將完全脫離應用程序。顯然，與網(wǎng)絡相關(guān)的問題會影響用戶體驗，但不應該讓用戶遠離應用程序。這個想法類似于原生體驗，即使應用程序中顯示空白屏幕，PWA也可以讓用戶參與應用程序。為了在網(wǎng)絡較慢時讓用戶保持參與，您可以使用動畫或提供具備視覺反饋的客戶端交互，就像帶有小拼圖或3D交互模型的刷新按鈕一樣簡單。要有創(chuàng)意！

使用應用程序shell模型的一個缺點是其性能。它確實減慢了初始加載時間;但是，這可以改善。要減少加載應用程序shell文件所需的時間，您可以嘗試縮小代碼（以減小文件大?。?、捆綁文件（以最小化網(wǎng)絡請求的數(shù)量）、刪除未使用的代碼。您可以在需要時將此刪除的代碼發(fā)送給客戶端。這將根據(jù)要求而有所不同。

這里描述的架構(gòu)非常常見。如果您已經(jīng)開發(fā)了其他平臺的應用程序，您可能會認識到類似的設計結(jié)構(gòu)。例如，需要訪問網(wǎng)絡的移動應用程序遵循類似的方法與服務器進行通信。通常有一些Factory類處理網(wǎng)絡請求和響應。 Factory類提供了一個抽象層，如果異步生成，則效果最佳。應用程序邏輯不必等待請求。它可以允許用戶繼續(xù)并在請求完成時通知他們，可以通過分離數(shù)據(jù)訪問實用程序和UI邏輯來簡化測試。

使用App Shell模型是一個很好的起點，但它不是漸進式Web應用程序的要求。如果您有現(xiàn)有的應用程序，則可以評估應用程序的哪些部分使用最多，并優(yōu)化初始加載。如果95％的用戶群僅使用25％的應用程序，那么僅下載和緩存25％的應用程序（最常用的應用程序）可能最有意義。用戶可以根據(jù)需要，選擇下載和緩存其他部分，這完全取決于用戶與您應用程序的交互方式。

服務請求

服務請求的實現(xiàn)因應用程序而異，但在應用程序中開始使用它們時應該了解一些事項。之前，我提到服務請求在瀏覽器中的不同線程上運行。這意味著它具有管理生命周期的能力，就像您的應用程序一樣。

以下是主要的服務器生命周期事件：

• 注冊

當應用程序第一次加載到瀏覽器中時，將發(fā)生這一請求。 這不是真正的Service Worker事件，因為此時服務不存在于瀏覽器上下文中，但這是重要的一步。 應用程序的主JavaScript文件應檢查瀏覽器是否支持ServiceWorker API，如果是，請注冊服務請求。注冊成功后，將下載服務文件，然后開始安裝。

if ('serviceWorker' in navigator) { 

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

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

• 安裝

Install事件是服務器可以自己處理的第一個事件。它在注冊/下載后立即啟動。 完成安裝后，最好開始緩存靜態(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。

• 激活

activate事件表示已安裝服務器。 激活完成后，服務器將獲得對主應用程序的控制權(quán)。 當服務變?yōu)椤盎顒印睍r，它還將檢查緩存的資源，并在數(shù)據(jù)過期時更新數(shù)據(jù)。 這可能需要進行額外的網(wǎng)絡請求以進行對比，但這應該不是問題，因為應用程序不會受到請求執(zhí)行的影響。 服務器還能夠在處于活動狀態(tài)時對Fetch，Push和Message等功能事件執(zhí)行操作。

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

• 抓取

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

Push和Message事件也是服務器在活動時偵聽的事件。 它們可用于實現(xiàn)推送通知和同步發(fā)送的數(shù)據(jù)。

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

構(gòu)建漸進式Web應用程序

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

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前名稱：漸進式Web應用程序的深入概述-創(chuàng)新互聯(lián)
本文URL：http://m.rwnh.cn/article4/doiooe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計、外貿(mào)網(wǎng)站建設、做網(wǎng)站、響應式網(wǎng)站、微信公眾號、App設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)