ก่อนอื่น เราต้องขออภัยสำหรับชื่อวิดีโอที่ไม่เหมาะสม แต่เราไม่สามารถทำได้
ใน Chrome 44 จะมีการเพิ่มและเปิด Notfication.data และ ServiceWorkerRegistration.getNotifications() / ลดความซับซ้อนของกรณีการใช้งานที่พบบ่อยบางส่วนเมื่อจัดการกับการแจ้งเตือนที่มีข้อความ Push
ข้อมูลการแจ้งเตือน
Notification.data ให้คุณเชื่อมโยงออบเจ็กต์ JavaScript กับการแจ้งเตือน
กล่าวโดยสรุปคือเมื่อคุณได้รับข้อความพุช คุณสามารถสร้างการแจ้งเตือนพร้อมข้อมูลบางอย่าง จากนั้นในเหตุการณ์คลิกการแจ้งเตือน คุณจะเห็นการแจ้งเตือนที่มีการคลิกและดูข้อมูล
ตัวอย่างเช่น การสร้างออบเจ็กต์ข้อมูลและเพิ่มลงในตัวเลือกการแจ้งเตือน เช่น
self.addEventListener('push', function(event) {
console.log('Received a push message', event);
var title = 'Yay a message.';
var body = 'We have received a push message.';
var icon = '/images/icon-192x192.png';
var tag = 'simple-push-demo-notification-tag';
var data = {
doge: {
wow: 'such amaze notification data'
}
};
event.waitUntil(
self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag,
data: data
})
);
});
หมายความว่าเราสามารถได้รับข้อมูลในเหตุการณ์ notificationsclick ดังนี้
self.addEventListener('notificationclick', function(event) {
var doge = event.notification.data.doge;
console.log(doge.wow);
});
ก่อนหน้านี้คุณต้องซ่อนข้อมูลใน IndexDB หรือใส่ข้อความต่อท้าย URL ไอคอน - eek
ServiceWorkerRegistration.getNotifications()
คำขอหนึ่งจากนักพัฒนาซอฟต์แวร์ที่ทำงานเกี่ยวกับข้อความ Push คือให้สามารถควบคุมการแจ้งเตือนที่แสดงได้ดีขึ้น
ตัวอย่างกรณีการใช้งาน ได้แก่ แอปพลิเคชันแชทที่ผู้ใช้ส่งข้อความจำนวนมากและผู้รับแสดงการแจ้งเตือนหลายรายการ ตามหลักแล้วเว็บแอปจะสังเกตเห็นได้ว่าคุณมีการแจ้งเตือนหลายรายการที่ยังไม่ได้ดู แล้วยุบการแจ้งเตือนเหล่านั้นให้เป็นการแจ้งเตือนเดียว
หากไม่ใส่ getNotifications() วิธีที่ดีที่สุดที่สามารถทำได้คือแทนที่ข้อความล่าสุดด้วยการแจ้งเตือนก่อนหน้านี้ คุณสามารถใช้ getNotifications() เพื่อ "ยุบ" การแจ้งเตือนหากการแจ้งเตือนนั้นปรากฏขึ้นแล้ว ซึ่งจะทำให้ผู้ใช้ได้รับประสบการณ์ที่ดียิ่งขึ้น
โค้ดในการดำเนินการนั้นค่อนข้างง่าย ภายในเหตุการณ์พุช ให้เรียก ServiceWorkerRegistration.getNotifications() เพื่อรับอาร์เรย์ของการแจ้งเตือนปัจจุบัน และจากจุดนี้เพื่อกำหนดลักษณะการทำงานที่ถูกต้อง ไม่ว่าจะเป็นการยุบการแจ้งเตือนทั้งหมดหรือใช้ Notification.tag
function showNotification(title, body, icon, data) {
var notificationOptions = {
body: body,
icon: icon ? icon : 'images/touch/chrome-touch-icon-192x192.png',
tag: 'simple-push-demo-notification',
data: data
};
self.registration.showNotification(title, notificationOptions);
return;
}
self.addEventListener('push', function(event) {
console.log('Received a push message', event);
// Since this is no payload data with the first version
// of Push notifications, here we'll grab some data from
// an API and use it to populate a notification
event.waitUntil(
fetch(API_ENDPOINT).then(function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
// Throw an error so the promise is rejected and catch() is executed
throw new Error();
}
// Examine the text in the response
return response.json().then(function(data) {
var title = 'You have a new message';
var message = data.message;
var icon = 'images/notification-icon.png';
var notificationTag = 'chat-message';
var notificationFilter = {
tag: notificationTag
};
return self.registration.getNotifications(notificationFilter)
.then(function(notifications) {
if (notifications && notifications.length > 0) {
// Start with one to account for the new notification
// we are adding
var notificationCount = 1;
for (var i = 0; i < notifications.length; i++) {
var existingNotification = notifications[i];
if (existingNotification.data &&
existingNotification.data.notificationCount) {
notificationCount +=
existingNotification.data.notificationCount;
} else {
notificationCount++;
}
existingNotification.close();
}
message = 'You have ' + notificationCount +
' weather updates.';
notificationData.notificationCount = notificationCount;
}
return showNotification(title, message, icon, notificationData);
});
});
}).catch(function(err) {
console.error('Unable to retrieve data', err);
var title = 'An error occurred';
var message = 'We were unable to get the information for this ' +
'push message';
return showNotification(title, message);
})
);
});
self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event);
if (Notification.prototype.hasOwnProperty('data')) {
console.log('Using Data');
var url = event.notification.data.url;
event.waitUntil(clients.openWindow(url));
} else {
event.waitUntil(getIdb().get(KEY_VALUE_STORE_NAME,
event.notification.tag).then(function(url) {
// At the moment you cannot open third party URL's, a simple trick
// is to redirect to the desired URL from a URL on your domain
var redirectUrl = '/redirect.html?redirect=' +
url;
return clients.openWindow(redirectUrl);
}));
}
});
สิ่งแรกที่ต้องไฮไลต์ด้วยข้อมูลโค้ดนี้คือเราจะกรองการแจ้งเตือนของเราด้วยการส่งออบเจ็กต์ตัวกรองไปยัง getNotifications() ซึ่งหมายความว่าเราสามารถ ดูรายการการแจ้งเตือนสำหรับแท็กที่เฉพาะเจาะจง (ในตัวอย่างนี้เป็นการสนทนาที่เจาะจง)
var notificationFilter = {
tag: notificationTag
};
return self.registration.getNotifications(notificationFilter)
จากนั้นเราจะดูการแจ้งเตือนที่ปรากฏ แล้วดูว่ามีจำนวนการแจ้งเตือนที่เชื่อมโยงกับการแจ้งเตือนนั้นและเพิ่มตามจำนวนดังกล่าวหรือไม่ วิธีนี้จะทำให้มีข้อความที่ยังไม่ได้อ่าน 3 ข้อความเมื่อมีการส่งใหม่เข้ามา ถ้ามีการแจ้งเตือนหนึ่งบอกผู้ใช้ว่ามีข้อความที่ยังไม่ได้อ่าน 2 ข้อความ
var notificationCount = 1;
for (var i = 0; i < notifications.length; i++) {
var existingNotification = notifications[i];
if (existingNotification.data && existingNotification.data.notificationCount) {
notificationCount += existingNotification.data.notificationCount;
} else {
notificationCount++;
}
existingNotification.close();
}
รายละเอียดเล็กๆ น้อยๆ ที่ต้องไฮไลต์คือ คุณต้องเรียก close()
ในการแจ้งเตือนเพื่อให้แน่ใจว่าการแจ้งเตือนถูกนำออกจากรายการการแจ้งเตือนแล้ว นี่เป็นข้อบกพร่องใน
Chrome เนื่องจากการแจ้งเตือนแต่ละรายการจะถูกแทนที่โดยการแจ้งเตือนรายการถัดไปเนื่องจากมีการใช้แท็กเดียวกัน ขณะนี้การแทนที่นี้ยังไม่แสดงในอาร์เรย์ที่แสดงผลจาก getNotifications()
นี่เป็นเพียงตัวอย่างหนึ่งของ getNotifications() เท่านั้น และอย่างที่เราทราบกันดีว่า API นี้จะเปิด Use Case อื่นๆ ที่หลากหลาย
NotificationOptions.vibrate
ตั้งแต่ Chrome 45 เป็นต้นไป คุณระบุรูปแบบการสั่นเมื่อสร้างการแจ้งเตือนได้ ในอุปกรณ์ที่รองรับ API การสั่น ซึ่งขณะนี้มีเฉพาะ Chrome สำหรับ Android เท่านั้น โดยจะให้คุณปรับแต่งรูปแบบการสั่นที่จะใช้เมื่อมีการแสดงการแจ้งเตือน
รูปแบบการสั่นอาจเป็นอาร์เรย์ของตัวเลข หรือตัวเลขเดี่ยวที่ถือเป็นอาร์เรย์ของตัวเลขเดียวก็ได้ ค่าในอาร์เรย์แสดงเวลาในหน่วยมิลลิวินาที โดยที่ดัชนีคู่ (0, 2, 4, ...) คือระยะเวลาที่จะสั่น และดัชนีคี่คือระยะเวลาที่จะหยุดชั่วคราวก่อนการสั่นครั้งต่อไป
self.registration.showNotification('Buzz!', {
body: 'Bzzz bzzzz',
vibrate: [300, 100, 400] // Vibrate 300ms, pause 100ms, then vibrate 400ms
});
คำขอฟีเจอร์ที่พบได้บ่อยที่เหลือ
คำขอฟีเจอร์อย่างหนึ่งจากนักพัฒนาแอปที่พบได้บ่อยคือ ความสามารถในการปิดการแจ้งเตือนหลังจากระยะเวลาหนึ่ง หรือความสามารถในการส่งข้อความ Push เพื่อจุดประสงค์ในการปิดการแจ้งเตือนเพียงอย่างเดียว (หากมองเห็น)
ในขณะนี้ ยังไม่มีวิธีที่คุณสามารถทำได้และไม่มีสิ่งใดในข้อกำหนดเฉพาะที่ทำให้สามารถใช้งานได้ :( แต่ทีมวิศวกรของ Chrome ทราบดีถึงกรณีการใช้งานนี้
การแจ้งเตือนของ Android
ในเดสก์ท็อป คุณสามารถสร้างการแจ้งเตือนด้วยรหัสต่อไปนี้
new Notification('Hello', {body: 'Yay!'});
ฟีเจอร์นี้ไม่เคยรองรับบน Android เนื่องจากข้อจำกัดของแพลตฟอร์ม กล่าวคือ Chrome จะไม่รองรับการเรียกกลับในออบเจ็กต์การแจ้งเตือน เช่น onclick แต่จะใช้บนเดสก์ท็อปเพื่อแสดงการแจ้งเตือนสำหรับเว็บแอป ที่คุณอาจเปิดอยู่ในขณะนี้
เหตุผลเดียวที่เราพูดถึงก็คือ การตรวจหาฟีเจอร์อย่างง่ายต่อไปนี้จะช่วยให้คุณรองรับเดสก์ท็อปได้และไม่ทำให้เกิดข้อผิดพลาดใดๆ ใน Android
if (!'Notification' in window) {
// Notifications aren't supported
return;
}
อย่างไรก็ตาม การสนับสนุนข้อความ Push บน Chrome สำหรับ Android แล้วในปัจจุบันทำให้คุณสามารถสร้างการแจ้งเตือนจาก ServiceWorker ได้ แต่จะสร้างจากหน้าเว็บไม่ได้ ซึ่งหมายความว่าการตรวจหาฟีเจอร์นี้จะไม่เหมาะสมอีกต่อไป หากคุณพยายามสร้างการแจ้งเตือนบน Chrome สำหรับ Android คุณจะได้รับข้อความแสดงข้อผิดพลาดนี้
_Uncaught TypeError: Failed to construct 'Notification': Illegal constructor.
Use ServiceWorkerRegistration.showNotification() instead_
วิธีที่ดีที่สุดในการตรวจหาฟีเจอร์สำหรับ Android และเดสก์ท็อปในขณะนี้คือการดำเนินการต่อไปนี้
function isNewNotificationSupported() {
if (!window.Notification || !Notification.requestPermission)
return false;
if (Notification.permission == 'granted')
throw new Error('You must only call this \*before\* calling
Notification.requestPermission(), otherwise this feature detect would bug the
user with an actual notification!');
try {
new Notification('');
} catch (e) {
if (e.name == 'TypeError')
return false;
}
return true;
}
ซึ่งอาจนำไปใช้ได้ดังนี้
if (window.Notification && Notification.permission == 'granted') {
// We would only have prompted the user for permission if new
// Notification was supported (see below), so assume it is supported.
doStuffThatUsesNewNotification();
} else if (isNewNotificationSupported()) {
// new Notification is supported, so prompt the user for permission.
showOptInUIForNotifications();
}