如何定義安裝策略

過去,只有平台專用應用程式才能安裝應用程式。現今的新式網頁應用程式提供可安裝的體驗,提供與平台專用應用程式同等的整合程度和可靠性。

做法有以下幾種:

擁有不同的發布管道能有效觸及大量使用者,但選擇正確的策略來推廣安裝 PWA 可能並不容易。

本指南將介紹結合各種安裝選項的最佳做法,協助您瞭解如何結合不同的安裝選項,進而提升安裝率,同時避免平台競爭與競食。安裝服務包括從瀏覽器和 App Store 安裝的 PWA,以及平台專用的應用程式。

為何要開放使用者安裝網頁應用程式?

您所安裝的漸進式網頁應用程式會在獨立視窗中執行,而非在瀏覽器分頁中執行。可從使用者的主畫面、座架、工作列或檔案櫃啟動。你可在裝置上搜尋這些應用程式,並利用應用程式切換器進行跳轉,感覺就像是安裝在裝置上的那樣。

但同時擁有可安裝的網頁應用程式和平台專屬應用程式,會讓使用者感到困惑。某些使用者的平台專用應用程式或許是最理想的選擇,但對某些使用者而言,這類應用程式可能會有以下缺點:

  • 儲存空間限制:安裝新的應用程式可能意味著刪除其他應用程式,或藉由移除重要內容清理空間。這對低階裝置使用者來說尤其不利。
  • 可用的頻寬:下載應用程式可能需要耗費大量資金和緩慢,對連線速度緩慢和昂貴數據方案的使用者而言更是如此。
  • 便利性:離開網站並前往商店下載應用程式會帶來額外的阻礙,反而會延遲使用者直接在網路中執行的動作。
  • 更新週期:在平台專屬應用程式中進行變更時,您可能需要經歷應用程式審查程序,這可能會導致變更和實驗 (例如 A/B 版本測試) 速度變慢。

某些情況下,不下載特定平台應用程式的使用者比例可能相當龐大。舉例來說,有些使用者認為他們不常使用應用程式,或無法合理消耗幾 MB 儲存空間或數據。您可透過多種方式決定這個區隔的大小,例如透過 Analytics 設定來追蹤「僅限行動版網站」的百分比使用者。

如果這個區隔的大小相當大,這表示您需要提供其他安裝體驗的方式。

鼓勵透過瀏覽器安裝 PWA

如果您使用高品質的 PWA,建議您透過特定平台專用應用程式,提高安裝量。例如,PWA 未提供特定平台專屬應用程式的功能,或是該應用程式已有一段時間未更新。此外,如果平台專屬應用程式並未針對大螢幕裝置 (例如 ChromeOS) 進行最佳化調整,建議您鼓勵使用者安裝 PWA。

對某些應用程式而言,提升特定平台的應用程式安裝量是商業模式的關鍵要素,在這種情況下,不妨鼓勵使用者安裝特定平台專用的應用程式。不過,有些使用者可能更習慣在網路上停留。如果系統能辨識出該片段,就只會向對方顯示 PWA 提示 (我們稱之為「PWA」的備用選項)。

將 PWA 做為主要安裝體驗

一旦 PWA 符合安裝條件,大多數瀏覽器就會顯示 PWA 的安裝指示。舉例來說,電腦版 Chrome 會在網址列顯示可安裝圖示,在行動裝置上則會顯示迷你資訊列:

標準 Chrome 安裝提示 (稱為迷你資訊列)
迷你資訊列。

雖然這一點已經足夠某些體驗,但如果您的目標是提升 PWA 的安裝量,我們強烈建議您監聽 BeforeInstallPromptEvent,並採用提升 PWA 安裝作業的模式

防止 PWA 對特定平台的應用程式安裝率造成負面影響

在某些情況下,您可以選擇透過 PWA 鼓勵使用者安裝您的平台專屬應用程式,但我們仍建議您提供機制讓使用者安裝您的 PWA。如果使用者無法或不想安裝您的平台專屬應用程式,就可以使用這個備用選項,獲得類似的安裝體驗。

實作這項策略的第一步,是定義經驗法則,定義向使用者顯示 PWA 安裝促銷活動的時機。

舉例來說:PWA 使用者是看到特定平台的應用程式安裝提示,但未安裝平台專屬應用程式的使用者。他們曾回訪網站至少五次,或是點選了應用程式橫幅,但仍繼續使用網站。

接著,您可以透過下列方式實作經驗法則:

  1. 顯示平台專屬的應用程式安裝橫幅。
  2. 如果使用者關閉橫幅,請使用這項資訊設定 Cookie (例如 document.cookie = "app-install-banner=dismissed")。
  3. 使用其他 Cookie 追蹤網站的使用者人數 (例如 document.cookie = "user-visits=1")。
  4. 編寫 isPWAUser() 之類的函式,同時使用 Cookie 先前儲存的資訊和 getInstalledRelatedApps() API 來判斷使用者是否屬於「PWA 使用者」。
  5. 當使用者執行有意義的動作時,請呼叫 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%

為瞭解決這個問題,部分公司會利用 PWA,透過受信任的網路活動 (TWA) 在 Play 商店提供輕量版應用程式。TWAs 將您的 PWA 納入類似元件的 WebView,因此產生的應用程式大小通常只有幾 MB。

Oyo 是印度數一數二的餐旅公司,他們製作了應用程式的精簡版本,並透過臺灣在 Play 商店上架。撰寫這篇文章時,Oyo 應用程式只有 850 KB,但只有 7% 的 Android 應用程式大小。安裝完成後,使用者就會與他們的 Android 應用程式有所區隔:

OYO Lite 實際使用的情形。

Oyo 推動了旗艦版與「菁英」徽章提供多種應用程式版本,為使用者提供多種選擇。

提供輕量化的網路體驗

直覺上來說,相較於高階手機使用者,低階裝置的使用者下載簡易版應用程式的可能性更高。因此,如果可以找出使用者的裝置,就能優先使用輕量應用程式安裝橫幅,而非平台專屬應用程式版本。

在網路上,你可以取得裝置信號,並將信號大概對應至裝置類別 (例如「高」、「中」或「低」)。您可以使用 JavaScript API 或用戶端提示,以不同的方式取得這項資訊。

使用 JavaScript

使用 navigator.hardwareConcurrencynavigator.deviceMemorynavigator.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 新增至主畫面。