漸進式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-busines...