本頁面由 Cloud Translation API 翻譯而成。

顯示通知

Alexey Rodionov

Matt Gaunt

通知選項分為兩個部分，一個用於處理視覺層面 (這一節) 以及通知行為層面的說明 (下節說明)。

你在不同平台上，可以在各種瀏覽器中暢玩各種通知選項使用 Peter Beverloo 的通知產生器。

視覺選項

用來顯示通知的 API 非常簡單：

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

title 和 options 都是選用引數。

標題是字串，選項可以是下列任一項目：

{
  "//": "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>",
}

以下說明視覺選項：

使用通知的使用者介面。

標題和內文選項

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 通知，含有標題和內文。

通知內容，當 Chrome 開啟 Chrome 時，標題和內文中有許多文字 Linux：

在 Linux 中透過 Chrome 顯示長標題和內文的通知。

Linux 中的 Firefox 會收合內文，直到您將滑鼠遊標懸停在通知上，導致以下要展開的通知：

Linux 中的 Firefox 顯示長標題和內文的通知。

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

Windows 版 Firefox 中的相同通知看起來如下：

針對 Windows (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);

當你在 Linux 上使用 Chrome 時，系統會顯示以下通知：

和 Linux 上的 Firefox：

可惜的是，對於圖示的圖片大小並沒有完整的規範。

Android 似乎想要 64dp 的圖片 (為 64 像素的倍數與裝置像素比例的倍數)。

假設裝置的像素比例最高為 3，那麼圖示大小為 192 像素以上這要注意安全起見

徽章

badge 是一個小型單色圖示，用來描繪更多資訊通知來源：

const title = 'Badge Notification';

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

registration.showNotification(title, options);

截至目前為止，您只能透過 Android 版 Chrome 使用以下徽章。

其他瀏覽器 (或沒有這個徽章的 Chrome) 會顯示瀏覽器的圖示。

如同使用 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 上，唯一指南是並將寬度設為 450 dp

按照本指南的說明，建議使用 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);

您可以為每個動作定義 title、action (基本上是 ID)、icon 和 type。標題與圖示是指通知中顯示的內容，這個 ID 用於偵測使用者點選動作按鈕時 (詳情請參閱下一節)。類型 'button' 為預設值，可以省略。

當時僅編寫適用於 Android 的 Chrome 和 Opera 支援動作，

上例定義了四個動作，表示您可以定義更多動作如要瞭解瀏覽器會顯示的操作次數，您可以查看 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。看起來很稀奇。

以下是我們可以從這些差異中取得的最佳做法：

讓圖示採用一致的色彩配置，至少讓所有圖示保持一致向使用者顯示
請確保這類圖片支援單色，因為有些平台可能會以這種方式顯示這類廣告。
並測試一下大小，找出最適合您的選項。128 像素 × 128 像素適合我在 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 參數可讓您定義文字的顯示方向。從右到左或從左到右。

在測試過程中，系統似乎大部分取決於文字而非參數。根據規格，可建議瀏覽器如何設定版面配置選項但我覺得沒有差別

建議您盡可能定義是否允許，否則瀏覽器應根據而非提供文字

參數應設為 auto、ltr 或 rtl。

在 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);

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

音效

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

在撰寫期間，沒有任何瀏覽器支援這個選項。

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);

使用者體驗最佳做法

我們發現，通知功能最大的使用者體驗不佳，是其中缺乏具體資訊並以通知的形式顯示

請思考當初傳送推送訊息的原因，並確保所有通知選項，以便使用者瞭解他們閱讀該通知的原因。

說實話，我們很容易看到例子，並認為「我絕對不會出錯」。但這個做法落入這個陷阱

應避免的常見陷阱：

不要將網站放在標題或內文中。在瀏覽器發布的通知，因此請勿複製郵件。
請善用手邊的所有資訊，如果您傳送推送訊息的原因是有人不使用「新訊息」標題，而是向使用者傳送訊息和內文讀取。」使用「小明剛才傳送了新訊息」的標題並將通知內文設為部分。

瀏覽器和功能偵測

在本文撰寫期間，Google Chrome 與 Firefox 之間有顯著差異功能支援。

幸好，只要查看 window.Notification，就能偵測應用程式是否支援通知功能原型

假設我們想知道通知是否支援動作按鈕，我們會執行以下動作：

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

如此一來，我們就能變更對使用者顯示的通知。

如果透過其他選項，請按照上述步驟操作，並將 'actions' 替換為需要參數名稱