摘要：漸進(jìn)式應(yīng)用程序自推出就被定義為響應(yīng)式可獨(dú)立連接般輕盈安全模塊化高度自定義免安裝打開(kāi)即用的體驗(yàn)。因此，保護(hù)應(yīng)用程序中的隱私數(shù)據(jù)是必要的。創(chuàng)建漸進(jìn)式應(yīng)用程序的最后一步是添加服務(wù)器。使用模型是一個(gè)很好的起點(diǎn)，但它不是漸進(jìn)式應(yīng)用程序的要求。

轉(zhuǎn)載請(qǐng)注明出處：葡萄城官網(wǎng)，葡萄城為開(kāi)發(fā)者提供專(zhuān)業(yè)的開(kāi)發(fā)工具、解決方案和服務(wù)，賦能開(kāi)發(fā)者。

如果您是Web開(kāi)發(fā)人員，您可能已經(jīng)了解漸進(jìn)式Web應(yīng)用程序（PWA）或已經(jīng)實(shí)現(xiàn)了自己的應(yīng)用程序。 如果您不熟悉，本文將深入概述漸進(jìn)式Web應(yīng)用程序的實(shí)現(xiàn)原理，以及它們?cè)诂F(xiàn)代Web開(kāi)發(fā)中的重要程度。
漸進(jìn)式Web應(yīng)用程序自推出就被定義為響應(yīng)式、可獨(dú)立連接、APP般輕盈、安全、模塊化、高度自定義、免安裝、打開(kāi)即用的Web體驗(yàn)。這是一個(gè)冗長(zhǎng)的描述，如果用一句話簡(jiǎn)要的概括：我認(rèn)為PWA只是一個(gè)具有良好用戶(hù)體驗(yàn)的Web應(yīng)用程序，僅此而已。
為了更清晰地理解這個(gè)定義，讓我們來(lái)一探其核心原則。在此之前，你可能已經(jīng)熟悉了其中的一些，但我保證，你并非全部了解。

Responsive（響應(yīng)式）

Connectivity-independent （獨(dú)立連接）

App-like（app的樣式）

Fresh （不斷更新）

Safe （安全）

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

Re-engageable （可重用）

Installable （可安裝）

Linkable （可鏈接）

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

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

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

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

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

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

可重復(fù)使用的應(yīng)用程序可以發(fā)送推送通知來(lái)拉回用戶(hù)。目的是讓用戶(hù)知道應(yīng)用程序推出了一些他們可能感興趣的更新點(diǎn)。我們習(xí)慣于智能手機(jī)和原生移動(dòng)應(yīng)用程序，但瀏覽器也通過(guò)Push和Notification API支持這一特點(diǎn)。

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

可鏈接的Web應(yīng)用程序是可共享的，因此托管在專(zhuān)用域上的應(yīng)用程序不適用。 您只需要一個(gè)URL即可。

上述原則在實(shí)踐中如何實(shí)現(xiàn)？與標(biāo)準(zhǔn)Web應(yīng)用程序相比，創(chuàng)建PWA只需要三個(gè)基本要求：

通過(guò)HTTPS提供Web應(yīng)用程序

添加應(yīng)用程序清單文件

使用服務(wù)器

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

應(yīng)用程序清單是一個(gè)JSON文件，其中包含有關(guān)應(yīng)用程序的元數(shù)據(jù)。它只提供基本信息。在Android應(yīng)用程序中，清單文件要復(fù)雜得多，可能需要在整個(gè)應(yīng)用程序開(kāi)發(fā)過(guò)程中進(jìn)行更改。 Web應(yīng)用程序清單涉及較少，并且在創(chuàng)建后不需要經(jīng)常更新，因?yàn)樗鼈儾话渲脜?shù)或依賴(lài)項(xiàng)。

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

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

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

內(nèi)容是可以在應(yīng)用程序的整個(gè)生命周期中更改的數(shù)據(jù)。它被排除在應(yīng)用程序shell之外，因?yàn)樗莿?dòng)態(tài)的，并且在加載應(yīng)用程序時(shí)可能會(huì)過(guò)時(shí)。它通常通過(guò)API服務(wù)公開(kāi)，易于查詢(xún)。需要在應(yīng)用程序中管理此內(nèi)容，以確保根據(jù)請(qǐng)求提供最新鮮的內(nèi)容。 服務(wù)器承擔(dān)此責(zé)任。

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

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

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

使用應(yīng)用程序shell模型的一個(gè)缺點(diǎn)是其性能。它確實(shí)減慢了初始加載時(shí)間;但是，這可以改善。要減少加載應(yīng)用程序shell文件所需的時(shí)間，您可以嘗試縮小代碼（以減小文件大?。⒗壩募ㄒ宰钚』W(wǎng)絡(luò)請(qǐng)求的數(shù)量）、刪除未使用的代碼。您可以在需要時(shí)將此刪除的代碼發(fā)送給客戶(hù)端。這將根據(jù)要求而有所不同。

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

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

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

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

1. 注冊(cè)

當(dāng)應(yīng)用程序第一次加載到瀏覽器中時(shí)，將發(fā)生這一請(qǐng)求。 這不是真正的Service Worker事件，因?yàn)榇藭r(shí)服務(wù)不存在于瀏覽器上下文中，但這是重要的一步。 應(yīng)用程序的主JavaScript文件應(yīng)檢查瀏覽器是否支持ServiceWorker API，如果是，請(qǐng)注冊(cè)服務(wù)請(qǐng)求。注冊(cè)成功后，將下載服務(wù)文件，然后開(kāi)始安裝。

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

此代碼在瀏覽器中注冊(cè)服務(wù)請(qǐng)求（如果支持）。 下一個(gè)事件將在服務(wù)工作文件中處理。

2. 安裝

Install事件是服務(wù)器可以自己處理的第一個(gè)事件。它在注冊(cè)/下載后立即啟動(dòng)。 完成安裝后，最好開(kāi)始緩存靜態(tài)資源，因?yàn)榘惭b事件只發(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（）方法將在安裝事件完成后開(kāi)始執(zhí)行promise。

3. 激活

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

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

4. 抓取

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

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

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

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

WijmoJS | 下載試用
快如閃電，觸控優(yōu)先。純前端控件集 WijmoJS，為您的企業(yè)應(yīng)用提供更加靈活的操作體驗(yàn)，在全球率先支持 AngularJS，并提供性能卓越、零依賴(lài)的 FlexGrid 和金融圖表等多個(gè)控件，為您提供易用、輕松的操作體驗(yàn)，全面滿(mǎn)足開(kāi)發(fā)所需。