步驟 3：新增鬧鐘和通知

在這個步驟中，您將瞭解以下內容：

  • 如何按照指定的時間間隔喚醒應用程式，以執行背景工作。
  • 如何使用畫面上的通知，吸引對重要事物的注意。

完成這個步驟所需的時間：20 分鐘。 如要預覽您將在這個步驟中完成的內容，請向下捲動到本頁底部 ↓。

運用提醒功能強化「待辦事項」應用程式

新增功能提醒使用者是否有待處理的待辦事項，藉此強化「待辦事項」應用程式 因此應用程式已關閉

首先，您需要新增一個方式，讓應用程式定期檢查未完成的待辦事項。接著應用程式 關閉「待辦事項」應用程式視窗後，就必須向使用者顯示訊息。為了達成這個目的 您必須瞭解 Chrome 應用程式的鬧鐘和通知如何運作。

新增鬧鐘

使用 chrome.alarms 設定起床時間間隔。只要 Chrome 處於執行狀態，鬧鐘事件監聽器 會在接近間隔時呼叫

更新應用程式權限

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

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

更新背景指令碼

在 background.js 中，新增 onAlarm 事件監聽器。回呼函式目前只會將 每當有待辦事項時，就會向 Console 顯示訊息：

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。為了保護使用者電腦的負載 將鬧鐘限制為每分鐘一次。這裡使用的值太小 (1 分鐘 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 應用程式通知

使用者點選通知後，畫面上應該會顯示 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 與現有 ID 相符 通知，create() 會先清除該通知，再發出新通知。

第二個參數是 NotificationOptions 物件。轉譯方式有很多種 通知彈出式視窗這裡使用「基本」並顯示圖示、標題和訊息 其他通知類型包括圖片、清單和進度指標。您可以回到此 部分完成步驟 3 並測試其他通知功能。

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

function(string notificationId) {...};

處理通知互動

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

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

事件處理常式回呼會直接呼叫 launch() 方法。chrome.app.window.create() 兩者擇一 針對尚未存在的 Chrome 應用程式視窗建立新的 Chrome 應用程式視窗，或將焦點移至目前開啟的 Chrome 應用程式視窗 視窗 ID 為 main 的開啟視窗。

啟動已完成的 Todo 應用程式

您已經完成步驟 3！立即重新載入「待辦事項」應用程式並接收提醒。

請檢查下列行為是否正常運作：

  • 如果您沒有任何未完成的待辦事項，就不會收到彈出式視窗通知。
  • 如果你在應用程式關閉後點選通知，Todo 應用程式會自行開啟或進入 重點。

疑難排解

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

瞭解詳情

如要進一步瞭解這個步驟中導入的部分 API，請參閱：

準備好進行下一個步驟了嗎？前往步驟 4 - 使用 WebView 開啟外部連結 »