顯示通知

Alexey Rodionov
Alexey Rodionov
Matt Gaunt

通知選項分為兩個部分,一個專門處理視覺層面 (本節),另一個則說明通知的行為層面 (下一節)。

您可以利用 Peter Beverloo通知產生器,在各種平台上嘗試各種通知選項。

視覺選項

顯示通知的 API 非常簡單:

<ServiceWorkerRegistration>.showNotification(<title>, <options>);

titleoptions 都是選用引數。

標題是字串,選項可以是下列任一項目:

{
  "//": "Visual Options",
  "body": "<String>",
  "icon": "<URL String>",
  "image": "<URL String>",
  "badge": "<URL String>",
  "dir": "<String of 'auto' | 'ltr' | 'rtl'>",
  "timestamp": "<Long>"

  "//": "Both visual & behavioral options",
  "actions": "<Array of Strings>",
  "data": "<Anything>",

  "//": "Behavioral Options",
  "tag": "<String>",
  "requireInteraction": "<boolean>",
  "renotify": "<Boolean>",
  "vibrate": "<Array of Integers>",
  "sound": "<URL String>",
  "silent": "<Boolean>",
}

以下說明各個圖表選項:

分割「通知」的 UI。

標題和內文選項

以下是 Chrome Windows 版 Chrome 中缺少標題和選項的通知外觀:

Windows 版 Chrome 中沒有標題和選項的通知。

如您所見,系統會用瀏覽器名稱做為標題,「新增通知」預留位置則用做通知主體。

如果裝置已安裝漸進式網頁應用程式,系統會採用網頁應用程式名稱,而非瀏覽器名稱:

顯示網頁應用程式名稱的通知,而非瀏覽器名稱。

如果我們執行以下程式碼:

const title = 'Simple Title';

const options = {
  body: 'Simple piece of body text.\nSecond line of body text :)',
};

registration.showNotification(title, options);

是在 Linux 的 Chrome 中顯示以下通知:

在 Linux 上的 Chrome 中顯示標題和內文的通知。

在 Linux 上的 Firefox 中看起來會像這樣:

在 Linux 上的 Firefox 顯示標題和內文的通知。

以下是在 Linux 上的 Chrome 中,標題和內文含有許多文字的通知:

在 Linux 上的 Chrome 顯示長標題和內文的通知。

Linux 上的 Firefox 會收合內文,直到您將通知懸停在通知上方,使通知展開為止:

在 Linux 上的 Firefox 顯示含有長標題和內文的通知。

在 Linux 上的 Firefox 顯示長標題和內文的通知,滑鼠遊標懸停在通知上。

在 Windows 上的 Firefox 中相同的通知看起來會像這樣:

Windows 版 Firefox 中的標題和內文通知。

在 Windows 上使用 Firefox 顯示長標題和內文的通知。

您應該會看到同一個通知,同樣的通知在不同瀏覽器中的外觀可能有所不同。在不同平台的同一個瀏覽器中,外觀也可能有差異。

在適用這些平台的平台上,Chrome 和 Firefox 會使用系統通知和通知中心。

舉例來說,macOS 的系統通知不支援圖片和動作 (按鈕和內嵌回覆)。

此外,Chrome 也提供適用於所有桌面平台的自訂通知。只要將 chrome://flags/#enable-system-notifications 標記設為 Disabled 狀態,即可啟用該功能。

圖示

icon 選項基本上是小型圖片,可顯示在標題和內文旁邊。

在程式碼中,您需要提供要載入的圖片網址:

const title = 'Icon Notification';

const options = {
  icon: '/images/demos/icon-512x512.png',
};

registration.showNotification(title, options);

Chrome Linux 版 Chrome 會顯示以下通知:

Linux 上的 Chrome 顯示圖示通知。

和 Linux 上的 Firefox:

Linux 上的 Firefox 顯示圖示通知。

可惜沒有針對圖示尺寸制定明確的規範。

Android 似乎需要 64dp 的圖片 (也就是裝置像素比例 64 px 的倍數)。

假設裝置的像素比例最高為 3,圖示大小為 192 像素以上才是安全的。

徽章

badge 是一個小型單色圖示,用來向使用者顯示更多資訊,說明通知來源:

const title = 'Badge Notification';

const options = {
  badge: '/images/demos/badge-128x128.png',
};

registration.showNotification(title, options);

目前,您只能在 Android 版 Chrome 上使用徽章。

Android 版 Chrome 顯示標記通知。

使用其他瀏覽器 (或沒有徽章的 Chrome) 時,您會看到瀏覽器的圖示。

Android 版 Firefox 的通知顯示標記。

icon 選項一樣,系統並未針對要使用的尺寸制定實際規範。

詳細瀏覽 Android 指南中的建議大小是 24 像素乘以裝置的像素比例。

畫質必須是 72 像素以上 (假設裝置像素比例上限為 3)。

圖片

image 選項可用來向使用者顯示較大的圖片。向使用者顯示預覽圖片特別實用。

const title = 'Image Notification';

const options = {
  image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg',
};

registration.showNotification(title, options);

在 Linux 版的 Chrome 中,通知看起來會像這樣:

Linux 上的 Chrome 顯示圖片通知。

在 Android 版 Chrome 中,裁剪和比例有所不同:

Android 版 Chrome 中的圖片通知。

由於電腦和行動裝置的比例差異,因此我們很難提供指引。

由於電腦版 Chrome 不會填滿可用空間,且比例為 4:3,建議您提供符合這個比例的圖片,並允許 Android 裁剪圖片。儘管如此,image 選項可能仍會變更。

在 Android 中,唯一的引導線是 450dp 的寬度。

根據此準則,寬度至少為 1350 像素的圖片是好看的。

動作 (按鈕)

您可以定義 actions 以在通知中顯示按鈕:

const title = 'Actions Notification';

const options = {
  actions: [
    {
      action: 'coffee-action',
      type: 'button',
      title: 'Coffee',
      icon: '/images/demos/action-1-128x128.png',
    },
    {
      action: 'doughnut-action',
      type: 'button',
      title: 'Doughnut',
      icon: '/images/demos/action-2-128x128.png',
    },
    {
      action: 'gramophone-action',
      type: 'button',
      title: 'Gramophone',
      icon: '/images/demos/action-3-128x128.png',
    },
    {
      action: 'atom-action',
      type: 'button',
      title: 'Atom',
      icon: '/images/demos/action-4-128x128.png',
    },
  ],
};

registration.showNotification(title, options);

您可以為每個動作定義 titleaction (基本上為 ID)、icontype。通知內容包含標題和圖示。偵測使用者是否點選了動作按鈕時會使用此 ID (詳情請參閱下一節)。由於 'button' 是預設值,因此可以省略類型。

目前僅撰寫 Chrome 和 Opera for Android 支援動作。

在上述範例中,目前已定義四個動作,說明您可以定義的動作多於顯示的。如要瞭解瀏覽器顯示的動作數,可以勾選 window.Notification?.maxActions

const maxVisibleActions = window.Notification?.maxActions;

if (maxVisibleActions) {
  options.body = `Up to ${maxVisibleActions} notification actions can be displayed.`;
} else {
  options.body = 'Notification actions are not supported.';
}

在電腦上,動作按鈕圖示會顯示其顏色 (請見粉紅色甜甜圈):

Linux 上的 Chrome 顯示動作按鈕通知。

在 Android 6 以下版本中,圖示會依照系統色彩配置變色:

在 Android 版 Google Chrome 中顯示動作按鈕的通知。

在 Android 7 以上版本中,完全不會顯示動作圖示。

Chrome 希望能根據 Android 變更電腦版行為 (也就是套用適當的色彩配置,讓圖示符合系統的外觀和風格)。在此期間,您可以將圖示設定為 #333333 顏色,以搭配 Chrome 的文字顏色。

此外,在 Android 裝置上圖示可呈現清晰的視覺效果,而無法在電腦上。

電腦版 Chrome 支援的畫面尺寸為 24px x 24px。難以理解是 Android 上的位置

我們可從以下差異中汲取的最佳做法:

  • 請維持一致的圖示色彩配置,至少向使用者可持續顯示所有圖示。
  • 請確認這些按鈕是以單色顯示,因為某些平台可能會以這種方式顯示。
  • 請測試您的尺寸,看看何者最有效。128px × 128px 在 Android 上表現不錯,但在電腦上的品質不佳。
  • 預期您的動作圖示會完全無法顯示。

通知規格正在探索如何定義多種大小的圖示,但看起來在達成任何協議前可能過一段時間。

動作 (內嵌回覆)

您可以定義含有 'text' 類型的動作,在通知中新增內嵌回覆:

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  image: '/images/demos/avatar-512x512.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
    }
  ],
};

registration.showNotification(title, options);

這在 Android 上的外觀如下:

含有回覆動作按鈕的 Android 通知。

點選動作按鈕就會開啟文字輸入欄位:

Android 通知,包含已開啟的文字輸入欄位。

您可以自訂文字輸入欄位的預留位置:

const title = 'Alexey Rodionov';

const options = {
  body: 'How are you doing? )',
  icon: '/images/demos/avatar-512x512.jpg',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'reply',
      type: 'text',
      title: 'Reply',
      icon: '/images/demos/action-5-128x128.png',
      placeholder: 'Type text here',
    }
  ],
};

registration.showNotification(title, options);

Android 通知,包含文字輸入欄位的自訂預留位置。

在 Windows 版 Chrome 中,您不必點選動作按鈕,系統一律會顯示文字輸入欄位:

含有文字輸入欄位和回覆動作按鈕的 Windows 通知。

你可以新增多個內嵌回覆,或是合併按鈕和內嵌回覆:

const title = 'Poll';

const options = {
  body: 'Do you like this photo?',
  image: '/images/demos/cat-image.jpg',
  icon: '/images/demos/icon-512x512.png',
  badge: '/images/demos/badge-128x128.png',
  actions: [
    {
      action: 'yes',
      type: 'button',
      title: '👍 Yes',
    },
    {
      action: 'no',
      type: 'text',
      title: '👎 No (explain why)',
      placeholder: 'Type your explanation here',
    },
  ],
};

registration.showNotification(title, options);

含有文字輸入欄位和兩個動作按鈕的 Windows 通知。

方向

dir 參數可讓您定義文字的顯示方向 (從右到左或從左到右)。

在測試中,我們發現方向主要是由文字而非參數決定。根據規格,這是建議瀏覽器如何版面配置選項 (例如動作),但我看到的沒有任何差異。

建議您盡可能定義。否則,瀏覽器應根據提供的文字執行正確的作業。

參數應設為 autoltrrtl

在 Linux 上使用 Chrome 時,系統使用從右到左的語言顯示樣子:

在 Linux 上使用 Chrome 顯示由右至左語言的通知。

在 Firefox 中,將滑鼠遊標懸停在上方時,部分會顯示:

在 Linux 上的 Firefox 顯示由右至左顯示的語言通知。

震動

您可以使用震動選項定義在通知顯示時執行的震動模式,並假設使用者的目前設定允許震動 (即裝置不設為靜音模式)。

震動選項的格式應使用數字陣列,說明裝置應震動的毫秒數,並在後方顯示裝置「不得」震動的毫秒數。

const title = 'Vibrate Notification';

const options = {
  // Star Wars shamelessly taken from the awesome Peter Beverloo
  // https://tests.peter.sh/notification-generator/
  vibrate: [
    500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170,
    40, 500,
  ],
};

registration.showNotification(title, options);

這項設定只會影響支援震動的裝置。

音效

音效參數可讓您定義收到通知時要播放的音效。

且在本文撰寫期間,沒有任何瀏覽器支援這個選項。

const title = 'Sound Notification';

const options = {
  sound: '/demos/notification-examples/audio/notification-sound.mp3',
};

registration.showNotification(title, options);

時間戳記

時間戳記可讓您向平台指出事件發生的時間,讓平台傳送推播通知。

timestamp 應為世界標準時間 00:00:00 之後的毫秒數,也就是 1970 年 1 月 1 日 (即 UNIX 紀元)。

const title = 'Timestamp Notification';

const options = {
  body: 'Timestamp is set to "01 Jan 2000 00:00:00".',
  timestamp: Date.parse('01 Jan 2000 00:00:00'),
};

registration.showNotification(title, options);

使用者體驗最佳做法

通知中最大的使用者體驗失敗,就是通知顯示的資訊缺乏具體性。

建議您一開始先考量傳送推送訊息的原因,並確認所有通知選項皆已運用,讓使用者瞭解他們閱讀通知的原因。

老實說,很容易看到範例,然後思考「我永遠不會犯錯」。但實際上不是你可能會想的

應避免的常見錯誤:

  • 也請勿將網站放在標題或內文中。瀏覽器會在通知中加入您的網域,因此「不要複製網域」
  • 利用現有資訊。如果您傳送推送訊息的原因是有人傳送了訊息給使用者,而不是使用「New Message」和「Click here to read it.」的標題,請使用「John 剛剛傳送了 a new message」標題,並將通知內文設為訊息的一部分。

瀏覽器和功能偵測

在撰寫本郵件時,Chrome 與 Firefox 對通知功能的支援功能有相當大的差異。

幸好,您可以查看 window.Notification 原型,藉此偵測應用程式是否支援通知功能。

假設我們想知道某個通知是否支援動作按鈕,我們會執行以下操作:

if ('actions' in window.Notification?.prototype) {
  // Action buttons are supported.
} else {
  // Action buttons are NOT supported.
}

透過這項,我們可以變更向使用者顯示的通知。

使用其他選項時,請按照上述步驟操作,並將 'actions' 替換為所需的參數名稱。

後續步驟

程式碼研究室