iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

前端三分鐘 X Progressive Web App 30 天製造解密系列 第 3

Progressive Web App 自主管理推薦安裝提示 (3)

Promoting installation 推薦安裝提示

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

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

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

beforeinstallprompt 程式解析

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

安裝流程主要會有兩種

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

前置準備

<button class="add-button">Add to home screen</button>
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 用過就不能再用了
// 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 這個事件。

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 跳出提示了,所以其實也可以這麼做,但有兩個重點:

  • 但盡量等到使用者對您的網站表現出興趣後,再顯示 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/


上一篇
Progressive Web App 加入主畫面 : PWA 究竟加入和安裝了什麼 (2)
下一篇
Progressive Web App Service Worker (4)
系列文
前端三分鐘 X Progressive Web App 30 天製造解密30

尚未有邦友留言

立即登入留言