PWA的業務價值

漸進式WebApp，在很多公司的發展藍圖上，緊跟現代瀏覽器的腳步，以適應使用者預期。像所有新的概念和技術功能一樣，它們會產生問題：這是不是我的客戶需要的？它會如何提升我的業務？技術可行性怎麼樣？

為了制定一些數字化的戰略，需要幾個利益相關者參與：產品經理、CTO，UX調研人員。產品經理關心每一個功能的業務價值，CTO關心技術的可行性和可靠性，UX調研人員關心功能是否可以解決客戶問題。

這篇文章旨在回答以上三個人的問題，並構建PWA應用。你可以從你的客戶需求開始，轉換成PWA的功能，聚焦于衡量每一個功能帶來的業務價值。

PWA解決客戶需求

Google有一個規則：“focus on the user and all else will follow”。考慮使用者優先：客戶需要什麼？PWA可以給他們提供什麼？

在做使用者調研的時候，我們發現了一些有趣的模式：

• 使用者討厭手機上開啟網頁延遲和不可靠。
• 50%的智慧手機使用者更喜歡在網頁上去瀏覽或者購物，不想下載App。
• 解除安裝App的其中一個大的理由是手機儲存空間有限（PWA一般只需要1M不到）。
• 使用手機網頁購物的智慧手機使用者，85%的人覺得手機通知有用。

綜上所述，我們會發現客戶更喜歡的體驗是：快速、可安裝、可靠、密切聯絡。

PWA利用現代Web功能

PWA提供了一系列絕佳的體驗和現代Web API，旨在滿足你的客戶需求。

舉個例子，用service worker，可以快取你的資原始檔，也可以預測性的prefetch，讓你的站點更快更可靠。Manifest API，讓你的站點變得可安裝，使用者可以從首屏直接點選圖示啟動你的PWA應用。Notification API則可以給你的客戶發通知資訊，讓聯絡更加密切。

理解業務影響

業務的成功的定義可以是很多方面：

• 使用者花費更多的時間在你的服務上
• 潛在客戶的跳出率的降低
• 轉化率的提升
• 更多回頭客

大部分PWA的專案都有很高的轉化率。取決於你的目標，你可以優先選擇部分PWA的功能，讓你的業務更好。PWA的功能可以獨立的去應用。

一個開啟速度快的網站的業務影響

首先統計你的網站當前的轉化率以及收入，然後根據core web vitals的相關指標去優化你的站點，再觀察每日轉化率和收入的變化。

ebay經過一系列對網站的優化，得出了一個他們的結論，每100ms的速度提升，可以帶來0.5%的下單量的提升。

一個可安裝的web站點的業務影響

為什麼你希望使用者安裝你的PWA應用？為了讓他們更容易回到你的站點。一個安卓App的安裝大致有三個步驟：先去應用市場搜尋App，下載，安裝App。一個PWA的App的安裝就很簡單，直接點選一個按鈕即可，使用者無需離開當前會話。

一旦安裝了，使用者只需點選桌面的圖示即可啟動，App之間的切換也和原生一致，系統的搜尋也可以搜到。開啟的介面也無需擔心會有瀏覽器的位址列之類的，可以採用standalone的方式啟動，與原生應用一樣。

願意安裝PWA的使用者，一般都是你的深度使用者，他們會花更多的時間在這個上面，也會經常使用。

為了讓你的PWA可安裝，需要達到一些條件，當這些條件滿足了之後，你可以提示使用者安裝，在不同的平臺上做不同的提示，如下圖所示：

一旦你開始提示使用者安裝，你就需要去設定一些埋點統計，看看多少人安裝了，這些安裝的使用者又是如何使用的。

為了讓更多的使用者安裝，你可能會嘗試不同的文案或者樣式。

為了理解使用者從哪裡離開的，改善使用者留存，安裝程式可以加入以下四個指標：

• 有資格安裝的使用者數（滿足了可安裝的條件）
• 點選安裝提示的使用者數
• 點選了接收或者拒絕的使用者數
• 成功安裝的使用者數

你可以採取更謹慎的做法，剛開始只給一小部分使用者去提示安裝。

一段時間過後，你可以收集到很多統計資料，這樣就能分析出從圖示點選開啟網站的使用者是如何操作的，這批使用者是否更深度使用了？是否轉化率提升了？

為了知道哪些使用者安裝了，你可以去監聽 appinstalled 的事件。也可以用js api去檢測當前是否是standalone視窗（這表明是從桌面圖示開啟的）。然後用這些資料做更詳細的分析。

安裝是一個非常棒的方式，讓使用者可以回到你的站點，提升使用者的忠誠度。你也可以給這些使用者提供一些個性化的體驗。

即使你已經有了原生APP，你也可以去嘗試PWA的方式，先提示使用者安裝原生APP，如果使用者不願意去下載，再提示安裝PWA的版本。有這樣一部分使用者屬於中等深度使用者，不希望去下載一個原生App，更能接受PWA這種只在桌面增加一個圖示，更加輕量。

一個可靠的網站的業務影響

如果一個遊戲可以提供離線模式，那麼使用者玩的頻率會更高一些。網路的可靠性是一個很大的機會，特別是對於一些網速較慢的國家，比如印度。如果你的App支援離線，或者低速網路正常使用，受眾會更廣。

當你去開啟一個從應用市場下載的APP，你更期待它不需要聯網就能正常開啟和使用。PWA的應用也是一樣的。

至少，提示使用者網路連線已斷開，也比一個空白頁面要好很多。很多現實場景，即使沒有網路也希望可以正常使用，比如：登機牌，購物車等。

當你已經實施了離線的方案，你可以去統計看看多少使用者是離線使用的，這些使用者是否一直停留著直到網路恢復。

一個親密互動的網站的業務影響

推送通知可以讓使用者實時的瞭解到最新的訊息，也可以包含一些個性化的內容。

需要注意的是，不要一上來就讓使用者註冊，僅僅為了收訊息通知，等使用者體驗過之後，在合適的時機去提示使用者。通知的內容也有一定講究，儘可能的是使用者最希望看到的，比如截止時間，火車票行程等。

為了統計推送通知的有效性，可以定製以下指標：

• 有資格獲得推送通知的使用者數
• 點了通知提示的使用者數
• 授權推送通知許可權的使用者數
• 拒絕推送通知的使用者數
• 參與推送通知的使用者數
• 從推送通知帶來的使用者的轉化率

PWA中的P的含義：漸進式啟動，逐個功能增加

PWA是現代的站點，受益於瀏覽器的支援，結合了使用者最愛的原生APP的諸多特性，它利用了一系列的最佳體驗和現代Web Api，可以單獨的整合和實施，根據你的業務來排優先順序。

為了加快網站的現代化進度，讓它成為一個真正的PWA應用，可以嘗試逐個功能去增加。首先要去找到你的使用者覺得價值最大的功能，把這些資訊給到設計師和開發者，最後不要忘了去統計一下你的PWA賺了多少額外的錢。

總結

從Chrome的版本更新，我們可以看到很明顯的趨勢，谷歌已經開始在PWA上下狠手了，以前沒有一個明顯的安裝按鈕，現在直接放在了導航欄右側。在使用PWA之前，先了解它對業務的影響至關重要，這樣才能明確你是否需要使用它。與小程式不同，各家都是不同的標準，PWA的標準完全由W3C定製。而且它也不依賴微信或者支付寶這種環境，每個手機都有瀏覽器，那就可以去安裝PWA的應用。作為一個平臺，微信和支付寶都沒有能力跟上web標準的定製，瀏覽器的更新永遠是走在最前面，而且PWA也可以在微信和支付寶中執行，唯一的缺陷在於ios的webview目前還不支援service worker，無法做到離線，相信也就是這幾年的事情了，蘋果也在推進這一塊，儘早的將你的站點改變成PWA的應用更能適應未來的環境。

參考

https://web.dev/drive-business-success/