ใน Codelab นี้ คุณจะใช้ฟีเจอร์พื้นฐานของ Notifications API เพื่อทำสิ่งต่อไปนี้
- ขอสิทธิ์เพื่อส่งการแจ้งเตือน
- ส่งการแจ้งเตือน
- การทดสอบกับตัวเลือกการแจ้งเตือน
รีมิกซ์แอปตัวอย่างและดูในแท็บใหม่
ระบบจะบล็อกการแจ้งเตือนจากแอป Glitch ที่ฝังอยู่โดยอัตโนมัติ คุณจึงดูตัวอย่างแอปในหน้านี้ไม่ได้ แต่ให้ดำเนินการดังนี้
- คลิกรีมิกซ์เพื่อแก้ไข เพื่อทำให้โปรเจ็กต์แก้ไขได้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด
เต็มหน้าจอ
ภาพแตกควรเปิดในแท็บ Chrome ใหม่ โดยทำดังนี้
การปรับเปลี่ยนโค้ดใน Glitch ที่ฝังในหน้านี้ขณะที่คุณใช้ Codelab รีเฟรชแท็บใหม่ด้วยแอปที่เผยแพร่อยู่เพื่อดูการเปลี่ยนแปลง
ทำความคุ้นเคยกับแอปเริ่มต้นและรหัสของแอป
เริ่มด้วยการดูแอปเวอร์ชันที่ใช้จริงในแท็บใหม่ของ Chrome ดังนี้
กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ คลิกแท็บคอนโซล
คุณควรเห็นข้อความต่อไปนี้ในคอนโซล
Notification permission is default
หากคุณไม่ทราบว่าหมายความว่าอย่างไร ก็ไม่ต้องกังวล ทุกอย่างจะเปิดเผยในเร็วๆ นี้!
คลิกปุ่มในแอปที่เผยแพร่อยู่: ขอสิทธิ์ในการส่งการแจ้งเตือนและส่งการแจ้งเตือน
คอนโซลจะพิมพ์ข้อความ "TODO" จากขั้วฟังก์ชัน 2 ชุด ได้แก่
requestPermission
และsendNotification
ฟังก์ชันที่คุณจะนำมาใช้ใน Codelab นี้มีดังนี้
คราวนี้มาดูโค้ดของแอปตัวอย่างใน 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
แล้วListener เหตุการณ์
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 ที่คุณกำลังดูอยู่แอปที่เผยแพร่อยู่ซ้ำ
ในอินเทอร์เฟซของแอปที่เผยแพร่อยู่ ให้คลิกขอสิทธิ์เพื่อส่งการแจ้งเตือน ป๊อปอัปจะปรากฏขึ้น
ผู้ใช้เลือก 1 ใน 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
เป็นวัตถุที่มีพร็อพเพอร์ตี้แสดงการตั้งค่าภาพและข้อมูลที่คุณรวมไว้ในการแจ้งเตือนได้ ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบ MN เกี่ยวกับพารามิเตอร์การแจ้งเตือนรีเฟรชแท็บ Chrome ที่คุณกำลังดูแอปที่เผยแพร่อยู่ และคลิกปุ่มส่งการแจ้งเตือน การแจ้งเตือนที่มีข้อความ
Test body
ควรปรากฏขึ้น
จะเกิดอะไรขึ้นเมื่อคุณส่งการแจ้งเตือนโดยไม่ได้รับอนุญาต
ในขั้นตอนนี้ คุณจะต้องเพิ่มโค้ดสองบรรทัด ซึ่งจะช่วยให้คุณเห็นสิ่งที่เกิดขึ้น เมื่อพยายามแสดงการแจ้งเตือนโดยที่ผู้ใช้ไม่อนุญาต
- ใน
public/index.js
ที่ส่วนท้ายของฟังก์ชันsendNotification
ให้กำหนดเครื่องจัดการเหตุการณ์onerror
ของการแจ้งเตือนใหม่ดังนี้
// 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'
},],
*/
}
โปรดดูแนวคิดเพิ่มเติมในเครื่องมือสร้างการแจ้งเตือนของปีเตอร์ เบเวอร์ลู
หากพบปัญหา โปรดดูโค้ดที่สมบูรณ์ของ Codelab นี้ที่ glitch.com/edit/#!/codelab-notifications-get-started-completed
ลองดู Codelab ถัดไปในชุดนี้เรื่องจัดการการแจ้งเตือนด้วย Service Worker เพื่อสำรวจเพิ่มเติม