步驟 3：新增鬧鐘和通知

在這個步驟中，您將瞭解：

  • 如何按照指定的時間間隔喚醒應用程式以執行背景任務。
  • 如何使用螢幕通知來吸引重要資訊的注意。

預計完成這個步驟的時間：20 分鐘。如要預覽這個步驟中將會完成的工作，請向下跳到本頁底部 ↓。

設定提醒，讓待辦事項應用程式更臻完善

新增功能，提醒使用者開啟待辦事項 (即使應用程式處於關閉狀態)，也能強化待辦事項應用程式。

首先，您需要為應用程式新增某種方法，定期檢查未完成的待辦事項。接著，即使待辦事項應用程式視窗已關閉，應用程式也必須向使用者顯示訊息。如要達成這個目標，您需要瞭解鬧鐘和通知在 Chrome 應用程式中的運作方式。

新增鬧鐘

使用 chrome.alarms 設定喚醒間隔。只要 Chrome 處於執行狀態，系統就會以大約時間間隔呼叫鬧鐘事件監聽器。

更新應用程式權限

在 manifest.json 中要求 "alarms" 權限：

"permissions": ["storage", "alarms"],

更新背景指令碼

在 background.js 中新增 onAlarm 事件監聽器。目前，每當有待辦事項項目時，回呼函式只會記錄訊息至主控台：

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
});
chrome.alarms.onAlarm.addListener(function( alarm ) {
  console.log("Got an alarm!", alarm);
});

更新 HTML 檢視模式

在 index.html 中新增「啟用鬧鐘」按鈕：

<footer id="info">
  <button id="toggleAlarm">Activate alarm</button>
  ...
</footer>

您現在需要為這個新按鈕編寫 JavaScript 事件處理常式。回想步驟 2，看看內嵌 JavaScript 是最常見的 CSP 違規行為之一。在 index.html 中，加入這一行以匯入新的 alarms.js 檔案，您將在以下步驟中建立這個檔案：

  </footer>
  ...
  <script src="js/app.js"></script>
  <script src="js/alarms.js"></script>
</body>

建立鬧鐘指令碼

在 js 資料夾中新建名為 alarms.js 的檔案。

請使用以下程式碼新增 checkAlarm()、createAlarm()、cancelAlarm() 和 toggleAlarm() 方法，以及點擊事件處理常式，以便在使用者點選「啟用鬧鐘」按鈕時切換鬧鐘。

(function () {
  'use strict';
   var alarmName = 'remindme';
   function checkAlarm(callback) {
     chrome.alarms.getAll(function(alarms) {
       var hasAlarm = alarms.some(function(a) {
         return a.name == alarmName;
       });
       var newLabel;
       if (hasAlarm) {
         newLabel = 'Cancel alarm';
       } else {
         newLabel = 'Activate alarm';
       }
       document.getElementById('toggleAlarm').innerText = newLabel;
       if (callback) callback(hasAlarm);
     })
   }
   function createAlarm() {
     chrome.alarms.create(alarmName, {
       delayInMinutes: 0.1, periodInMinutes: 0.1});
   }
   function cancelAlarm() {
     chrome.alarms.clear(alarmName);
   }
   function doToggleAlarm() {
     checkAlarm( function(hasAlarm) {
       if (hasAlarm) {
         cancelAlarm();
       } else {
         createAlarm();
       }
       checkAlarm();
     });
   }
  $$('#toggleAlarm').addEventListener('click', doToggleAlarm);
  checkAlarm();
})();

重新載入應用程式，再花一點時間啟用 (並停用) 鬧鐘。

檢查背景頁面訊息

啟用鬧鐘後，每次鬧鐘響起時，您應該就會在主控台中看到輸出記錄訊息：

鬧鐘訊息顯示在控制台中

您應該會看到：

  • 即使你關閉「待辦事項」應用程式視窗，鬧鐘仍會持續響鈴。
  • 在 ChromeOS 以外的平台上，如果您完全關閉所有 Chrome 瀏覽器執行個體，就不會觸發鬧鐘。

以下將逐一介紹在 alarms.js 中逐一使用 chrome.alarms 方法的元件。

建立鬧鐘

在 createAlarm() 中，使用 chrome.alarms.create() API 在切換「啟用鬧鐘」時建立鬧鐘。

chrome.alarms.create(alarmName, {delayInMinutes: 0.1, periodInMinutes: 0.1});

第一個參數是選用字串，可識別鬧鐘的專屬名稱，例如 remindme。(注意：您需要設定鬧鐘名稱才能按名稱取消鬧鐘)。

第二個參數是 alarmInfo 物件。alarmInfo 的有效屬性包括 when 或 delayInMinutes，以及 periodInMinutes。為降低使用者電腦的負載，Chrome 會將鬧鐘限制為每分鐘一次。這裡我們僅使用較小的值 (每分鐘 0.1 秒)，僅供示範之用。

清除鬧鐘

在 cancelAlarm() 中，使用 chrome.alarms.clear() API 在切換「取消鬧鐘」時取消鬧鐘。

chrome.alarms.clear(alarmName);

第一個參數必須是您在 chrome.alarms.create() 中用來做為鬧鐘名稱的識別字串。

第二個 (選用) 參數是應採用以下格式的回呼函式：

function(boolean wasCleared) {...};

設定鬧鐘

在 checkAlarm() 中，使用 chrome.alarms.getAll() API 取得所有已建立鬧鐘的陣列，以便更新切換按鈕的 UI 狀態。

getAll() 接受傳入 Alarm 物件陣列的回呼函式。如要查看 Alarm 的內容，您可以在開發人員工具控制台中查看執行中的鬧鐘，如下所示：

chrome.alarms.getAll(function(alarms) {
  console.log(alarms);
  console.log(alarms[0]);
});

這會輸出物件，例如 {name: "remindme", periodInMinutes: 0.1, scheduledTime: 1397587981166.858}，如下所示：

使用 getAll() 檢查執行中的鬧鐘。

為下一個部分做好準備

現在，您已設定鬧鐘，以定期輪詢應用程式的方式進行輪詢，並將其做為新增視覺通知的基礎。

新增通知

讓我們將鬧鐘通知變更為使用者可輕易注意到的內容。使用 chrome.notifications 顯示桌面通知，如下所示：

待辦事項應用程式通知

使用者點選通知後，應該就會看到 Todo 應用程式視窗。

更新應用程式權限

在 manifest.json 中要求 "notifications" 權限：

"permissions": ["storage", "alarms", "notifications"],

更新背景指令碼

在 background.js 中，將 chrome.app.window.create() 回呼重構為獨立方法，以便重複使用：

chrome.app.runtime.onLaunched.addListener(function() {
function launch() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
}
});
chrome.app.runtime.onLaunched.addListener(launch);
...

更新鬧鐘監聽器

在 background.js 頂端新增一個變數，用於鬧鐘監聽器中使用的資料庫名稱：

var dbName = 'todos-vanillajs';

dbName 的值與 js/app.js 第 17 行設定的資料庫名稱相同：

var todo = new Todo('todos-vanillajs');

建立通知

請更新 onAlarm 事件監聽器，透過 chrome.storage.local.get() 取得已儲存的資料，並呼叫 showNotification() 方法，不要只將新鬧鐘記錄到主控台，而是：

chrome.alarms.onAlarm.addListener(function( alarm ) {
  console.log("Got an alarm!", alarm);
  chrome.storage.local.get(dbName, showNotification);
});

將此 showNotification() 方法新增至 background.js：

function launch(){
  ...
}

function showNotification(storedData) {
  var openTodos = 0;
  if ( storedData[dbName].todos ) {
    storedData[dbName].todos.forEach(function(todo) {
      if ( !todo.completed ) {
        openTodos++;
      }
    });
  }
  if (openTodos>0) {
    // Now create the notification
    chrome.notifications.create('reminder', {
        type: 'basic',
        iconUrl: 'icon_128.png',
        title: 'Don\'t forget!',
        message: 'You have '+openTodos+' things to do. Wake up, dude!'
     }, function(notificationId) {});
  }
}

chrome.app.runtime.onLaunched.addListener(launch);
...

showNotification() 會檢查是否有待解決 (未完成) 的待辦事項。如有至少一個開啟的待辦事項，請透過 chrome.notifications.create() 建立通知彈出式視窗。

第一個參數是專門用來識別通知的名稱。您必須設定 ID，才能清除或處理與該特定通知的互動。如果 ID 與現有通知相符，create() 會先清除該通知，再發出新的通知。

第二個參數是 NotificationOptions 物件。轉譯通知彈出式視窗的方法有很多種。以下是使用包含圖示、標題和訊息的「基本」通知。其他通知類型包括圖片、清單和進度指標。完成步驟 3 後，歡迎回到本節，並試用其他通知功能。

第三個 (選用) 參數是應採用以下格式的回呼方法：

function(string notificationId) {...};

處理通知互動

當使用者點選通知時，開啟待辦事項應用程式。在 background.js 的結尾，建立 chrome.notifications.onClicked 事件處理常式：

chrome.notifications.onClicked.addListener(function() {
  launch();
});

事件處理常式回呼只會呼叫 launch() 方法。chrome.app.window.create() 會建立一個新的 Chrome 應用程式視窗 (如果沒有)，或聚焦在目前開啟的視窗 ID 為 main 的視窗。

啟動已完成的待辦事項應用程式

您已完成步驟 3！立即重新載入待辦事項應用程式並設定提醒。

檢查這些行為是否正常運作：

  • 如果你沒有任何未完成的待辦事項，則不會出現彈出式通知。
  • 如果您在應用程式關閉時按一下通知，待辦事項應用程式就會開啟，或轉為焦點。

疑難排解

最終的 background.js 檔案應如下所示。如果系統未顯示通知，請確認 Chrome 為 28 以上版本。如果系統仍未顯示通知，請在開發人員工具主控台中檢查主視窗 (依序點選「滑鼠右鍵」>「檢查元素」) 和背景頁面 (依序點選「按一下滑鼠右鍵」>「檢查背景頁面」)，查看錯誤訊息。

瞭解詳情

如要進一步瞭解這個步驟介紹的某些 API，請參閱：

準備好繼續進行下一步了嗎？請參閱步驟 4 - 使用 WebView 開啟外部連結 »