在Google於2015年提出最初建議後，漸進式Web開發在最近幾年有所發展。漸進式Web應用程序（PWA）利用最佳的Web和移動技術來提供出色的用戶體驗。

為什麼PWA值得努力？ 企業可能更喜歡為響應式網站構建適用於Android和iOS平台的單獨應用程序。 但是，使用漸進式Web應用程序可以幫助統一所有這些方法。 在此漸進式Web應用程序的初學者指南中，我們討論了許多企業在2020年探索這一途徑的原因，然後向您展示了如何與時俱進。

我們首先討論漸進式Web應用程序的功能是什麼，然後討論其被採用的主要原因。 接下來，在探討使用HTML，CSS和原始JavaScript的PWA的簡單示例之前，我們將探索典型的漸進式Web應用程序的元素。

什麼是漸進式Web應用程序（PWA）？

漸進式Web應用程序是使用最新Web功能為用戶提供與本地移動應用程序可比的體驗的Web應用程序。 雖然使用網路技術來構建漸進式Web應用程序，但其功能模仿了本機應用程序的功能。

漸進式Web應用程序的目標是提供類似應用程序的體驗。 如果您選擇漸進式Web應用程序，則可能會放棄某些本機功能，但是這種選擇會極大地擴大您的覆蓋範圍。 隨著越來越多的Web技術可以使用的功能，本機應用程序與漸進式Web應用程序之間的差距在最近幾年有所縮小，從而導致採用率增加。

漸進式Web應用程序的特徵

就像響應式Web設計的概念一樣，漸進式Web應用程序由開發人員可能遵循的一系列特徵組成。 它由一系列技術和功能組成，可彌合本機應用程序與漸進式Web應用程序之間的鴻溝。 漸進式Web應用程序除了適應各種設備，瀏覽器和屏幕外，還具有以下特徵：

• 可安裝：可以安裝PWA並將其固定在設備的主屏幕上，以便以後使用。
• 離線工作能力：沒有連接時，PWA應該可以工作（至少屏幕上顯示您需要連接）。
• 安全：由於PWA中的信息是通過Web交換的，因此您應確保連接使用HTTPS協議和SSL。
• 支持本機應用程序功能，例如全屏模式和推送通知。

在構建漸進式Web應用程序時，這些特徵應作為準則。 因此，關於您的應用程序是否是漸進式的答案，其解決方案更多的是規模而不是二進位選擇。

歸根結底，漸進式Web應用程序僅是Web應用程序-因此，它不會出現在任何應用程序商店中。 這會損害您的應用程序嗎？ 這始終是一個權衡。 熱門的應用商店為您提供了可發現性，並吸引了一批正在等待獲得新的有趣應用的新用戶。 另一方面，進入應用商店需要付出很多努力，並且您的創作必須與商店的要求保持100％一致。 總體上來說，自己交付PWA更為簡單，但是您必須要有一個預先存在的受眾群體，您才能將應用程序營銷給該受眾群體。

實施漸進式Web應用程序：主要注意事項

到目前為止，我們已經討論了漸進式Web應用程序的特徵。 讓我們看一下漸進式Web應用程序的某些元素。 在繼續進行本節操作之前，我們將假定您的網站具有響應能力並且可在各種設備和瀏覽器上正常運行。

要使您的應用程序離線工作，您需要僱用一名服務人員。 簡而言之，服務會為您的Web應用程序註冊一個離線版本。 接下來，您需要為PWA清單。 本質上，這是一個JSON文件，其中包含應用程序的元數據。

您可以在我們的WooCommerce上創建漸進式Web應用程序的指南中找到如何執行這些步驟。

為什麼要開發漸進式Web應用程序？

本地移動應用程序通常需要執行幾個步驟來安裝和設置。 隨著安裝您的應用程序的步驟越來越多，越來越少的用戶將會關注。 另一方面，用戶幾乎可以立即使用漸進式Web應用程序。 漸進式Web應用程序可幫助企業極大地有效地吸引其受眾。 PWA的最大優勢是：

• 提高效率：由於應用程序已載入Web技術，因此與本地應用程序相比，它們花費的時間通常更少。
• 高效利用帶寬：由於PWA只是基於文本的代碼，因此理想情況下它們比本機應用程序的安裝文件小。 因此，用戶可能必須花費更少的數據才能使您的應用程序在其設備上運行。

使用燈塔評估漸進式Web應用程序

正如我們之前所建立的，漸進式Web應用程序是通過一系列屬性來定義的。 您如何評估您的Web應用程序是否是漸進式的？ Google的Lighthouse是一種評估網站進度的工具。 Lighthouse是自動化的開源程序，可以評估您的網站的性能，SEO和可訪問性等參數。 您可以安裝Lighthouse Chrome插件，以將其用作開發人員工具的一部分。

要進行Lighthouse審核，請在Chrome上打開您的網站，然後導航到Chrome Developer Tools中的Lighthouse選項卡。 該工具的漸進式Web應用程序部分詳細介紹了網站的各種參數，以及如何與這些領域的最佳實踐建立聯繫。

Lighthouse演示PWA演示：如何創建待辦事項列表

我們已經在博客的前面創建了一個基於ReactJS的WooCommerce漸進式Web應用程序。 在本節中，讓我們創建一個vanillaJS漸進式Web應用程序。 這個程序將是一個簡單的待辦事項清單。 最終的UI只有一個任務列表和一個將新任務添加到列表的按鈕。

我們的漸進式Web應用演示

我們的PWA的HTML / CSS結構

首先，讓我們為漸進式Web應用程序創建一個結構。

.wp-block-code {border：0; 填充：0; } .wp-block-code> div {溢出：自動； } .hljs {box-sizing：border-box; } .hljs.shcb-code-table {display：table; 寬度：100％; } .hljs.shcb代碼表> .shcb-loc {顏色：繼承； 顯示：錶行； 寬度：100％; } .hljs.shcb-code-table .shcb-loc> span {display：table-cell; } .wp-block-code code.hljs：not（.shcb-wrap-lines）{空格：pre; } .wp-block-code code.hljs.shcb-wrap-lines {空白：預包裝； } .hljs.shcb-line-numbers {border-spacing：0; 計數器重置：行； } .hljs.shcb-line-numbers> .shcb-loc {counter-increment：line; } .hljs.shcb-line-numbers .shcb-loc> span {padding-left：0.75em; } .hljs.shcb-line-numbers .shcb-loc :: before {border-right：1px solid #ddd; 內容：櫃檯（行）； 顯示：表格單元格； 填充：0 0.75em; 文字對齊：右； -webkit-user-select：無； -moz-user-select：無； -ms-user-select：無； 用戶選擇：無； 空白：nowrap; 寬度：1％; }

…

請注意，就像在自適應網頁設計中一樣，我們設置了視口。 此外，我們將初始縮放比例設置為「 1」。 接下來，我們鏈接到樣式表和清單。 我們很快將看到如何創建清單JSON文件。

接下來，我們定義頁面的主體。 我們創建一個標題和一個按鈕以將項目添加到列表中。 我們很快將使用JavaScript來將動作與按鈕單擊相關聯。

項目列表顯示在具有todolist類的div中。 替代項目具有奇數和偶數類名稱-它們將具有與我們在樣式中設置的顏色不同的顏色。

在本節中，我們使用flexbox使我們的設計響應。 此外，我們使用視口高度單位分配應用容器的高度。

.app {最小高度：100vh; 顯示：flex; flex-direction：列; }

接下來，我們設置標題和按鈕的屬性。

標頭h1 {邊距：50px 0px 20px 0px; 文本對齊：居中； 填充：2rem; 背景：＃4A44F2； font-size：40px; 顏色：＃FFFF52； } .btn-wrapper：{text-align：center; } .btn-wrapper按鈕{width：150px; 高度：75像素； font-size：20px; 顏色：黑色； }

最後，我們設置列表項的尺寸。

.todolist {背景：＃101010; 寬度：60％; 底邊距：100px; } .list-items {display：flex; } .list-items> div {高度：100px; 行高：100px； 文本對齊：居中； flex：1; 顏色：黑色； 寬度：100px； } .odd {背景：＃F2E635; } .even {背景：＃F20505; }

使用VanillaJS添加任務功能

為了向項目添加JavaScript功能，我們首先通過單擊按鈕來綁定JavaScript函數，然後將div元素添加到項目列表中。 該類被設置為奇數或偶數，這取決於單擊按鈕時列表中存在多少項。

const按鈕= document.querySelectorAll（「。btn」）; button.forEach（（btn，index）=> {btn.addEventListener（「 click」，（）=> {var listItems = document.querySelectorAll（「。list-items」）[0]; var item = document.createElement（「 div」）; item.className =（listItems.children.length％2 === 0）嗎？ ‘奇偶’; item.innerHTML =’item’+字元串（listItems.children.length +1）; listItems.appendChild（item）; }）; }）;

申請清單

雖然我們創建了僅具有一些漸進功能的自適應Web應用程序，但我們需要向其中添加一個關鍵元素，即清單。 您可以使用此在線清單生成器，在其中鍵入應用程序的元數據，然後上傳圖標以生成清單JSON文件。 以下是我們使用的JSON文件。

{「名稱」：「待辦事項清單」，「短名稱」：「待辦事項清單」，「主題顏色」：「 #cecece」，「背景顏色」：「＃2196f3」，「顯示」：「最小用戶界面」，「方向」 ：「肖像」，「範圍」：「 /」，「 start_url」：「 /」，「圖標」： [
{
“src”: “images/icons/icon-72×72.png”,
“sizes”: “72×72”,
“type”: “image/png”
},
{
“src”: “images/icons/icon-96×96.png”,
“sizes”: “96×96”,
“type”: “image/png”
},
{
“src”: “images/icons/icon-128×128.png”,
“sizes”: “128×128”,
“type”: “image/png”
},
{
“src”: “images/icons/icon-144×144.png”,
“sizes”: “144×144”,
“type”: “image/png”
},
{
“src”: “images/icons/icon-152×152.png”,
“sizes”: “152×152”,
“type”: “image/png”
},
{
“src”: “images/icons/icon-192×192.png”,
“sizes”: “192×192”,
“type”: “image/png”
},
{
“src”: “images/icons/icon-384×384.png”,
“sizes”: “384×384”,
“type”: “image/png”
},
{
“src”: “images/icons/icon-512×512.png”,
“sizes”: “512×512”,
“type”: “image/png”
}
]，「 splash_pages」：null}

該代碼在GitHub上可用，供您修改和運行。

關於漸進式Web應用程序的最終想法

在此漸進式Web應用程序的初學者指南中，我們首先研究了漸進式Web應用程序的出現。 然後，我們探究了它們越來越受歡迎的原因，並將其分解為基本要素。 此外，我們研究了如何以最簡單的方式構建您的第一個PWA。 您的應用可能會比我們的基本任務清單更為複雜，但是原理仍然相同。

如果您對PWA的工作方式有任何疑問，請隨時在評論中提問。

…

不要忘了加入我們的速成班，以加快您的WordPress網站的速度。 通過一些簡單的修復，您甚至可以減少50-80％的載入時間：