開始使用 Notifications API

在本程式碼研究室中,您將使用 通知 API 執行以下作業:

  • 要求取得傳送通知的權限
  • 傳送通知
  • 測試不同的通知選項

瀏覽器支援

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

資料來源

系統會自動封鎖內嵌的 Glitch 應用程式通知,因此您無法在這個頁面預覽應用程式。而是可以採取以下做法:

  1. 按一下「Remix to Edit」即可編輯專案。
  2. 如要預覽網站,請按下「查看應用程式」。然後按下 全螢幕 全螢幕

Glitch 應該會在新的 Chrome 分頁中開啟:

在新分頁中顯示重混上線應用程式的螢幕截圖

在您學習本程式碼研究室的過程中,請變更本頁面內嵌 Glitch 中的程式碼。為執行中的應用程式重新整理新分頁,就會看到變更。

瞭解入門應用程式及其程式碼

請先在 Chrome 新分頁中查看已上線的應用程式:

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

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

    Notification permission is default
    

    如果您不知道這是什麼意思,請不用擔心很快就會揭曉!

  2. 按一下運作中應用程式中的按鈕:「要求傳送通知」和「傳送通知」

    主控台會顯示「TODO」來自幾個函式虛設常式的訊息:requestPermissionsendNotification。以下是您將在本程式碼研究室中實作的函式。

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

  • showPermission 函式會使用通知 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 函式是虛設常式:

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

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

  • sendNotification 函式是虛設常式:

    // 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. 按一下「傳送通知」即可查看後續情況。 錯誤訊息文字 (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

歡迎參閱本系列的下一個程式碼研究室「使用 Service Worker 處理通知」,進一步瞭解相關資訊!