Progressive Web App 自主管理推薦安裝提示 從程式到推薦介面設計模式全解析

me
林彥成
2021-09-04 | 4 min.
文章目錄
  1. 1. Promoting installation 推薦安裝提示
  2. 2. beforeinstallprompt 程式解析
    1. 2.1. 前置準備
    2. 2.2. 自訂安裝按鈕
    3. 2.3. 透過網址列或瀏覽器安裝
  3. 3. Promoting 推薦介面設計模式
    1. 3.1. 瀏覽器自動提示
    2. 3.2. 簡易安裝按鈕
    3. 3.3. 固定的 Header 提示
    4. 3.4. 融入到選單
    5. 3.5. 到達頁面
    6. 3.6. Banner 提示
    7. 3.7. Temporary UI
    8. 3.8. 轉換後提示
    9. 3.9. 購買或結帳流程中適度推廣
    10. 3.10. 登入頁面過程中提示
    11. 3.11. 把推廣融入在內容中

Promoting installation 推薦安裝提示

當我們的 Progressive Web App 滿足了安裝前的審核標準,瀏覽器就會觸發 beforeinstallprompt 這個事件,當事件被觸發後,才能夠進行後續的安裝過程。

所以在實作安裝流程上會分成下面三個步驟:

  1. 監聽 beforeinstallprompt 這個事件
  2. 觸發後記得把事件存起來,後續在安裝的流程上會需要
  3. 告知使用者,這個 App 可以被安裝,並提供按鈕讓使用者繼續後續的相關流程

beforeinstallprompt 程式解析

透過程式的流程來觸發相關安裝流程,不管按鈕打算放在哪都要先隱藏,因為 PWA 在還沒達到 A2HS 的安裝前的審核標準前並無法被安裝。

安裝流程主要會有兩種

  1. 透過自訂按鈕安裝流程
  2. 透過網址列或是瀏覽器協助安裝

前置準備

1
<button class="add-button">Add to home screen</button>
1
2
3
let deferredPrompt;
const addBtn = document.querySelector(".add-button");
addBtn.style.display = "none";

自訂安裝按鈕

  1. 宣告 deferredPrompt 變數儲存事件
  2. 收到 beforeinstallprompt 觸發後要 e.preventDefault();,因為 Chrome 67 以前的版本會自動觸發內建提示視窗
  3. 要記得把事件存起來,後續在安裝的流程上會需要
  4. 讓 “安裝按鈕” 顯示
  5. 點選後 “安裝按鈕” 隱藏 (也可以停用)
  6. 點選按鈕後才觸發提示視窗
  7. 等待使用者確認或拒絕
  8. 從 userChoice 的結果判斷是否安裝成功
  9. deferredPrompt 用過就不能再用了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// https://github.com/mdn/pwa-examples/blob/master/a2hs/index.js

// 1. 宣告變數儲存事件
let deferredPrompt;

window.addEventListener("beforeinstallprompt", (e) => {
// 2. 停用 Chrome 67 前的公版提示視窗
e.preventDefault();
// 3. 記得把事件存起來,後續在安裝的流程上會需要
deferredPrompt = e;
// 4. 讓 "安裝按鈕" 顯示
addBtn.style.display = "block";

addBtn.addEventListener("click", (e) => {
// 5. 點選後 "安裝按鈕" 隱藏 (也可以停用)
addBtn.style.display = "none";
// 6. 點選按鈕後才觸發提示視窗
deferredPrompt.prompt();
// 7. 等待使用者確認或拒絕
deferredPrompt.userChoice.then((choiceResult) => {
// 8. 從 userChoice 的結果判斷是否安裝成功
if (choiceResult.outcome === "accepted") {
console.log("User accepted the A2HS prompt");
} else {
console.log("User dismissed the A2HS prompt");
}
// 9. 用過就不能再用了
deferredPrompt = null;
});
});
});

透過網址列或瀏覽器安裝

透過網址列、瀏覽器元件自動的提示、瀏覽器中的選單進行安裝的話,開發者無法知道是否 App 已經被安裝,所以需要透過 appinstalled 這個事件。

1
2
3
4
5
6
7
8
window.addEventListener("appinstalled", () => {
// "安裝按鈕" 隱藏 (也可以停用)
addBtn.style.display = "none";
// 用過就不能再用了
deferredPrompt = null;
// 安裝成功
console.log("PWA was installed");
});

Promoting 推薦介面設計模式

PWA 安裝的流程介面設計上 Google 有幾個建議

  • 只在滿足安裝前的審核標準並觸發 beforeinstallprompt 才顯示
  • 讓安裝建議的提示和原來的使用者歷程分開,減少影響相關的互動與轉化
  • 提供並且記住使用者拒絕或延後安裝的選擇結果,只在使用者狀態改變時再次提示,像是登入後或著是完成一次購買時
  • 可以運用各種介面設計模式來提示安裝,但盡量不要放太多

底下圖片皆取自於 https://web.dev/

瀏覽器自動提示

當 PWA 滿足安裝前的審核標準時,大部分瀏覽器會自動地跳出可以被安裝的提示。

桌面版本提示:

Photo Credit: https://web.dev/

手機版本提示:

Photo Credit: https://web.dev/

簡易安裝按鈕

最簡單的 UX 就是透過一個安裝按鈕來提示,簡易安裝按鈕。

Photo Credit: https://web.dev/

固定的 Header 提示

像是購物網站或是論壇入口,就蠻適合將安裝按鈕提示放在固定的 Header 上進行提示。

Photo Credit: https://web.dev/

透過適當的 RWD 設計,讓按鈕可以更好看。

Photo Credit: https://web.dev/

融入到選單

如果網站本來就有選單,可以透過設計把按鈕融入到選單中,記得不要打擾使用者使用選單並透過文案告知安裝好處。

Photo Credit: https://web.dev/

到達頁面

當使用者進入到達頁面時,蠻適合趁機推廣安裝,此時記得

  • 配合使用者導流進來的關鍵字給一個想要安裝的理由
  • 確認提示的位置夠明顯,推廣的標語要夠明確

Photo Credit: https://web.dev/

大部分的手機使用者已經習慣 banner 跳出提示了,所以其實也可以這麼做,但有兩個重點:

  • 但盡量等到使用者對您的網站表現出興趣後,再顯示 Banner
  • 如果使用者關閉了,就不要再次顯示。除非觸發了一個轉化事件,例如在購買或註冊帳戶
  • 簡要說明安裝 PWA 的價值

Photo Credit: https://web.dev/

Temporary UI

透過彈出通知提示,幾點注意事項

  • 4 到 7 秒,有足夠的時間查看它並做出反應但又不妨礙操作
  • 避免將其顯示在其他臨時 UI 上
  • 等到有接受強烈興趣信號後再使用此模式,例如重複訪問、用戶登錄或類似的轉化事件

Photo Credit: https://web.dev/

轉換後提示

像是購買後的結帳清單頁面,使用者明顯完成一次轉化,代表其實有興趣,這時候就蠻適合推薦。

Photo Credit: https://web.dev/

購買或結帳流程中適度推廣

如果安裝能有獨特的優惠,或是能夠有相關優點就要透過提示告知,像是能夠接收推播來追蹤商品等等,但要注意不要影響了原來的使用者歷程。

Photo Credit: https://web.dev/

登入頁面過程中提示

考慮在登入頁面中置入推薦,因為使用者已完成註冊,這時候推薦其實不影響,算是適合放置的地方。

Photo Credit: https://web.dev/

把推廣融入在內容中

新聞文章或其他訊息列表間出現一個推薦安裝的訊息,底下三個注意事項:

  • 限制頻率
  • 能夠取消
  • 記住使用者曾選擇關閉

Photo Credit: https://web.dev/


喜歡這篇文章,請幫忙拍拍手喔 🤣

share