ในขั้นตอนนี้ คุณจะได้เรียนรู้เกี่ยวกับสิ่งต่อไปนี้
- วิธีปลุกแอปตามช่วงเวลาที่ระบุเพื่อทำงานในเบื้องหลัง
- วิธีใช้การแจ้งเตือนบนหน้าจอเพื่อดึงดูดความสนใจไปยังสิ่งที่สำคัญ
เวลาโดยประมาณในการทำขั้นตอนนี้ให้เสร็จสิ้นคือ 20 นาที หากต้องการดูตัวอย่างสิ่งที่คุณจะทำในขั้นตอนนี้ ให้ข้ามไปที่ด้านล่างของหน้านี้ ↓
ปรับปรุงแอป Todo ด้วยการช่วยเตือน
ปรับปรุงแอป Todo โดยเพิ่มฟังก์ชันการทำงานที่จะช่วยเตือนผู้ใช้หากมีสิ่งที่ต้องทำเปิดอยู่ แม้ว่าแอปจะปิดอยู่ก็ตาม
ก่อนอื่น คุณต้องเพิ่มวิธีที่แอปจะตรวจสอบสิ่งที่ต้องทำที่ยังทำไม่เสร็จอย่างสม่ำเสมอ จากนั้น แอปจะต้องแสดงข้อความต่อผู้ใช้แม้ว่าจะปิดหน้าต่างแอป Todo แล้วก็ตาม ในการบรรลุเป้าหมายนี้ คุณต้องเข้าใจวิธีการทำงานของการปลุกและการแจ้งเตือนในแอป Chrome ก่อน
เพิ่มการปลุก
ใช้ chrome.alarms
เพื่อกำหนดช่วงตื่นนอน ตราบใดที่ Chrome ทำงานอยู่
ระบบจะเรียกตัวฟังการปลุกตามช่วงเวลาที่ตั้งไว้
อัปเดตสิทธิ์ของแอป
ใน manifest.json ให้ขอสิทธิ์ "alarms"
:
"permissions": ["storage", "alarms"],
อัปเดตสคริปต์ที่ทำงานอยู่เบื้องหลัง
ใน background.js ให้เพิ่ม Listener 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 ว่าหนึ่งในการไม่ปฏิบัติตามข้อกำหนดของ CSP ที่พบบ่อยที่สุดนั้นเกิดจาก JavaScript ในหน้า ใน 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();
})();
โหลดแอปซ้ำและใช้เวลาสักครู่ในการเปิดใช้งาน (และปิดใช้งาน) การปลุก
เมื่อใดก็ตามที่คุณเปิดใช้งานการปลุก คุณควรเห็นข้อความบันทึกที่พิมพ์ในคอนโซลทุกครั้งที่เสียงปลุก "ดัง" ดังนี้
โปรดทราบว่า
- แม้ว่าคุณจะปิดหน้าต่างแอป Todo แล้ว การปลุกก็จะยังปรากฏขึ้นอยู่เรื่อยๆ
- บนแพลตฟอร์มอื่นๆ นอกเหนือจาก ChromeOS หากคุณปิดอินสแตนซ์ของเบราว์เซอร์ Chrome ทั้งหมดโดยสมบูรณ์ การปลุกจะไม่ทริกเกอร์
มาดูแต่ละส่วนใน alarms.js ที่ใช้เมธอด chrome.alarms
ทีละรายการกัน
สร้างการปลุก
ใน createAlarm()
ให้ใช้ chrome.alarms.create()
API เพื่อสร้างการปลุกเมื่อมีการสลับเปิดใช้การปลุก
chrome.alarms.create(alarmName, {delayInMinutes: 0.1, periodInMinutes: 0.1});
พารามิเตอร์แรกเป็นสตริงที่ไม่บังคับซึ่งระบุชื่อที่ไม่ซ้ำกันของการปลุก เช่น remindme
(หมายเหตุ: คุณต้องตั้งชื่อการปลุกเพื่อยกเลิกโดยการตั้งชื่อ)
พารามิเตอร์ที่ 2 คือออบเจ็กต์ alarmInfo
พร็อพเพอร์ตี้ที่ใช้ได้กับ alarmInfo
ได้แก่ when
หรือ delayInMinutes
และ periodInMinutes
Chrome จะจำกัดการปลุกไว้ที่ 1 ครั้งในทุกๆ นาที เพื่อลดภาระงานในเครื่องของผู้ใช้ เราใช้ค่าเล็กๆ (0.1 ของนาที) สำหรับการสาธิตเท่านั้น
ล้างการปลุก
ใน cancelAlarm()
ให้ใช้ chrome.alarms.clear()
API เพื่อยกเลิกการปลุกเมื่อมีการสลับยกเลิกการปลุก
chrome.alarms.clear(alarmName);
พารามิเตอร์แรกควรเป็นสตริงระบุที่คุณใช้เป็นชื่อการปลุกใน chrome.alarms.create()
พารามิเตอร์ที่ 2 (ไม่บังคับ) คือฟังก์ชันเรียกกลับที่ควรใช้ในรูปแบบต่อไปนี้
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);
...
อัปเดต Listener การตั้งปลุก
ที่ด้านบนของ background.js ให้เพิ่มตัวแปรสำหรับชื่อฐานข้อมูลที่ใช้ในการแจ้งเตือนเสียง
var dbName = 'todos-vanillajs';
ค่าของ dbName
เป็นชื่อฐานข้อมูลเดียวกับที่ตั้งค่าไว้ในบรรทัดที่ 17 ของ js/app.js:
var todo = new Todo('todos-vanillajs');
สร้างการแจ้งเตือน
แทนที่จะบันทึกการปลุกใหม่ไปยังคอนโซล ให้อัปเดต Listener 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()
จะตรวจหารายการสิ่งที่ต้องทำที่เปิดอยู่ (ยังไม่เสร็จ) หากมีรายการสิ่งที่ต้องทำเปิดอยู่อย่างน้อย 1 รายการ ให้สร้างป๊อปอัปการแจ้งเตือนผ่าน chrome.notifications.create()
พารามิเตอร์แรกคือชื่อการแจ้งเตือนที่ระบุไม่ซ้ำกัน คุณต้องตั้งรหัสเพื่อล้างหรือจัดการการโต้ตอบกับการแจ้งเตือนนั้นๆ หากรหัสตรงกับการแจ้งเตือนที่มีอยู่ create()
จะล้างการแจ้งเตือนดังกล่าวก่อนที่จะทำการแจ้งเตือนใหม่
พารามิเตอร์ที่ 2 คือออบเจ็กต์ NotificationOptions
การแสดงป๊อปอัปการแจ้งเตือนนั้นทำได้หลายวิธี เราใช้การแจ้งเตือน "พื้นฐาน" ที่มีไอคอน ชื่อ และข้อความ
ส่วนการแจ้งเตือนประเภทอื่นๆ ได้แก่ รูปภาพ รายการ และสัญญาณบอกสถานะความคืบหน้า คุณสามารถกลับมายังส่วนนี้ได้
เมื่อทำขั้นตอนที่ 3 เสร็จแล้วและทดลองใช้ฟีเจอร์การแจ้งเตือนอื่นๆ
พารามิเตอร์ที่สาม (ไม่บังคับ) เป็นวิธีเรียกกลับที่ควรจะมีในรูปแบบต่อไปนี้
function(string notificationId) {...};
จัดการการโต้ตอบกับการแจ้งเตือน
เปิดแอป Todo เมื่อผู้ใช้คลิกที่การแจ้งเตือน ในตอนท้ายของ background.js ให้สร้างเครื่องจัดการเหตุการณ์ chrome.notifications.onClicked
โดยทำดังนี้
chrome.notifications.onClicked.addListener(function() {
launch();
});
โค้ดเรียกกลับของตัวแฮนเดิลเหตุการณ์จะเรียกเมธอด launch()
chrome.app.window.create()
จะสร้างหน้าต่างแอป Chrome ใหม่หากยังไม่มีหน้าต่างนั้น หรือนำหน้าต่างที่เปิดอยู่ซึ่งมีรหัสหน้าต่างเป็น main
มาโฟกัส
เปิดแอป Todo ที่เสร็จแล้ว
คุณทำขั้นตอนที่ 3 เสร็จแล้ว โหลดแอป Todo ซ้ำเลยที่มีการช่วยเตือน
ตรวจสอบว่าลักษณะการทำงานเหล่านี้ทำงานได้ตามที่คาดไว้
- หากไม่มีรายการสิ่งที่ต้องทำที่ยังไม่เสร็จ จะไม่มีการแจ้งเตือนแบบป๊อปอัป
- หากคุณคลิกการแจ้งเตือนเมื่อแอปปิดอยู่ แอป Todo จะเปิดขึ้นหรือเข้ามาอยู่ในโฟกัส
การแก้ปัญหา
ไฟล์ 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 »