過去,應用程式安裝程序僅適用於平台專屬應用程式。現今的網頁應用程式提供可安裝體驗,而這類體驗的整合性和可靠性與平台專用應用程式相同。
你可以透過不同方式達成此目的:
打造不同的發布管道能有效觸及大量使用者,但選擇要宣傳 PWA 的正確策略並不容易。
本指南將介紹如何結合不同安裝選項來提升安裝率的最佳做法,避免發生平台競爭及競食效應。涵蓋的安裝項目包括從瀏覽器和 App Store 安裝的 PWA,以及平台專屬應用程式。
為什麼要選擇可安裝的網頁應用程式?
已安裝的漸進式網頁應用程式會在獨立視窗中執行,而非在瀏覽器分頁中執行。可讓使用者從主畫面、座架、工作列或檔案櫃啟動。只要使用裝置搜尋應用程式,接著使用應用程式切換器快速切換畫面,就能輕鬆開啟裝置,彷彿置身其中。
但如果同時擁有可安裝的網頁應用程式和平台專屬應用程式,可能會讓使用者感到困惑。對部分使用者來說,平台專屬應用程式或許是最佳選擇,但也有些缺點:
- 儲存空間限制:安裝新應用程式後,系統可能會移除有價值的內容,藉此刪除其他應用程式或釋出空間。這對於低階裝置的使用者而言尤其不利。
- 可用頻寬:應用程式的下載程序可能費用高昂且速度過慢,對於網路連線速度緩慢和數據方案的使用者而言更是如此。
- 阻礙:使用者離開網站後前往應用程式商店下載應用程式,將會造成阻礙,並延遲使用者直接在網路上執行的操作。
- 更新週期:變更平台專屬應用程式時,可能需要經過應用程式審查程序,因此有可能會拖慢變更和實驗的速度 (例如 A/B 測試)。
在某些情況下,不會下載特定平台專屬應用程式的使用者比例可能會很大,例如認為他們不會經常使用應用程式,或是無法憑藉數 MB 的儲存空間或數據做為合理判斷。您可以透過幾種方式判斷這個區隔的大小,例如:使用 Analytics (分析) 設定來追蹤「僅限行動版網站」使用者的百分比。
如果此區隔的大小很可觀,表示您還需要提供其他安裝體驗的方式。
透過瀏覽器鼓勵安裝 PWA
如果您擁有高品質的 PWA,建議您宣傳該程式,而不是平台專屬應用程式。舉例來說,如果 PWA 未提供特定平台的應用程式功能,或是應用程式已有一段時間仍未更新,可能就較適合推廣這類應用程式。如果平台專屬應用程式沒有針對大螢幕進行最佳化調整,例如 ChromeOS 裝置,建議您也有助於鼓勵使用者安裝 PWA。
就部分應用程式而言,吸引特定平台的應用程式安裝次數是商業模式的重要組成部分。因此,就業務模式而言,鼓勵使用者安裝平台專屬應用程式是明智的選擇。不過,部分使用者可能會較願意留在網路上,如果能識別該區隔,PWA 提示將只會向對方顯示 (我們稱之為「PWA」)。
以 PWA 做為主要的可安裝體驗
只要 PWA 符合安裝條件,大部分瀏覽器就會顯示 PWA 可安裝的標示。舉例來說,電腦版 Chrome 的網址列會顯示可安裝的圖示,行動版網頁則會顯示迷你資訊列:
雖然這或許足以適用於部分體驗,但如果您的目標是提高 PWA 的安裝量,我們極力建議您監聽 BeforeInstallPromptEvent
,並按照宣傳 PWA 的模式進行安裝。
避免 PWA 對特定平台的應用程式安裝率造成負面影響
在某些情況下,您可以選擇透過 PWA 鼓勵安裝特定平台專屬應用程式,但在這種情況下,我們仍會建議為使用者提供可安裝 PWA 的機制。如果使用者無法或不想安裝您的平台專屬應用程式,可以透過這個備用選項,獲得類似的安裝體驗。
導入這項策略的第一步,是定義針對 PWA 向使用者顯示安裝宣傳素材資源的時機,定制適當的經驗法則。
舉例來說:PWA 使用者是指看過平台專屬應用程式安裝提示,但未安裝特定平台應用程式的使用者。他們曾回訪網站至少五次,或點按應用程式橫幅,但仍繼續使用網站。
接著,您可以按照下列方式實作啟發式:
- 顯示平台專屬的應用程式安裝橫幅。
- 如果使用者關閉橫幅,請設定內含該項資訊的 Cookie (例如
document.cookie = "app-install-banner=dismissed"
)。 - 使用其他 Cookie (例如
document.cookie = "user-visits=1"
) 追蹤使用者造訪網站的次數。 - 編寫
isPWAUser()
這類函式,以便使用先前儲存在 Cookie 中的資訊和getInstalledRelatedApps()
API,判斷使用者是否視為「PWA 使用者」。 - 當使用者執行有意義的動作時,請呼叫
isPWAUser()
。如果函式傳回 True,且先前已儲存 PWA 安裝提示,可以顯示 PWA 安裝按鈕。
透過應用程式商店推廣 PWA
應用程式商店專用的應用程式可以使用各種技術建構,包括 PWA 技術。您可以參閱「將 PWA 混入原生環境」一文中概略瞭解這方面適用的技術。
在本節中,我們會將商店中的應用程式分為以下兩個群組:
- 平台專屬應用程式:這類應用程式大多使用平台專屬程式碼建構而成。檔案大小會因平台而異,但在 Android 上通常是 10 MB 以上,在 iOS 上則為 30 MB。如果您沒有 PWA,或是特定平台專用的應用程式能提供更完整的功能組合,則建議您宣傳自家平台專屬應用程式。
- 輕量級應用程式:這類應用程式也可以使用平台專用的程式碼建構應用程式,但這些應用程式通常是以網路技術建構,並封裝在平台專屬的包裝函式中。完整的 PWA 也可以上傳至商店。(本文將於稍後討論)。有些公司選擇以「精簡版本」的形式提供這些服務,而其他公司則是在自家的旗艦 (核心) 應用程式中採用這種做法。
宣傳輕量級應用程式
根據 Google Play 研究,APK 大小每增加 6 MB,安裝轉換率就會降低 1%。換句話說,10 MB 應用程式的下載完成率可能比 100 MB 的應用程式高 30%!
為解決此問題,有些公司會採用 Trusted Web Activities (TWA) 功能,在 Play 商店提供輕量版應用程式。TWAs 將您的 PWA 納入等 WebView 中,而產生的應用程式大小通常只有幾 MB。
印度最大的餐旅公司 Oyo 開發了應用程式的精簡版本,並且透過臺灣國家/地區在 Play 商店上架。本文撰寫時,Oyo 應用程式僅有 850 KB,其 Android 應用程式的大小只有 7%。安裝後,應用程式便無法與 Android 應用程式區分:
Oyo 在商店中同時保留了旗艦版和「精簡版」兩個版本,讓使用者享有選擇。
提供精簡的網路體驗
與高階手機使用者相比,低階裝置的使用者可能會更願意下載輕量版應用程式。因此,如果能識別使用者的裝置,就能優先使用輕量應用程式安裝橫幅,而非其他平台專屬應用程式版本。
在網路上,還可取得裝置信號,並大致對應至裝置類別 (例如「高」、「中期」或「低」)。您可以透過 JavaScript API 或用戶端提示,以不同方式取得這項資訊。
使用 JavaScript
使用 navigator.hardwareConcurrency、navigator.deviceMemory 和 navigator.connection 等 JavaScript 屬性,分別取得裝置 CPU、記憶體和網路狀態的相關資訊。例如:
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`
使用用戶端提示
您也可以透過用戶端提示,在 HTTP 要求標頭中推論裝置信號。以下說明如何透過用戶端提示,實作裝置記憶體的前一個程式碼:
首先,告訴瀏覽器您想在任何第一方要求的 HTTP 回應標頭中接收裝置記憶體提示:
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory
然後,您就會開始在 HTTP 要求的要求標頭中收到 Device-Memory
資訊:
GET /main.js HTTP/1.1
Device-Memory: 0.5
您可以在後端使用這項資訊,儲存具有使用者裝置類別的 Cookie:
app.get('/route', (req, res) => {
// Determine device category
const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';
// Set cookie
res.setCookie('Device-Category', deviceCategory);
…
});
最後,請建立自己的邏輯,將這些資訊對應至裝置類別,並在每一種情況中顯示相應的應用程式安裝提示:
if (isDeviceMidOrLowEnd()) {
// show "Lite app" install banner or PWA A2HS prompt
} else {
// show "Core app" install banner
}
結語
讓使用者的主畫面出現圖示,是最吸引人的應用程式功能之一。由於過去只有從應用程式商店安裝的應用程式才有可能採用這項做法,因此公司可能會認為,在應用程式商店中顯示應用程式安裝橫幅,就足以說服使用者安裝應用程式。目前,使用者可以透過更多方式安裝應用程式,包括在商店中提供輕量化的應用程式體驗,以及提示使用者直接從網站執行 PWA。