เริ่มต้นใช้งาน Notifications API

ใน Codelab นี้ คุณจะใช้ฟีเจอร์พื้นฐานของ Notifications API เพื่อทำสิ่งต่อไปนี้

• ขอสิทธิ์เพื่อส่งการแจ้งเตือน
• ส่งการแจ้งเตือน
• การทดสอบกับตัวเลือกการแจ้งเตือน

การสนับสนุนเบราว์เซอร์

• 20
• 14
• 22
• 7

แหล่งที่มา

รีมิกซ์แอปตัวอย่างและดูในแท็บใหม่

ระบบจะบล็อกการแจ้งเตือนจากแอป Glitch ที่ฝังอยู่โดยอัตโนมัติ คุณจึงดูตัวอย่างแอปในหน้านี้ไม่ได้ แต่ให้ดำเนินการดังนี้

1. คลิกรีมิกซ์เพื่อแก้ไข เพื่อทำให้โปรเจ็กต์แก้ไขได้
2. หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ

ภาพแตกควรเปิดในแท็บ Chrome ใหม่ โดยทำดังนี้

การปรับเปลี่ยนโค้ดใน Glitch ที่ฝังในหน้านี้ขณะที่คุณใช้ Codelab รีเฟรชแท็บใหม่ด้วยแอปที่เผยแพร่อยู่เพื่อดูการเปลี่ยนแปลง

ทำความคุ้นเคยกับแอปเริ่มต้นและรหัสของแอป

เริ่มด้วยการดูแอปเวอร์ชันที่ใช้จริงในแท็บใหม่ของ Chrome ดังนี้

1. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ คลิกแท็บคอนโซล

   คุณควรเห็นข้อความต่อไปนี้ในคอนโซล

   Notification permission is default
   

   หากคุณไม่ทราบว่าหมายความว่าอย่างไร ก็ไม่ต้องกังวล ทุกอย่างจะเปิดเผยในเร็วๆ นี้!

2. คลิกปุ่มในแอปที่เผยแพร่อยู่: ขอสิทธิ์ในการส่งการแจ้งเตือนและส่งการแจ้งเตือน

   คอนโซลจะพิมพ์ข้อความ "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() เพื่อเรียกใช้ป๊อปอัปที่ขอให้ผู้ใช้อนุญาตหรือบล็อกการแจ้งเตือนจากเว็บไซต์

หมายเหตุ: Notification.requestPermission() แสดงผล Promise หากต้องการดำเนินการหลังจากที่คำสัญญานี้สมบูรณ์แล้ว คุณต้องใส่พารามิเตอร์เหล่านั้นไว้ในฟังก์ชันและส่งฟังก์ชันนั้นเป็นพารามิเตอร์ไปยังเมธอด then() ของสัญญา: js Notification.requestPermission().then((result) => { /* do stuff */ }); ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของคำสัญญาได้ในเอกสารประกอบของ Promise ใน MDN

1. แทนที่สตับฟังก์ชัน 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);
       });
   }
   

2. โหลดแท็บ Chrome ที่คุณกำลังดูอยู่แอปที่เผยแพร่อยู่ซ้ำ

3. ในอินเทอร์เฟซของแอปที่เผยแพร่อยู่ ให้คลิกขอสิทธิ์เพื่อส่งการแจ้งเตือน ป๊อปอัปจะปรากฏขึ้น

ผู้ใช้เลือก 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 ทั้งป๊อปอัปคำขอสิทธิ์และการแจ้งเตือนก็ไม่สามารถแสดงต่อผู้ใช้ได้

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

หมายเหตุ: ในระหว่างการพัฒนา ให้คลิกไอคอนแม่กุญแจข้างแถบ URL ของ Chrome เพื่อให้ป๊อปอัปการแจ้งเตือนปรากฏขึ้นอีกครั้ง Chrome จะแสดงตัวเลือกเพื่อให้คุณรีเซ็ตการตั้งค่าสิทธิ์การแจ้งเตือนของเว็บไซต์เป็นค่าเริ่มต้นได้

ส่งการแจ้งเตือน

ในขั้นตอนนี้ คุณจะส่งการแจ้งเตือนไปยังผู้ใช้

คุณจะใช้ตัวสร้าง Notification เพื่อสร้างการแจ้งเตือนใหม่และพยายามแสดง หากสถานะสิทธิ์คือ granted การแจ้งเตือนจะปรากฏขึ้น

1. แทนที่สตับฟังก์ชัน 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 เกี่ยวกับพารามิเตอร์การแจ้งเตือน

2. รีเฟรชแท็บ 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);
  };
}

วิธีพบข้อผิดพลาดเกี่ยวกับสิทธิ์การแจ้งเตือน

1. คลิกไอคอนแม่กุญแจถัดจากแถบ URL ของ Chrome และรีเซ็ตการตั้งค่าสิทธิ์การแจ้งเตือนของเว็บไซต์เป็นค่าเริ่มต้น

2. คลิกขอสิทธิ์เพื่อส่งการแจ้งเตือน และในครั้งนี้ ให้เลือกบล็อกจากป๊อปอัป

3. คลิกส่งการแจ้งเตือน แล้วรอดูผลลัพธ์ที่จะเกิดขึ้น ระบบจะบันทึกข้อความแสดงข้อผิดพลาด (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 เพื่อสำรวจเพิ่มเติม