หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

Browser Support

Source

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

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

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

คุณควรเห็นข้อความต่อไปนี้ในคอนโซล
```
Notification permission is default
```
หากคุณไม่ทราบว่าหมายความว่าอย่างไร ก็ไม่ต้องกังวล เพราะเราจะเปิดเผยให้ทราบในเร็วๆ นี้
คลิกปุ่มในแอปที่ใช้งานจริง: ขอสิทธิ์ส่งการแจ้งเตือนและส่งการแจ้งเตือน

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

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

แทนที่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);
    });
}

โหลดแท็บ Chrome ที่คุณกำลังดูแอปที่ใช้งานจริงซ้ำ
ในอินเทอร์เฟซของแอปที่ใช้งานจริง ให้คลิกขอสิทธิ์ส่งการแจ้งเตือน ป๊อปอัปจะปรากฏขึ้น

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

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

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

คลิกไอคอนแม่กุญแจข้างแถบ URL ของ Chrome แล้วรีเซ็ตการตั้งค่าสิทธิ์การแจ้งเตือนของเว็บไซต์เป็นค่าเริ่มต้น
คลิกขอสิทธิ์ส่งการแจ้งเตือน แล้วเลือกบล็อกจากป๊อปอัป
คลิกส่งการแจ้งเตือนและดูว่าจะเกิดอะไรขึ้น ข้อความแสดงข้อผิดพลาด (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