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

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

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

การรองรับเบราว์เซอร์

  • Chrome: 20
  • Edge: 14.
  • Firefox: 22.
  • Safari: 7.

แหล่งที่มา

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

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

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

เนื้อหาที่ขัดข้องควรเปิดในแท็บ Chrome ใหม่

ภาพหน้าจอแสดงแอปเวอร์ชันที่รีมิกซ์แบบเรียลไทม์ในแท็บใหม่

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

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

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

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

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

    Notification permission is default
    

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

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

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

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

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

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

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

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

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

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

ผู้ใช้จะตอบกลับป๊อปอัปสิทธิ์ได้ 3 วิธีดังนี้

การตอบกลับของผู้ใช้ สถานะสิทธิ์การแจ้งเตือน
ผู้ใช้เลือกอนุญาต granted
ผู้ใช้เลือกบล็อก denied
ผู้ใช้ปิดป๊อปอัปโดยไม่เลือกตัวเลือกใดๆ default

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

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

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

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

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

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

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

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

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

  • Notification.permission เหลืออีก default

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

  • การเรียกใช้ Notification.requestPermission ซ้ำๆ จะสร้างป๊อปอัปเพิ่มเติม

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

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

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

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

คุณจะใช้คอนสตรัคเตอร์ 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 คือออบเจ็กต์ที่มีพร็อพเพอร์ตี้แสดงการตั้งค่าภาพและข้อมูลที่คุณสามารถใส่ไว้ในการแจ้งเตือน ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบ MDN เกี่ยวกับพารามิเตอร์การแจ้งเตือน

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

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

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

  • ใน public/index.js ให้กำหนดตัวแฮนเดิลเหตุการณ์ onerror ของการแจ้งเตือนใหม่ไว้ที่ท้ายฟังก์ชัน sendNotification ดังนี้
// 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 นี้ที่ glitch.com/edit/#!/codelab-notifications-get-started-completed

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