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

Thomas Steiner

เผยแพร่: 24 ตุลาคม 2019

คำเตือน: การพัฒนา Notification Triggers API ซึ่งเป็นส่วนหนึ่งของโปรเจ็กต์ความสามารถของ Google ได้สิ้นสุดลงแล้ว เราไม่แน่ใจว่าจะมอบประสบการณ์ที่สอดคล้องและเชื่อถือได้ ในทุกแพลตฟอร์ม

เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดี คุณต้องมีกลไกที่ช่วย ในการลบการแจ้งเตือนที่ตั้งเวลาไว้ซึ่งล้าสมัยหรือไม่ถูกต้องออก เช่น กิจกรรมในปฏิทินที่ยกเลิกแล้ว โดยไม่ต้องอาศัยการเปิดแท็บ เราได้รับความคิดเห็นว่าความถี่ในการใช้ "Periodic Background Sync ไม่เพียงพอ และเนื่องจากต้องใช้ฟีเจอร์นี้เพื่อแสดงการแจ้งเตือน Push API จึงไม่ใช่โซลูชันที่ดีเช่นกัน

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

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

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

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

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

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

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

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

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

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

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

หากต้องการทดลองใช้ Notification Triggers API ในเครื่องโดยไม่มีโทเค็นช่วงทดลองใช้จากต้นทาง ให้เปิดใช้ Flag #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 flag เพื่อให้รวมการแจ้งเตือนที่กำหนดเวลาไว้ในรายการ

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 DevTools เพื่อแก้ไขข้อบกพร่องของการแจ้งเตือนได้ หากต้องการเริ่ม การแก้ไขข้อบกพร่อง ให้กดเริ่มบันทึกเหตุการณ์ หรือ Control+E (Command+E ใน Mac) Chrome DevTools จะบันทึกเหตุการณ์การแจ้งเตือนทั้งหมด ซึ่งรวมถึงการแจ้งเตือนที่กำหนดเวลาไว้ แสดง และปิด เป็นเวลา 3 วัน แม้ว่าจะปิด DevTools อยู่ก็ตาม

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

ระบบได้บันทึกเหตุการณ์การแจ้งเตือนที่แสดงไว้ในแผงการแจ้งเตือนของ Chrome DevTools — การแจ้งเตือนที่แสดง

สาธิต

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

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

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

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

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

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