開始使用 Notifications API

在本程式碼研究室中,您將使用 Notifications API 的基本功能來:

  • 要求傳送通知的權限
  • 傳送通知
  • 嘗試使用通知選項

瀏覽器支援

  • Chrome:20.
  • Edge:14。
  • Firefox:22。
  • Safari:7。

資料來源

系統會自動封鎖內嵌 Glitch 應用程式的通知,因此您無法在本頁面上預覽該應用程式。請改用以下做法:

  1. 按一下「Remix to Edit」,即可編輯專案。
  2. 如要預覽網站,請按下「View App」。然後按下「Fullscreen」圖示 全螢幕

Glitch 應會在新分頁中開啟:

螢幕截圖:顯示在新分頁中重新混合後的即時應用程式

在本程式碼研究室中,請修改本頁嵌入的 Glitch 中的程式碼。重新整理含有即時應用程式的新分頁,即可查看變更內容。

熟悉啟動應用程式及其程式碼

首先,請在新的 Chrome 分頁中查看即時應用程式:

  1. 按下 `Control+Shift+J` 鍵 (在 Mac 上為 `Command+Option+J` 鍵) 開啟開發人員工具。再按一下「Console」(控制台) 分頁標籤即可。

    控制台中應會顯示下列訊息:

    Notification permission is default

    如果您不知道這代表什麼意思,請放心,我們很快就會揭曉答案!

  2. 按一下直播應用程式中的按鈕:「要求傳送通知的權限」和「傳送通知」

    控制台會從幾個函式虛設常式 (requestPermissionsendNotification) 列印「TODO」訊息。以下是您在本程式碼研究室中實作的函式。

接著,我們來看看這個頁面中嵌入的 Glitch 中,範例應用程式的程式碼。開啟 public/index.js,並查看現有程式碼中的幾個重要部分:

  • showPermission 函式會使用 Notifications API 取得網站目前的權限狀態,並將其記錄到控制台:

    // Print current permission state to console;
    // update onscreen message.
    function showPermission() {
      let permission
    = Notification.permission;
      console
    .log('Notification permission is ' + permission);
      let p
    = document.getElementById('permission');
      p
    .textContent = 'Notification permission is ' + permission;
    }

    在要求權限之前,權限狀態為 default。在 default 權限狀態下,網站必須先要求並取得權限,才能傳送通知。

  • requestPermission 函式是 Stub:

    // Use the Notification API to request permission to send notifications.
    function requestPermission() {
      console
    .log('TODO: Implement requestPermission()');
    }

    您將在下一個步驟中實作此函式。

  • sendNotification 函式是 Stub:

    // Use the Notification constructor to create and send a new Notification.
    function sendNotification() {
      console
    .log('TODO: Implement sendNotification()');
    }

    您會在實作 requestPermission 後實作此函式。

  • window.onload 事件監聽器會在網頁載入時呼叫 showPermission 函式,在控制台和網頁上顯示目前的權限狀態:

    window.onload = () => { showPermission(); };

要求傳送通知的權限

在這個步驟中,您將新增功能,要求使用者授予傳送通知的權限。

您將使用 Notification.requestPermission() 方法觸發彈出式視窗,要求使用者允許或封鎖網站通知。

  1. 將 public/index.js 中的 requestPermission 函式暫存檔替換為以下程式碼:

    // Use the Notification API to request permission to send notifications.
    function requestPermission() {
     
    Notification.requestPermission()
       
    .then((permission) => {
          console
    .log('Promise resolved: ' + permission);
          showPermission
    ();
       
    })
       
    .catch((error) => {
          console
    .log('Promise was rejected');
          console
    .log(error);
       
    });
    }
  2. 重新載入您正在查看即時應用程式的 Chrome 分頁。

  3. 在直播應用程式介面中,按一下「要求傳送通知的權限」。畫面上會顯示彈出式視窗。

使用者可以對權限彈出式視窗做出三種回應之一。

使用者回應 通知權限狀態
使用者選取「允許」 granted
使用者選取「封鎖」 denied
使用者未做出選擇就關閉彈出式視窗 default

如果使用者按一下「允許」:

  • Notification.permission 設為 granted

  • 網站就能顯示通知。

  • 後續呼叫 Notification.requestPermission 時,系統會解析為 granted,但不會顯示彈出式視窗。

如果使用者點選「封鎖」:

  • Notification.permission 設為 denied

  • 網站「無法」向使用者顯示通知。

  • 後續呼叫 Notification.requestPermission 時,系統會解析為 denied,但不會顯示彈出式視窗。

如果使用者關閉彈出式視窗:

  • Notification.permission 仍為 default

  • 網站將無法向使用者顯示通知。

  • 後續對 Notification.requestPermission 的呼叫會產生更多彈出式視窗。

    不過,如果使用者繼續關閉彈出式視窗,瀏覽器可能會封鎖該網站,並將 Notification.permission 設為 denied。這樣一來,系統就無法向使用者顯示權限要求彈出式視窗或通知。

    在撰寫本文時,瀏覽器在回應已略過的通知權限彈出式視窗時的行為仍可能有所變動。處理這項問題的最佳方式,就是在回應使用者發起的互動時,一律要求通知權限,讓使用者知道發生什麼事,並瞭解相關資訊。

傳送通知

在這個步驟中,您會向使用者傳送通知。

您將使用 Notification 建構函式建立新的通知,並嘗試顯示該通知。如果權限狀態為 granted,系統就會顯示通知。

  1. 將 index.js 中的 sendNotification 函式暫存檔替換為以下程式碼:

    // Use the Notification constructor to create and send a new Notification.
    function sendNotification() {
      let title
    = 'Test';
      let options
    = {
        body
    : 'Test body',
       
    // Other options can go here
     
    };
      console
    .log('Creating new notification');
      let notification
    = new Notification(title, options);
    }

    Notification 建構函式會採用兩個參數:titleoptionsoptions 是具有屬性的物件,可用於代表通知中的視覺設定和資料。詳情請參閱 MDN 說明文件中的通知參數

  2. 重新整理您正在查看即時應用程式的 Chrome 分頁,然後按一下「傳送通知」按鈕。畫面上應會顯示文字 Test body 的通知。

未經許可傳送通知會發生什麼情況?

在這個步驟中,您將新增幾行程式碼,讓您瞭解在未經使用者許可的情況下,嘗試顯示通知時會發生什麼事。

  • public/index.js 中,請在 sendNotification 函式的結尾定義新通知的 onerror 事件處理常式:
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title
= 'Test';
  let options
= {
    body
: 'Test body',
   
// Other options can go here
 
};
  console
.log('Creating new notification');
  let notification
= new Notification(title, options);
  notification
.onerror = (event) => {
    console
.log('Could not send notification');
    console
.log(event);
 
};
}

如要觀察通知權限錯誤:

  1. 按一下 Chrome 網址列旁的鎖頭圖示,然後將網站的通知權限設定重設為預設值。

  2. 按一下「要求傳送通知的權限」,然後在彈出式視窗中選取「封鎖」

  3. 按一下「Send notification」,看看會發生什麼事。系統會將錯誤文字 (Could not send notification) 和事件物件記錄到控制台。

視需要,再次重設網站的通知權限。 您可以嘗試多次要求權限並關閉彈出式視窗,看看會發生什麼事。

嘗試使用通知選項

您現在已瞭解要求權限和傳送通知的基本概念。您也瞭解使用者回應對應用程式顯示通知的影響。

您現在可以嘗試在建立通知時使用多種視覺和資料選項。下方列出可用的選項。(如要進一步瞭解這些選項,請參閱 MDN 上的通知說明文件)。

請注意,瀏覽器和裝置實作這些選項的方式不同,因此建議您在不同平台上測試通知,瞭解通知的顯示方式。

let options = {
  dir
: 'auto',              // Text direction
  lang
: 'en-US',            // A language tag
  badge
: '/orange-cat.png', // Display when insufficient room
  body
: 'Hello World',      // Body text
  tag
: 'mytag',             // Tag for categorization
  icon
: '/line-cat.png',    // To display in the notification
  image
: '/orange-cat.png', // To display in the notification
  data
: {                   // Arbitrary data; any data type
    cheese
: 'I like cheese',
    pizza
: 'Excellent cheese delivery mechanism',
    arbitrary
: {
      faveNumber
: 42,
      myBool
: true
   
}},
  vibrate
: [200, 100, 200], // Vibration pattern for hardware
  renotify
: false,          // Notify if replaced? Default false
  requireInteraction
: false,// Active until click? Default false
 
/*
    actions:   // Array of NotificationActions
               // Only usable with a service worker
    [{
      action: 'shop',
      title: 'Shop!',
      icon: '/bags.png'
    },],
  */

}

如需更多想法,請參閱 Peter Beverloo 的通知產生器

如果您遇到問題,請參考以下程式碼研究室的完成版程式碼:glitch.com/edit/#!/codelab-notifications-get-started-completed

請參閱本系列的下一堂程式碼研究室「使用服務工作者處理通知」,進一步瞭解相關內容!