過去,應用程式安裝作業只能在特定平台的應用程式中執行。如今,新一代的網頁應用程式提供可安裝的使用體驗,可提供與特定平台應用程式相同程度的整合和可靠性。
您可以透過以下不同方式完成這項操作:
使用不同的發布管道是接觸大量使用者的強大方法,但選擇正確的策略來宣傳 PWA 安裝作業可能相當困難。
本指南將探討如何結合不同安裝選項,提高安裝率並避免平台競爭和自相殘殺,涵蓋的安裝服務包括從瀏覽器和 App Store 安裝的 PWA,以及特定平台的應用程式。
為什麼要讓網頁應用程式可供安裝?
已安裝的漸進式網頁應用程式會在獨立視窗中執行,而非在瀏覽器分頁中執行。使用者可從主畫面、Dock、工作列或 Shelf 啟動這些應用程式。使用者可以在裝置上搜尋這些應用程式,並透過應用程式切換器在各應用程式之間切換,讓應用程式就像是裝置的一部分。
不過,如果同時提供可安裝的網頁應用程式和特定平台應用程式,使用者可能會感到困惑。對某些使用者來說,專屬平台的應用程式可能是最佳選擇,但對其他使用者來說,這類應用程式可能會帶來一些缺點:
- 儲存空間限制:安裝新應用程式可能會刪除其他應用程式,或移除有價值的內容來清理空間。這對低階裝置的使用者來說特別不利。
- 可用頻寬:下載應用程式可能會耗費大量時間,且費用不斐,尤其是對於連線速度緩慢且數據方案費用昂貴的使用者。
- 阻力:離開網站並前往商店下載應用程式會造成額外阻力,並延遲使用者可直接在網站上執行的動作。
- 更新週期:針對特定平台的應用程式進行變更時,可能需要經過應用程式審查程序,這可能會延緩變更和實驗 (例如 A/B 版本測試) 的速度。
在某些情況下,不下載特定平台應用程式的使用者百分比可能會很高,例如:使用者認為自己不會經常使用應用程式,或不願意花費數百兆位元組的儲存空間或資料。您可以透過多種方式判斷這個區隔的大小,例如使用 Analytics 設定追蹤「僅行動網站」使用者的百分比。
如果這個區隔的規模相當可觀,表示您需要提供其他安裝體驗的方式。
透過瀏覽器宣傳 PWA 安裝作業
如果您擁有高品質的 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 上通常會超過 10MB,在 iOS 上則超過 30MB。如果您沒有 PWA,或是平台專屬應用程式提供更完整的功能組合,不妨考慮宣傳您的平台專屬應用程式。
- 輕量應用程式:這類應用程式也可以使用平台專屬程式碼建構,但通常會使用網路技術建構,並以平台專屬包裝函式封裝。您也可以上傳完整的 PWA 至商店。(我們會在本文後面討論這項功能)。有些公司選擇以「精簡版」的形式提供這些服務,其他公司則將這類服務納入自家旗艦 (核心) 應用程式。
宣傳輕量應用程式
根據 Google Play 研究,APK 大小每增加 6 MB,安裝轉換率就會降低 1%。也就是說,10 MB 應用程式的下載完成率大約比 100 MB 應用程式高出 30%!
為解決這個問題,部分公司會利用自家的 PWA,透過 可信任的網路活動 (TWA) 在 Play 商店提供輕量版應用程式。TWA 會將 PWA 包裝在類似網頁檢視區塊的元件中,產生的應用程式大小通常只有幾 MB。
印度大型旅遊住宿公司 Oyo 建立了Lite 版應用程式,並使用 TWA 在 Play 商店上架。在撰寫本文時,Oyo 應用程式的大小只有 850 KB,僅為 Android 應用程式的 7%。安裝後,兩者幾乎沒有差異:
Oyo 在商店中保留了旗艦和「精簡版」應用程式版本,讓使用者自行選擇。
提供輕量網頁體驗
直覺來說,低階裝置的使用者可能比高階手機的使用者更傾向下載輕量版應用程式。因此,如果可以識別使用者的裝置,您可以將輕量版應用程式安裝橫幅視為優先,而非較重平台專屬應用程式版本。
在網站上,您可以取得裝置信號,並大致將這些信號對應至裝置類別 (例如「高」、「中」或「低」)。您可以透過不同的方式取得這類資訊,例如使用 JavaScript API 或用戶端提示。
使用 JavaScript
您可以使用 JavaScript 屬性 (例如 navigator.hardwareConcurrency、navigator.deviceMemory 和 navigator.connection),分別取得裝置 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 新增至主畫面。