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

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

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

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

  • Chrome: 20
  • ขอบ: 14
  • Firefox: 22.
  • Safari: 7.

แหล่งที่มา

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

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

Glitch ควรเปิดในแท็บ Chrome ใหม่

ภาพหน้าจอแสดงแอปสดแบบรีมิกซ์ในแท็บใหม่

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

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

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

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

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

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

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

คุณจะใช้ตัวสร้าง 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 เมื่อสิ้นสุดฟังก์ชัน 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 นี้ glitch.com/edit/#!/codelab-notifications-get-started-completed

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