เริ่มต้นใช้งาน 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 เพื่อดูข้อมูลเพิ่มเติม