ใน Codelab นี้ คุณจะได้ใช้ฟีเจอร์พื้นฐานของ Notifications API เพื่อทำสิ่งต่อไปนี้
- ขอสิทธิ์เพื่อส่งการแจ้งเตือน
- ส่งการแจ้งเตือน
- การทดสอบตัวเลือกการแจ้งเตือน
รีมิกซ์แอปตัวอย่างแล้วดูในแท็บใหม่
ระบบจะบล็อกการแจ้งเตือนจากแอป Glitch ที่ฝังโดยอัตโนมัติ คุณจึงดูตัวอย่างแอปในหน้านี้ไม่ได้ แต่ให้ทำดังนี้
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ
Glitch ควรเปิดในแท็บ Chrome ใหม่
ขณะดำเนินการใน Codelab นี้ ให้ทำการเปลี่ยนแปลงโค้ดใน Glitch ที่ฝังอยู่ในหน้านี้ รีเฟรชแท็บใหม่ด้วยแอปที่เผยแพร่อยู่เพื่อดูการเปลี่ยนแปลง
ทำความคุ้นเคยกับแอปเริ่มต้นและโค้ดของแอป
เริ่มด้วยการดูแอปสดในแท็บ 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
เป็นออบเจ็กต์ที่มีพร็อพเพอร์ตี้ที่แสดงถึงการตั้งค่าภาพและข้อมูลที่คุณจะรวมไว้ในการแจ้งเตือนได้ ดูข้อมูลเพิ่มเติมได้ที่เอกสาร MDN เกี่ยวกับพารามิเตอร์การแจ้งเตือนรีเฟรชแท็บ Chrome ที่คุณดูแอปที่เผยแพร่อยู่ และคลิกปุ่มส่งการแจ้งเตือน การแจ้งเตือนที่มีข้อความ
Test body
จะปรากฏขึ้น
จะเกิดอะไรขึ้นเมื่อคุณส่งการแจ้งเตือนโดยไม่ได้รับอนุญาต
ในขั้นตอนนี้ คุณจะต้องเพิ่มโค้ด 2-3 บรรทัดซึ่งช่วยให้คุณเห็นสิ่งที่เกิดขึ้น เมื่อพยายามแสดงการแจ้งเตือนโดยไม่ได้รับอนุญาตจากผู้ใช้
- ใน
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'
},],
*/
}
ดูโปรแกรมสร้างการแจ้งเตือนของ Peter Beverloo เพื่อหาไอเดียเพิ่มเติม
หากพบปัญหา คุณสามารถวางโค้ดที่เสร็จสมบูรณ์สำหรับ Codelab นี้ glitch.com/edit/#!/codelab-notifications-get-started-completed
ลองดู Codelab ถัดไปในชุดนี้ จัดการการแจ้งเตือนกับโปรแกรมทำงานของบริการ เพื่อสำรวจเพิ่มเติม