漸進式 Web 應用程序：您需要了解的業務知識

漸進式網絡應用程序。

如果您聽說過它，然後將其置於次要地位，那麼您只是讓您的對手鬆了一口氣！ 他們要擔心的競爭對手少了一個！

儘管它非常有效，但它仍然是大多數行業的流行語。 這就是為什麼我們會詳細討論它，以便您可以利用它的優勢來加速您的業務增長。

在我們開始告訴你 PWA 的故事之前，讓我們向你展示一些東西：

（圖片來源）

我們在上面的數據中觀察到了一些非常有趣的東西。 觀察結果是：

人們花在移動應用程序上的時間是他們在移動網絡瀏覽器上花費的時間的 7 倍。

數據還揭示了一些讓我們相當困惑的事情！

儘管移動網絡瀏覽器的使用時間較短，但它們獲得的獨立訪問者的流量是移動應用程序的兩倍多！

您現在一定想知道是否可以兩全其美：移動應用程序的更長會話持續時間和移動網絡瀏覽器驚人的流量。

這就是 PWA 的用武之地。該技術可以加劇您的網站轉換並最終增加您的銀行賬戶！

我們將介紹：

• PWA 是什麼。
• 為什麼您的企業需要基於 PWA 的站點。
• 設計 PWA 網站時的最佳實踐是什麼？
• 開發 PWA 網站時需要克服的挑戰。
• 如何通過 PWA 站點提供出色的用戶體驗。
• 您將如何敦促人們安裝您的 PWA 站點。
• PWA 的缺點以及如何克服它們。
• 您需要知道答案的其他 PWA 相關問題。

好奇的？ 好，那我們就開始遊覽吧！

PWA 究竟是什麼？

PWA 是首字母縮寫詞。 它代表漸進式網絡應用程序。

通俗地說，它基本上是一個網站，可以在您的智能手機中呈現原生應用程序的流暢感。 您可以像訪問任何網站一樣通過移動網絡瀏覽器訪問它。

它的酷炫之處在於，您可以將 PWA 添加到您的主屏幕並使用它，就像您在智能手機中使用 Facebook、Messenger、Instagram 或任何其他應用程序一樣。

看一看：

（圖片來源）

（圖片來源）

現在讓我們來了解一下技術。

PWA 是基於 JavaScript 的網絡技術。

它需要開發以下組件：

• 服務工作者
• 清單文件
• HTTPS

1. Service Worker 是一個 JavaScript 代碼元素，它使您即使在離線時也可以訪問 PWA。 此外，它管理著 PWA 網站著名的“推送通知”功能。

2. Manifest.json 是一個 JSON 文件（它是一種類似於 pdf 或 jpg 的文件格式），其中包含當您將 PWA 站點添加到主屏幕並像使用本機應用程序一樣使用它時所需的信息。

（圖片來源）

正如你在上面的演示圖片中看到的，當點擊藍色的“添加到主屏幕”按鈕時，React PWA 的應用程序圖標和短名稱會自動出現。 發生這種情況是因為 React PWA 的 manifest.json 文件包含所有信息，包括應用程序圖標、短名稱、背景顏色、主題和其他有關其界面的信息。

3. HTTPS 是一種通信媒介，Service Worker 可以通過它安全地獲取您的站點以顯示在個人設備上。

為什麼您的企業需要 PWA 站點

上述三個組件共同為您提供以下好處：

• 您的網站即使在離線模式下也能正常運行
• 它呈現了類似應用程序的體驗
• 它能夠自我更新
• 很容易被搜索引擎發現

這些功能如何轉化為您的業務收益？ 好好振作起來！

您的網站即使在離線模式下也能正常運行

首先，即使一個人離線，也可以訪問 PWA 站點。

這意味著您的潛在客戶（和現有客戶）將能夠瀏覽您的網站並執行諸如訂購產品或服務之類的操作。

這不僅使您的網站更有用，而且還提供更令人愉悅的客戶體驗並推動轉換！

它呈現無縫的類似應用程序的體驗

說到移動優先方法，可以肯定地說，PWA 已經上過最好的大學，並以出色的成績掌握了它！

聽起來是不是太多了？ 我們向您保證它不是！

PWA 網站在所有設備（無論是智能手機、平板電腦還是台式機）上都具有無縫且相同的顯示效果，同時佔用的空間比原生應用程序少！ Twitter 充分利用了其 PWA，將其推文數量猛增了 75%！ 它還為他們帶來了 20% 的跳出率！

雖然實現像 Twitter 這樣令人印象深刻的結果可能並不那麼容易，但可以通過 PWA 提供的交互和導航舒適度提供更好的用戶體驗！

因此，您的訪問者最終可能會成為您的回頭客，對您的 PWA 提供的其他很酷的功能感到高興，從而使您的銀行賬戶膨脹。

它能夠自我更新

想像一下不需要手動更新智能手機中的應用程序。 甚至想到它就會讓你放鬆（可能是核心）！ 這恰好是 PWA 網站的眾多很酷的功能之一！

憑藉其預緩存功能，它可以自動更新自身。 而且還不止於此！

如果您將 PWA 站點的任何更新發佈到站點服務器，您站點的應用程序版本也能夠獲取更新的內容！ 因此，它可以為您省去為應用程序發佈單獨更新文件的麻煩，同時讓您的客戶免於記住更新您的 PWA 應用程序的麻煩。

很容易被搜索引擎發現

與原生應用不同，PWA 應用可以被搜索引擎索引。 這使您能夠獲得基本免費的 PWA 網站的自然流量（前提是您在 SERP 中排名）！

由於每 10 個在線體驗中有超過 9 個是從搜索開始的，因此不利用通過在 SERP 中排名可以獲得的潛在大量流量是不明智的。

（圖片來源）

正如您在上圖中清楚地看到的那樣，找到您網站的人越多，他們點擊並最終轉化的機會就越大！ 結合流暢的用戶體驗、獨特的更新部署能力（如果你更新你的 PWA 站點，應用程序版本也會更新）和自我更新功能，推動你的業務增長會容易得多！

設計 PWA 網站時的最佳實踐是什麼？

因此，您已決定為您的業務開發 PWA 站點或將現有站點轉換為 PWA。

偉大的決定！ 您將對您的業務大有裨益！

但在您聯繫開發機構（或自己動手）之前，您必須牢記一些因素，才能打造出色的 PWA 站點。

系統字體的使用

每個操作系統（android、iOS、Windows）都有自己的文本字體。 如果您的 PWA 使用系統的原生字體顯示其內容，客戶會發現它更具吸引力，從而更加關注您的內容。

允許輕鬆共享內容

在這個社交媒體時代，任何網絡內容都必須易於在網絡上共享內容。 因此，您必須提供輕鬆共享 PWA 站點鏈接的選項。

我們建議您在 PWA 底部放置一個漢堡式按鈕，以便用戶的拇指可以輕鬆地在移動屏幕上觸及。 而且由於您所有的社交分享按鈕都將隱藏在漢堡按鈕中，因此界面看起來會乾淨很多。

保持整潔和精簡

一個整潔、精簡的 PWA 網站將提供更好的類似應用程序的體驗。 事實上，PWA 的關鍵特性之一是它為網絡帶來了類似應用程序的體驗。

提供這種體驗的最佳方式之一是使用健康的空白空間。 這種做法將幫助您的 PWA 站點採用時尚、簡約的界面，您的客戶會發現該界面更符合他們的習慣。

在上一個列表頁面上保持滾動

當您的訪問者點擊“返回”按鈕時，他們不僅應該被帶到之前瀏覽過的頁面，而且還應該被帶到他們正在查看的特定部分。 這聽起來很簡單，但它提供了極大的舒適感，因為人們不必滾動來找到他們所在的位置。

黑暗主題

由於人們將大約三分之一的醒著時間花在智能手機上，因此提供以深色主題查看 PWA 網站的選項至關重要。

這實現了兩件事。

首先，人們會將您的網站與其他流行平台（例如 Twitter、FB messenger）相關聯。

其次，您的網站對眼睛友好，有助於提升用戶體驗！

開發 PWA 網站時您（可能）面臨的挑戰

電池使用率高

由於 PWA 通常使用 JavaScript（它不是 iOS 或 Android 的本地語言）開發，因此它們需要智能手機電池才能更努力地工作。 因此，在運行 PWA 應用程序時，設備電池消耗得更快。

如何克服它：無論您是自己開發自己的 PWA 還是選擇了一個開發農場來為您開發，請確保 JavaScript 代碼主幹已針對錯誤進行了優化！

限制訪問設備功能

由於 PWA 應用程序不是“原生”應用程序，因此它們無法訪問設備的許多國內功能，例如藍牙、接近傳感器、高級相機控制、高度計等。 這將限制用戶感知您的內容的方式。

如何克服它：在為您的 PWA 網站設計內容時，將您的創新能力發揮到極致，這樣就可以使用設備的少數國內功能來使用它們。

與較舊的蘋果設備或 iOS 版本集成

儘管自 iOS 11.3 起就允許 PWA 運行，但它們無法在大多數較舊的 Apple 設備上運行。 由於 Apple 設備相對昂貴，並非所有用戶都會購買最新的設備或更新他們的操作系統。

你將如何推廣你的 PWA 網站

現在您已經開發了 PWA 站點，是時候讓人們了解它，以便他們可以訪問您的服務並從中受益。

說到推廣你的 PWA，它有兩個方面。

那些是：

• 你想推廣你的 PWA 應用版本的安裝
• 您想推廣您的 PWA 網站以提高其獲得的流量

讓我們一一討論它們。

促進 PWA 應用安裝

有多種方法可以促進 PWA 的安裝。 在這裡，我們將介紹您的 PWA 網站上的促銷活動。

最初，我們將討論推廣安裝在您網站上的應用程序的最佳做法。

他們來了：

將應用推廣置於用戶旅程之外

例如，在您的 PWA 站點登錄頁面上，將應用安裝 CTA 放在登錄表單和“提交”按鈕下方。 這樣人們就不會因為完成登錄操作而分心。

保留拒絕或取消促銷的直觀選項

某些促銷活動需要單擊十字按鈕。 Windows 用戶習慣於在右側使用“十字”按鈕，而 Apple MacBook 用戶則使用該按鈕。 因此，無論你把它放在哪裡，都要確保它很大並且很容易看到。

適度使用應用推廣

太多會對你的 PWA 網站的用戶體驗產生負面影響。

促銷應僅在檢測到 beforeinstallprompt 時顯示

這個 BeforeInstallPrompt 是一個 JavaScript 代碼片段，您需要將其嵌入到您的 PWA 站點代碼結構中。 它檢測觸發應用推廣的某些用戶交互（到達您網站的某個部分，點擊某個按鈕）。

介紹了最佳實踐後，現在讓我們繼續在您的 PWA 網站上進行應用推廣。

你的 PWA 網站上有幾個地方可以放置應用推廣。 這些是：

1. 導航菜單

（圖片來源）

這是您 PWA 應用推廣的有效場所。 這是因為打開導航菜單表明用戶參與度很高。

你需要記住的：

• 如上圖所示，將促銷放在菜單項下方以避免干擾用戶注意力。
• 顯示簡短的相關宣傳，告知用戶將如何從安裝您的 PWA 應用程序中受益。

2.登陸頁面

著陸頁用於宣傳產品或服務。 因此，它是推廣您的 PWA 應用程序安裝的理想場所。

你需要記住的：

• 確保您獨特的價值主張非常吸引人，並且與用戶痛點相關。
• 告知人們他們將從應用程序中獲得什麼。
• 在著陸頁內容中包含首先將人們帶到您的著陸頁的關鍵字。
• 使 CTA 引人注目並將其放置在著陸頁上的戰略位置。

3. 頁頂固定頁眉

由於標題是網站中最顯眼的部分，因此這是一個非常理想的地方來宣傳您的應用程序。

你需要記住的：

• 並非所有用戶都會對這種促銷方法做出積極反應。 因此，請確保它僅向顯示特定參與跡象的人顯示。
• 在急於採用這種應用推廣方法之前，請先將其與您可以放置​​在標題中的其他元素進行權衡。 您的最終目標是獲得更多符合銷售條件的潛在客戶，而不僅僅是獲得更多應用用戶。

4. 頁面頂部/底部的粘性可關閉安裝橫幅

大多數人都在一個網站或另一個網站上遇到過安裝橫幅或橫幅。 這意味著他們熟悉以這種方式展示的促銷活動。

你需要記住的：

• 此類橫幅可能極具破壞性。 因此，請確保在用戶觸發精心選擇的轉化事件後顯示它，該事件表明與您的內容更深入地互動。
• 在橫幅中，包含一段簡短的文字，告知用戶您的應用程序將提供的價值，例如：“即使離線也能閱讀我們的內容”。 選擇此文本時，請確保它與您的用戶所在的 PWA 網站部分、您網站的內容和總體主題、檢測到的用戶參與度、用戶位置（如果與網站內容相關）、用戶行為高度相關等等。

5. 在信息列表或文章之間

正如標題所說，這種促銷出現在您網站上的文章或信息塊之間。 如果用戶已經到達文章中的特定點，則意味著重要的參與度，並且文章宣傳中的位置可能表現最佳。 此類促銷的目標通常是告知用戶訪問他們當前正在欣賞的內容的更簡單方法。

你需要記住的：

• 不要過度使用它。 它只會惹惱您的用戶。
• 保持取消促銷的方法可用，並確保記住用戶取消它的選擇。
• 如上圖所示，促銷中的文字必須高度相關，同時宣傳獲得應用程序的好處。

推廣你的 PWA 網站

就此事而言，推廣您的 PWA 與推廣任何網站沒有什麼不同。 此外，網站推廣本身就需要一個完整的討論。 因此，我們將在這裡討論一些關鍵的促銷手段。

1. 使用社交媒體作為跳板

社交媒體不僅功能強大，而且是傳播內容和與目標受眾互動的極其有效的平台。 因此，我們將其放在第一位。

讓我們快速提一下我們的許多客戶已經受益的一些技巧：

• 在您的 Instagram 個人資料中放置指向與您最近發布的帖子相對應的 PWA 網站各個部分的鏈接。 這不僅可以提供豐富的無縫用戶體驗，還有助於提高轉化率。
• 請求您現有的關注者群分享您的 PWA 網站 URL，以獲得忠誠度積分。 這為他們提供了推廣您網站的動力，增強了您與受眾的互動並增加了網站流量。
• 創建與您的利基相匹配的競賽和贈品，人們可以通過共享您的 PWA URL 參與其中。

2. 獲得推薦

這恰好是為您的網站帶來流量的最真實和最有效的方式之一。 這可以通過各種方式來完成，例如鍊接交換、訪客帖子作者簡介中的鏈接等。

無論您選擇哪種方法，盡量獲得最大的 Dofollow 鏈接，因為它們有助於傳遞鏈接汁。 報酬？ 顯著提高您的 SERP 排名，進而提高自然流量！

3. 在目錄中註冊

在業務解決方案方面，目錄受到客戶的信任。 其中包括但不限於 Yelp、Google 我的商家和 FourSquare。 其中大部分是免費的，並將您的 PWA 站點作為可靠的解決方案暴露給本地和全球流量。

4.利用無所不在的顯示

在為促銷空間集思廣益時，這些展示空間通常不會讓您想到，但在建立更強大的數字形象和直接訪問您的網站方面非常有效。 一些很棒的例子是電子郵件簽名、名片、你在活動中展示的實體橫幅等。

PWA 構建器軟件 Vs. 聘請代理機構

有很多工具可以讓您從現有網站構建 PWA 網站。 可以想像，它們都是付費工具。 儘管如此，它們提供了一系列有吸引力的好處。 那些是：

• 無需與開發團隊會面
• 固定月/年計費
• PWA站點的快速交付

現在讓我們談談聘請代理機構來開發您的自定義 PWA 的一些好處。

• 您可以擁有自定義功能，幫助您在競爭對手中脫穎而出。
• 從 PWA 專業人士處獲取實時建議。
• 可以從大量成功的 PWA 模板中進行選擇。
• 免除維護和更新的麻煩。
• 即時（幾乎總是）客戶服務。

聘請 PWA 開發機構的一個主要挫折是，它比 PWA 構建器工具花費更多。 因此，您必須做出最適合您的財務能力和業務需求的選擇。

測試你的 PWA 網站

如果你已經開發了 PWA 網站，那麼請不要打開香檳酒瓶.......但是！ 還有工作要做！

在開始網站營銷活動之前，您必須驗證 PWA 網站的幾個方面。 這些方面對於您網站的可靠和一致的性能至關重要。

以下是您需要測試的 PWA 網站的各個方面：

1. 添加到主頁提示

由於您的 PWA 不是本機應用程序，因此它不會在 Apple 應用程序商店或 Google Play 商店中提供。 您的網站訪問者可以在他們的智能手機上獲取您的 PWA 應用程序的唯一方法是通過添加到主頁提示。 因此，我們建議您先檢查再做其他事情。

2.離線加載

PWA 站點的一個關鍵特性是，即使在連接性較差的情況下（例如是飛機模式），它們也能夠加載功能元素。 由於 PWA 網站的這一功能將成為您營銷策略的基石之一，因此您必須驗證 PWA 的離線加載能力。

3. 響應能力

響應性不再被視為網站或應用程序的一項令人興奮的功能。 它已被大規模視為理所當然，並且不會恢復。 因此，任何通過智能手機、平板電腦或台式機訪問您網站的人都希望您的網站能夠根據屏幕大小自行調整。 這意味著地球上沒有這個因素最終會出現在您的“稍後檢查”列表中。

提示

Mozilla Firefox 瀏覽器是您可以用於此目的的有效且免費的工具。

• 只需在桌面上打開 Mozilla。
• 在地址欄中鍵入 PWA 站點的 URL。
• 按Ctrl+Shift+M ，您的站點將在響應性測試環境中打開。

上圖中是在 Mozilla 測試環境中在 iPad 窗口中打開悉尼先驅晨報網站的屏幕截圖。

如果仔細查看，您會在地址欄下方看到幾個選項卡。

最左邊的讓您選擇要在其中查看站點預覽的設備。您還可以檢查各種類型的連接（例如 2G、3G 等）的加載速度時間。

4. 跨瀏覽器測試

不知道您的用戶可能從哪個瀏覽器登錄到您的 PWA 站點。 因此，確保您的網站在每個瀏覽器中都能提供最佳性能不僅重要而且是強制性的！

5. 聯網測試

並非所有訪問者都會通過 5G 或寬帶連接到達您的站點。 有些人甚至可能在使用 3G！ 無論客戶網絡如何，為了確保流暢的用戶體驗，強烈建議您在各種連接下測試您的站點。

為此，您可以使用 Mozilla Firefox 瀏覽器的測試功能。 除了網絡測試外，您還可以通過此功能檢查 PWA 站點的響應能力。

6. 加載時間測試

隨著人們的注意力不斷下降，您的網站在 2 秒內加載（越快越好）至關重要！ 儘管 PWA 站點以其低加載時間而聞名，但最好還是保持安全並測試您的站點加載時間。

GTmetrix 是一款免費且廣受歡迎的工具，您可以使用它來準確測試站點加載時間。 它還提供了一份詳細的報告，顯示可能會減慢您網站速度的任何元素。

讓 PWA 引領您的企業走向未來

由於包括 Twitter、優步和 Pinterest 在內的各個行業的大人物已經將 PWA 應用到他們的數字業務中，其他人會效仿只是時間問題。 在您知道之前，它很可能被認為是理所當然的（就像移動響應一樣）。

因此，如果您在競爭對手中獲得競爭優勢並向不斷擴大的客戶群提供有價值的服務/產品，請開發您的 PWA 網站！ 讓它為您的數字存在開闢道路！