API ทริกเกอร์การแจ้งเตือน

ทริกเกอร์การแจ้งเตือนช่วยให้คุณตั้งเวลาการแจ้งเตือนในเครื่องที่ไม่ต้องใช้การเชื่อมต่อเครือข่ายได้ ซึ่งเหมาะสําหรับกรณีการใช้งาน เช่น แอปปฏิทิน

Thomas Steiner

ทริกเกอร์การแจ้งเตือนคืออะไร

นักพัฒนาเว็บสามารถแสดงการแจ้งเตือนได้โดยใช้ Web Notifications API ฟีเจอร์นี้มักใช้ร่วมกับ Push API เพื่อแจ้งข้อมูลที่มีความละเอียดอ่อนต่อเวลาแก่ผู้ใช้ เช่น เหตุการณ์ข่าวด่วนหรือข้อความที่ได้รับ การแจ้งเตือนจะแสดงโดยการเรียกใช้ JavaScript ในอุปกรณ์ของผู้ใช้

ปัญหาของ Push API คือไม่น่าเชื่อถือสำหรับการทริกเกอร์การแจ้งเตือนที่ต้องแสดงเมื่อเป็นไปตามเงื่อนไขบางอย่าง เช่น เวลาหรือสถานที่ ตัวอย่างเงื่อนไขตามเวลาคือการแจ้งเตือนในปฏิทินที่ช่วยเตือนคุณเกี่ยวกับการประชุมสำคัญกับเจ้านายตอน 14:00 น. ตัวอย่างเงื่อนไขตามตำแหน่งคือการแจ้งเตือนที่เตือนให้คุณซื้อนมเมื่อคุณเข้าไปในบริเวณใกล้เคียงกับร้านขายของใช้ทั่วไป การเชื่อมต่อเครือข่ายหรือฟีเจอร์ประหยัดแบตเตอรี่ เช่น โหมดสลีป อาจทำให้การส่งการแจ้งเตือนแบบ Push ล่าช้า

ทริกเกอร์การแจ้งเตือนช่วยแก้ปัญหานี้โดยให้คุณกำหนดเวลาการแจ้งเตือนด้วยเงื่อนไขการทริกเกอร์ล่วงหน้า เพื่อให้ระบบปฏิบัติการส่งการแจ้งเตือนในเวลาที่เหมาะสม แม้ว่าจะไม่มีการเชื่อมต่อเครือข่ายหรืออุปกรณ์อยู่ในโหมดประหยัดแบตเตอรี่

กรณีการใช้งาน

แอปพลิเคชันปฏิทินสามารถใช้ทริกเกอร์การแจ้งเตือนตามเวลาเพื่อเตือนผู้ใช้เกี่ยวกับการประชุมที่กําลังจะมาถึง รูปแบบการแจ้งเตือนเริ่มต้นสำหรับแอปปฏิทินอาจเป็นการแสดงการแจ้งเตือนการแจ้งเตือนครั้งแรกก่อนการประชุม 1 ชั่วโมง แล้วแสดงการแจ้งเตือนอีกรายการที่เร่งด่วนกว่า 5 นาทีก่อน

เครือข่ายทีวีอาจช่วยเตือนผู้ใช้ว่ารายการทีวีโปรดกำลังจะเริ่มออกอากาศหรือการประชุมแบบสตรีมแบบสดกำลังจะเริ่มต้น

เว็บไซต์แปลงเขตเวลาสามารถใช้ทริกเกอร์การแจ้งเตือนตามเวลาเพื่อให้ผู้ใช้ตั้งเวลาการปลุกสำหรับการประชุมทางโทรศัพท์หรือวิดีโอคอลได้

สถานะปัจจุบัน

ขั้นตอน สถานะ
1. สร้างคำอธิบาย เสร็จสมบูรณ์
2. สร้างฉบับร่างแรกของข้อกําหนด ยังไม่เริ่ม
3. รวบรวมความคิดเห็นและปรับปรุงการออกแบบ กำลังดำเนินการ
4. ช่วงทดลองใช้จากต้นทาง เสร็จสมบูรณ์
5. เปิดตัว ยังไม่เริ่ม

วิธีใช้ทริกเกอร์การแจ้งเตือน

การเปิดใช้ผ่าน about://flags

หากต้องการทดสอบ Notification Triggers API ในเครื่องโดยไม่มีโทเค็นช่วงทดลองใช้จากต้นทาง ให้เปิดใช้ Flag #enable-experimental-web-platform-features ใน about://flags

การตรวจหาองค์ประกอบ

คุณสามารถดูว่าเบราว์เซอร์รองรับทริกเกอร์การแจ้งเตือนหรือไม่โดยตรวจสอบว่ามีพร็อพเพอร์ตี้ showTrigger อยู่หรือไม่

if ('showTrigger' in Notification.prototype) {
  /* Notification Triggers supported */
}

การตั้งเวลาการแจ้งเตือน

การตั้งเวลาการแจ้งเตือนคล้ายกับการแสดง Push Notification ปกติ ยกเว้นคุณต้องส่งshowTriggerพร็อพเพอร์ตี้เงื่อนไขที่มีออบเจ็กต์ TimestampTrigger เป็นค่าไปยังออบเจ็กต์ options ของการแจ้งเตือน

const createScheduledNotification = async (tag, title, timestamp) => {
  const registration = await navigator.serviceWorker.getRegistration();
  registration.showNotification(title, {
    tag: tag,
    body: 'This notification was scheduled 30 seconds ago',
    showTrigger: new TimestampTrigger(timestamp + 30 * 1000),
  });
};

การยกเลิกการแจ้งเตือนที่ตั้งเวลาไว้

หากต้องการยกเลิกการแจ้งเตือนที่ตั้งเวลาไว้ ก่อนอื่นให้ขอรายการการแจ้งเตือนทั้งหมดที่ตรงกับแท็กหนึ่งๆ ผ่าน ServiceWorkerRegistration.getNotifications() โปรดทราบว่าคุณต้องส่ง Flag includeTriggered เพื่อให้การแจ้งเตือนที่กำหนดเวลาไว้รวมอยู่ในรายการ

const cancelScheduledNotification = async (tag) => {
  const registration = await navigator.serviceWorker.getRegistration();
  const notifications = await registration.getNotifications({
    tag: tag,
    includeTriggered: true,
  });
  notifications.forEach((notification) => notification.close());
};

การแก้ไขข้อบกพร่อง

คุณสามารถใช้แผงการแจ้งเตือนของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อแก้ไขข้อบกพร่องของการแจ้งเตือนได้ หากต้องการเริ่มแก้ไขข้อบกพร่อง ให้กดเริ่มบันทึกเหตุการณ์ เริ่มบันทึกเหตุการณ์ หรือ Control+E (Command+E ใน Mac) Chrome DevTools จะบันทึกเหตุการณ์การแจ้งเตือนทั้งหมด รวมถึงการแจ้งเตือนที่กำหนดเวลาไว้ แสดงอยู่ และปิดไปแล้วเป็นเวลา 3 วัน แม้ว่าจะปิด DevTools อยู่ก็ตาม

ระบบบันทึกเหตุการณ์การแจ้งเตือนที่ตั้งเวลาไว้ไว้ในแผงการแจ้งเตือนของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ซึ่งอยู่ในแผงแอปพลิเคชัน
การแจ้งเตือนที่ตั้งเวลาไว้
ระบบบันทึกเหตุการณ์การแจ้งเตือนที่แสดงไว้ในแผงการแจ้งเตือนของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
การแจ้งเตือนที่แสดง

สาธิต

คุณดูการทำงานของทริกเกอร์การแจ้งเตือนได้ในการสาธิต ซึ่งจะช่วยให้คุณตั้งเวลาการแจ้งเตือน แสดงรายการการแจ้งเตือนที่ตั้งเวลาไว้ และยกเลิกการแจ้งเตือนได้ ซอร์สโค้ดมีอยู่ใน Glitch

ภาพหน้าจอของเว็บแอปสาธิตทริกเกอร์การแจ้งเตือน
การสาธิตทริกเกอร์การแจ้งเตือน

ความปลอดภัยและสิทธิ์

ทีม Chrome ได้ออกแบบและติดตั้งใช้งาน Notification Triggers API โดยใช้หลักการหลักที่ระบุไว้ในการควบคุมการเข้าถึงฟีเจอร์ที่มีประสิทธิภาพของแพลตฟอร์มเว็บ ซึ่งรวมถึงการควบคุมของผู้ใช้ ความโปร่งใส และลักษณะการใช้งานที่สะดวกสบาย เนื่องจาก API นี้ต้องใช้ Service Worker จึงต้องมีบริบทที่ปลอดภัยด้วย การใช้ API ต้องใช้สิทธิ์เดียวกับข้อความ Push ปกติ

การควบคุมของผู้ใช้

API นี้ใช้ได้เฉพาะในบริบทของ ServiceWorkerRegistration ซึ่งหมายความว่าระบบจะจัดเก็บข้อมูลที่จำเป็นทั้งหมดไว้ในบริบทเดียวกันและลบออกโดยอัตโนมัติเมื่อมีการลบ Service Worker หรือผู้ใช้ลบข้อมูลเว็บไซต์ทั้งหมดของต้นทาง การบล็อกคุกกี้ยังป้องกันไม่ให้ติดตั้ง Service Worker ใน Chrome และทำให้ไม่สามารถใช้ API นี้ได้ ผู้ใช้สามารถปิดใช้การแจ้งเตือนสำหรับเว็บไซต์ได้ในการตั้งค่าเว็บไซต์

ความโปร่งใส

API นี้ไม่ขึ้นอยู่กับเครือข่าย ซึ่งหมายความว่าการแจ้งเตือนที่ตั้งเวลาไว้ต้องใช้ข้อมูลที่จำเป็นทั้งหมดล่วงหน้า รวมถึงทรัพยากรรูปภาพที่แอตทริบิวต์ badge, icon และ image อ้างอิง ซึ่งหมายความว่านักพัฒนาแอปจะไม่เห็นการแสดงการแจ้งเตือนที่ตั้งเวลาไว้ และไม่มีการปลุก Service Worker จนกว่าผู้ใช้จะโต้ตอบกับการแจ้งเตือน ดังนั้น ปัจจุบันยังไม่มีวิธีที่ทราบว่านักพัฒนาแอปสามารถรับข้อมูลเกี่ยวกับผู้ใช้ผ่านวิธีการที่อาจละเมิดความเป็นส่วนตัว เช่น การค้นหาตำแหน่งทางภูมิศาสตร์ของที่อยู่ IP การออกแบบนี้ยังช่วยให้ฟีเจอร์ใช้กลไกการกําหนดเวลาของระบบปฏิบัติการได้ (ไม่บังคับ) เช่น AlarmManager ของ Android ซึ่งช่วยประหยัดแบตเตอรี่

ความคิดเห็น

ทีม Chrome อยากทราบความคิดเห็นของคุณเกี่ยวกับประสบการณ์การใช้งานทริกเกอร์การแจ้งเตือน

บอกเราเกี่ยวกับการออกแบบ API

มีสิ่งใดเกี่ยวกับ API ที่ไม่ทำงานตามที่คาดไว้ไหม หรือมีเมธอดหรือพร็อพเพอร์ตี้ที่ขาดหายไปซึ่งคุณต้องนำไปใช้กับแนวคิดของคุณ หากมีคำถามหรือความคิดเห็นเกี่ยวกับรูปแบบการรักษาความปลอดภัย แจ้งปัญหาเกี่ยวกับข้อกําหนดในที่เก็บ GitHub ของทริกเกอร์การแจ้งเตือน หรือแสดงความคิดเห็นในปัญหาที่มีอยู่

พบปัญหาในการติดตั้งใช้งานใช่ไหม

หากพบข้อบกพร่องในการใช้งาน Chrome หรือการติดตั้งใช้งานแตกต่างจากข้อมูลจำเพาะหรือไม่ รายงานข้อบกพร่องที่ new.crbug.com โปรดระบุรายละเอียดให้มากที่สุดเท่าที่จะเป็นไปได้ ระบุวิธีการง่ายๆ ในการจำลองข้อบกพร่อง และตั้งค่าคอมโพเนนต์เป็น UI>Notifications Glitch เหมาะอย่างยิ่งสำหรับการแชร์การจำลองข้อบกพร่องที่รวดเร็วและง่ายดาย

หากมีแผนจะใช้ API

หากวางแผนที่จะใช้ทริกเกอร์การแจ้งเตือนในเว็บไซต์ การสนับสนุนแบบสาธารณะของคุณช่วยให้เราจัดลำดับความสำคัญของฟีเจอร์ต่างๆ และแสดงให้เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้สำคัญกับผู้ให้บริการเบราว์เซอร์รายอื่นๆ เพียงใด ส่งทวีตถึง @ChromiumDev โดยใช้แฮชแท็ก #NotificationTriggers และแจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ไหนและอย่างไร

ลิงก์ที่มีประโยชน์

ขอขอบคุณ

Richard Knoll เป็นผู้ติดตั้งใช้งานทริกเกอร์การแจ้งเตือน และPeter Beverloo เป็นผู้เขียนคำอธิบาย โดยมี Richard เป็นผู้มีส่วนร่วม บุคคลต่อไปนี้ได้ตรวจสอบบทความนี้ Joe Medley, Pete LePage รวมถึง Richard และ Peter รูปภาพหลักโดย Lukas Blazek จาก Unsplash