在這個步驟中,您將瞭解:
- 如何按照指定的時間間隔喚醒應用程式以執行背景任務。
- 如何使用螢幕通知來吸引重要資訊的注意。
預計完成這個步驟的時間: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}
,如下所示:
為下一個部分做好準備
現在,您已設定鬧鐘,以定期輪詢應用程式的方式進行輪詢,並將其做為新增視覺通知的基礎。
新增通知
讓我們將鬧鐘通知變更為使用者可輕易注意到的內容。使用 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,請參閱:
- 宣告權限 ↑
- chrome.alarms ↑
- chrome.alarms.onAlarm ↑
- chrome.alarms.create() ↑
- chrome.alarms.clear() ↑
- chrome.alarms.getAll() ↑
- chrome.notifications ↑
- chrome.notifications.create() ↑
- NotificationOptions ↑
- chrome.notifications.onClicked ↑
準備好繼續進行下一步了嗎?請參閱步驟 4 - 使用 WebView 開啟外部連結 »