ใน Codelab นี้ คุณจะใช้ฟีเจอร์พื้นฐานของ Notifications API เพื่อดำเนินการต่อไปนี้
- ขอสิทธิ์ในการส่งการแจ้งเตือน
- ส่งการแจ้งเตือน
- ลองใช้ตัวเลือกการแจ้งเตือน
รีมิกซ์แอปตัวอย่างและดูแอปในแท็บใหม่
ระบบจะบล็อกการแจ้งเตือนจากแอป Glitch ที่ฝังไว้โดยอัตโนมัติ คุณจึงไม่สามารถดูตัวอย่างแอปในหน้านี้ได้ แต่ให้ทำดังนี้
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
เนื้อหาที่ขัดข้องควรเปิดในแท็บ Chrome ใหม่
ขณะทำ Codelab นี้ ให้ทำการเปลี่ยนแปลงโค้ดใน Glitch ที่ฝังอยู่ในหน้านี้ รีเฟรชแท็บใหม่ที่มีแอปเวอร์ชันที่เผยแพร่อยู่เพื่อดูการเปลี่ยนแปลง
ทำความคุ้นเคยกับแอปเริ่มต้นและโค้ดของแอป
เริ่มต้นด้วยการดูแอปเวอร์ชันที่ใช้งานจริงในแท็บใหม่ของ Chrome โดยทำดังนี้
กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ คลิกแท็บคอนโซล
คุณควรเห็นข้อความต่อไปนี้ในคอนโซล
Notification permission is default
ไม่ต้องกังวลหากคุณไม่ทราบว่าข้อความนี้หมายความว่าอย่างไร เราจะเปิดเผยข้อมูลทั้งหมดในเร็วๆ นี้
คลิกปุ่มในแอปเวอร์ชันที่ใช้งานอยู่ ได้แก่ ขอสิทธิ์ส่งการแจ้งเตือนและส่งการแจ้งเตือน
คอนโซลจะพิมพ์ข้อความ "TODO" จากสแต็บฟังก์ชัน 2 รายการ ได้แก่
requestPermission
และsendNotification
ฟังก์ชันเหล่านี้คือฟังก์ชันที่คุณจะใช้ในโค้ดแล็บนี้
มาดูโค้ดของแอปตัวอย่างใน Glitch ที่ฝังอยู่ในหน้านี้กัน
เปิด public/index.js
และดูส่วนสําคัญของโค้ดที่มีอยู่
ฟังก์ชัน
showPermission
ใช้ Notifications API เพื่อรับสถานะสิทธิ์ปัจจุบันของเว็บไซต์และบันทึกลงในคอนโซล// Print current permission state to console; // update onscreen message. function showPermission() { let permission = Notification.permission; console.log('Notification permission is ' + permission); let p = document.getElementById('permission'); p.textContent = 'Notification permission is ' + permission; }
สถานะสิทธิ์ก่อนขอสิทธิ์คือ
default
ในสถานะสิทธิ์default
เว็บไซต์ต้องขอและได้รับสิทธิ์ก่อนจึงจะส่งการแจ้งเตือนได้ฟังก์ชัน
requestPermission
เป็นฟังก์ชันสแต็บ// Use the Notification API to request permission to send notifications. function requestPermission() { console.log('TODO: Implement requestPermission()'); }
คุณจะใช้ฟังก์ชันนี้ในขั้นตอนถัดไป
ฟังก์ชัน
sendNotification
เป็นฟังก์ชันสแต็บ// Use the Notification constructor to create and send a new Notification. function sendNotification() { console.log('TODO: Implement sendNotification()'); }
คุณจะใช้ฟังก์ชันนี้หลังจากติดตั้งใช้งาน
requestPermission
แล้วโปรแกรมรับฟังเหตุการณ์
window.onload
จะเรียกใช้ฟังก์ชันshowPermission
เมื่อโหลดหน้าเว็บ ซึ่งจะแสดงสถานะสิทธิ์ปัจจุบันในคอนโซลและในหน้าเว็บwindow.onload = () => { showPermission(); };
ขอสิทธิ์ในการส่งการแจ้งเตือน
ในขั้นตอนนี้ คุณจะต้องเพิ่มฟังก์ชันการทำงานเพื่อขอสิทธิ์จากผู้ใช้ในการส่งการแจ้งเตือน
คุณจะใช้เมธอด Notification.requestPermission()
เพื่อทริกเกอร์ป๊อปอัปที่ขอให้ผู้ใช้อนุญาตหรือบล็อกการแจ้งเตือนจากเว็บไซต์
แทนที่แท็บฟังก์ชัน
requestPermission
ใน public/index.js ด้วยโค้ดต่อไปนี้// Use the Notification API to request permission to send notifications. function requestPermission() { Notification.requestPermission() .then((permission) => { console.log('Promise resolved: ' + permission); showPermission(); }) .catch((error) => { console.log('Promise was rejected'); console.log(error); }); }
โหลดแท็บ Chrome ที่คุณดูแอปเวอร์ชันที่ใช้งานอยู่ซ้ำ
ในอินเทอร์เฟซของแอปเวอร์ชันที่ใช้งานจริง ให้คลิกขอสิทธิ์ส่งการแจ้งเตือน ป๊อปอัปจะปรากฏขึ้น
ผู้ใช้จะตอบกลับป๊อปอัปสิทธิ์ได้ 3 วิธีดังนี้
การตอบกลับของผู้ใช้ | สถานะสิทธิ์การแจ้งเตือน |
---|---|
ผู้ใช้เลือกอนุญาต | granted |
ผู้ใช้เลือกบล็อก | denied |
ผู้ใช้ปิดป๊อปอัปโดยไม่เลือกตัวเลือกใดๆ | default |
หากผู้ใช้คลิก "อนุญาต"
ตั้งค่า
Notification.permission
เป็นgranted
เว็บไซต์จะแสดงการแจ้งเตือนได้
การเรียกใช้
Notification.requestPermission
ครั้งต่อๆ ไปจะแสดงผลเป็นgranted
โดยไม่ต้องมีป๊อปอัป
หากผู้ใช้คลิก "บล็อก"
ตั้งค่า
Notification.permission
เป็นdenied
เว็บไซต์จะไม่สามารถแสดงการแจ้งเตือนต่อผู้ใช้
การเรียกใช้
Notification.requestPermission
ครั้งต่อๆ ไปจะแสดงผลเป็นdenied
โดยไม่ต้องมีป๊อปอัป
หากผู้ใช้ปิดป๊อปอัป
Notification.permission
เหลืออีกdefault
เว็บไซต์จะแสดงการแจ้งเตือนให้ผู้ใช้ไม่ได้
การเรียกใช้
Notification.requestPermission
ซ้ำๆ จะสร้างป๊อปอัปเพิ่มเติมอย่างไรก็ตาม หากผู้ใช้ปิดป๊อปอัปอย่างต่อเนื่อง เบราว์เซอร์อาจบล็อกเว็บไซต์โดยตั้งค่า
Notification.permission
เป็นdenied
จากนั้นระบบจะไม่แสดงป๊อปอัปคําขอสิทธิ์หรือการแจ้งเตือนต่อผู้ใช้ขณะเขียนบทความนี้ ลักษณะการทํางานของเบราว์เซอร์ในการตอบสนองต่อป๊อปอัปสิทธิ์การแจ้งเตือนที่ปิดไปแล้วยังอาจมีการเปลี่ยนแปลง วิธีที่ดีที่สุดในการจัดการกับปัญหานี้คือขอสิทธิ์การแจ้งเตือนเสมอเพื่อตอบสนองต่อการโต้ตอบบางอย่างที่ผู้ใช้เริ่ม เพื่อให้ผู้ใช้คาดหวังและทราบสิ่งที่เกิดขึ้น
ส่งการแจ้งเตือน
ในขั้นตอนนี้ คุณจะส่งการแจ้งเตือนไปยังผู้ใช้
คุณจะใช้คอนสตรัคเตอร์ Notification
เพื่อสร้างการแจ้งเตือนใหม่และพยายามแสดงการแจ้งเตือน
หากสถานะสิทธิ์คือ granted
การแจ้งเตือนจะปรากฏขึ้น
แทนที่ต้นฉบับของฟังก์ชัน
sendNotification
ใน index.js ด้วยโค้ดต่อไปนี้// Use the Notification constructor to create and send a new Notification. function sendNotification() { let title = 'Test'; let options = { body: 'Test body', // Other options can go here }; console.log('Creating new notification'); let notification = new Notification(title, options); }
เครื่องมือสร้าง
Notification
ใช้พารามิเตอร์ 2 รายการ ได้แก่title
และoptions
options
คือออบเจ็กต์ที่มีพร็อพเพอร์ตี้แสดงการตั้งค่าภาพและข้อมูลที่คุณสามารถใส่ไว้ในการแจ้งเตือน ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบ MDN เกี่ยวกับพารามิเตอร์การแจ้งเตือนรีเฟรชแท็บ Chrome ที่คุณดูแอปเวอร์ชันที่ใช้งานอยู่ และคลิกปุ่มส่งการแจ้งเตือน การแจ้งเตือนที่มีข้อความ
Test body
ควรปรากฏขึ้น
สิ่งที่จะเกิดขึ้นเมื่อคุณส่งการแจ้งเตือนโดยไม่ได้รับอนุญาต
ในขั้นตอนนี้ คุณจะต้องเพิ่มโค้ด 2-3 บรรทัดเพื่อให้เห็นสิ่งที่จะเกิดขึ้นเมื่อคุณพยายามแสดงการแจ้งเตือนโดยไม่ได้รับสิทธิ์จากผู้ใช้
- ใน
public/index.js
ให้กำหนดตัวแฮนเดิลเหตุการณ์onerror
ของการแจ้งเตือนใหม่ไว้ที่ท้ายฟังก์ชันsendNotification
ดังนี้
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
let title = 'Test';
let options = {
body: 'Test body',
// Other options can go here
};
console.log('Creating new notification');
let notification = new Notification(title, options);
notification.onerror = (event) => {
console.log('Could not send notification');
console.log(event);
};
}
วิธีสังเกตข้อผิดพลาดเกี่ยวกับสิทธิ์การแจ้งเตือน
คลิกไอคอนแม่กุญแจข้างแถบ URL ของ Chrome และรีเซ็ตการตั้งค่าสิทธิ์การแจ้งเตือนของเว็บไซต์เป็นค่าเริ่มต้น
คลิกขอสิทธิ์ส่งการแจ้งเตือน แล้วเลือกบล็อกจากป๊อปอัป
คลิกส่งการแจ้งเตือน แล้วดูว่าเกิดอะไรขึ้น ระบบจะบันทึกข้อความแสดงข้อผิดพลาด (
Could not send notification
) และออบเจ็กต์เหตุการณ์ลงในคอนโซล
รีเซ็ตสิทธิ์การแจ้งเตือนของเว็บไซต์อีกครั้ง (ไม่บังคับ) คุณลองขอสิทธิ์และปิดป๊อปอัปหลายครั้งเพื่อดูว่าเกิดอะไรขึ้นได้
ลองใช้ตัวเลือกการแจ้งเตือน
ตอนนี้คุณทราบข้อมูลเบื้องต้นเกี่ยวกับวิธีขอสิทธิ์และส่งการแจ้งเตือนแล้ว นอกจากนี้ คุณยังเห็นว่าการตอบกลับของผู้ใช้ส่งผลต่อความสามารถของแอปในการแสดงการแจ้งเตือนอย่างไร
ตอนนี้คุณสามารถทดลองใช้ตัวเลือกภาพและข้อมูลมากมายที่มีให้เมื่อสร้างการแจ้งเตือน ตัวเลือกทั้งหมดที่ใช้ได้มีดังนี้ (ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกเหล่านี้ได้ในเอกสารประกอบเกี่ยวกับการแจ้งเตือนใน MDN)
โปรดทราบว่าเบราว์เซอร์และอุปกรณ์ต่างๆ ใช้ตัวเลือกเหล่านี้แตกต่างกันไป คุณจึงควรทดสอบการแจ้งเตือนในแพลตฟอร์มต่างๆ เพื่อดูลักษณะการแสดงผล
let options = {
dir: 'auto', // Text direction
lang: 'en-US', // A language tag
badge: '/orange-cat.png', // Display when insufficient room
body: 'Hello World', // Body text
tag: 'mytag', // Tag for categorization
icon: '/line-cat.png', // To display in the notification
image: '/orange-cat.png', // To display in the notification
data: { // Arbitrary data; any data type
cheese: 'I like cheese',
pizza: 'Excellent cheese delivery mechanism',
arbitrary: {
faveNumber: 42,
myBool: true
}},
vibrate: [200, 100, 200], // Vibration pattern for hardware
renotify: false, // Notify if replaced? Default false
requireInteraction: false,// Active until click? Default false
/*
actions: // Array of NotificationActions
// Only usable with a service worker
[{
action: 'shop',
title: 'Shop!',
icon: '/bags.png'
},],
*/
}
ดูแนวคิดเพิ่มเติมได้ในเครื่องมือสร้างการแจ้งเตือนของ Peter Beverloo
หากติดขัด โปรดดูโค้ดที่สมบูรณ์สำหรับ Codelab นี้ที่ glitch.com/edit/#!/codelab-notifications-get-started-completed
โปรดดู Codelab ถัดไปในชุดนี้ที่ชื่อจัดการการแจ้งเตือนด้วย Service Worker เพื่อดูข้อมูลเพิ่มเติม