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

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

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

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

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

1. กด `Control+Shift+J` (หรือ `Command+Option+J` ใน Mac) เพื่อเปิด DevTools คลิกแท็บคอนโซล

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

   Notification permission is default
   

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

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

   คอนโซลจะพิมพ์ข้อความ "TODO" จากฟังก์ชัน Stub 2 รายการ ได้แก่ requestPermission และ sendNotification ฟังก์ชันเหล่านี้คือฟังก์ชันที่คุณจะติดตั้งใช้งานในโค้ดแล็บนี้

ตอนนี้มาดูโค้ดของแอปตัวอย่างกัน เปิด 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 แล้ว

• window.onload ตัวแฮนเดิลเหตุการณ์จะเรียกใช้ฟังก์ชัน showPermission เมื่อโหลดหน้าเว็บ โดยจะแสดงสถานะสิทธิ์ปัจจุบันในคอนโซลและในหน้าเว็บ ดังนี้

  window.onload = () => { showPermission(); };
  

ขอสิทธิ์ในการส่งการแจ้งเตือน

ในขั้นตอนนี้ คุณจะเพิ่มฟังก์ชันการทำงานเพื่อขอสิทธิ์จากผู้ใช้ในการส่งการแจ้งเตือน

คุณจะใช้วิธี Notification.requestPermission() เพื่อทริกเกอร์ป๊อปอัปที่ขอให้ผู้ใช้อนุญาตหรือบล็อกการแจ้งเตือนจากเว็บไซต์

1. แทนที่requestPermissionฟังก์ชัน Stub ใน 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. ในอินเทอร์เฟซของแอปที่ใช้งานจริง ให้คลิกขอสิทธิ์ส่งการแจ้งเตือน ป๊อปอัปจะปรากฏขึ้น

ผู้ใช้สามารถตอบป๊อปอัปขอสิทธิ์ได้ 3 แบบ

หากผู้ใช้คลิกอนุญาต

• ตั้งค่า Notification.permission เป็น granted

• เว็บไซต์จะแสดงการแจ้งเตือนได้

• การเรียกใช้ Notification.requestPermission ในครั้งต่อๆ ไปจะเปลี่ยนไปใช้ granted โดยไม่มีป๊อปอัป

หากผู้ใช้คลิกบล็อก

• ตั้งค่า Notification.permission เป็น denied

• เว็บไซต์จะแสดงการแจ้งเตือนต่อผู้ใช้ไม่ได้

• การเรียกใช้ Notification.requestPermission ในครั้งต่อๆ ไปจะเปลี่ยนไปใช้ denied โดยไม่มีป๊อปอัป

หากผู้ใช้ปิดป๊อปอัป

• Notification.permission ยังคง default

• เว็บไซต์จะแสดงการแจ้งเตือนต่อผู้ใช้ไม่ได้

• การเรียกใช้ Notification.requestPermission ในภายหลังจะทำให้เกิดป๊อปอัปมากขึ้น

  อย่างไรก็ตาม หากผู้ใช้ปิดป๊อปอัปต่อไป เบราว์เซอร์อาจบล็อกเว็บไซต์และตั้งค่า Notification.permission เป็น denied จากนั้นระบบจะไม่แสดงป๊อปอัปคำขอสิทธิ์หรือการแจ้งเตือนต่อผู้ใช้

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

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

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

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

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

2. รีเฟรชแท็บ Chrome ที่คุณกำลังดูแอปแบบสด แล้วคลิกปุ่มส่งการแจ้งเตือน การแจ้งเตือนที่มีข้อความ Test body ควรปรากฏขึ้น

สิ่งที่จะเกิดขึ้นเมื่อคุณส่งการแจ้งเตือนโดยไม่ได้รับอนุญาต

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

• ใน 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'
    },],
  */
}

ดูไอเดียเพิ่มเติมได้ที่เครื่องมือสร้างการแจ้งเตือนของ Peter Beverloo

ดูข้อมูลเพิ่มเติมได้ที่ Codelab ถัดไปในชุดนี้ จัดการการแจ้งเตือนด้วย Service Worker