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

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

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

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

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

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

Use Case

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

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

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

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

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

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

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

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

การตรวจหาฟีเจอร์

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

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

การกำหนดเวลาการแจ้งเตือน

การกำหนดเวลาการแจ้งเตือนคล้ายกับการแสดงข้อความ Push แบบปกติ เพียงแต่คุณจะต้องส่งพร็อพเพอร์ตี้เงื่อนไข 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() โปรดทราบว่าคุณต้องส่งธง 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 วัน แม้ว่าจะปิดเครื่องมือสำหรับนักพัฒนาเว็บอยู่ก็ตาม

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

การสาธิต

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

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

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

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

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

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

ความโปร่งใส

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

ความคิดเห็น

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

บอกให้เราทราบเกี่ยวกับการออกแบบ API

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

มีปัญหาเกี่ยวกับการติดตั้งใช้งานใช่ไหม

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

กำลังวางแผนจะใช้ API ใช่ไหม

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

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

กิตติกรรมประกาศ

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