ใช้ข้อความ Push เพื่อสร้างและมีส่วนร่วมกับผู้ใช้อีกครั้ง

Kate Jeffreys

เหตุใดจึงควรใช้ข้อความ Push

การแจ้งเตือนจะแสดงข้อมูลแก่ผู้ใช้เป็นส่วนเล็กๆ เว็บแอปสามารถใช้การแจ้งเตือนเพื่อบอกผู้ใช้เกี่ยวกับเหตุการณ์ที่สำคัญและมีการจำกัดช่วงเวลา หรือการดำเนินการที่ผู้ใช้ต้องทำ

รูปลักษณ์ของการแจ้งเตือนจะแตกต่างกันไปตามแพลตฟอร์ม เช่น

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

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

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

สร้างการแจ้งเตือนโดยใช้ Notifications API ออบเจ็กต์ Notification มีสตริง title และออบเจ็กต์ options เช่น

let title = 'Hi!';
let options = {
  body: 'Very Important Message',
  /* other options can go here */
};
let notification = new Notification(title, options);

title จะแสดงเป็นตัวหนาเมื่อการแจ้งเตือนทำงานอยู่ ส่วน body จะมีข้อความเพิ่มเติม

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

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

Notification.requestPermission();

ข้อความ Push ทำงานอย่างไร

การแจ้งเตือนจะมีประสิทธิภาพอย่างแท้จริงเมื่อใช้ร่วมกับ Service Worker และเทคโนโลยี Push

Service Worker สามารถทำงานในเบื้องหลังและแสดงการแจ้งเตือนได้แม้ว่าแอปจะไม่ปรากฏบนหน้าจอ
เทคโนโลยีพุชช่วยให้คุณกำหนดค่าเซิร์ฟเวอร์เพื่อส่งการแจ้งเตือนเมื่อเหมาะสมกับแอปของคุณได้ โดยบริการพุชจะสร้าง URL ที่ไม่ซ้ำกันสำหรับ Service Worker ที่สมัครใช้บริการแต่ละรายการ การส่งข้อความไปยัง URL ของ Service Worker จะทำให้เกิดเหตุการณ์ใน Service Worker นั้น ซึ่งจะแจ้งให้แสดงการแจ้งเตือน

ในโฟลว์ตัวอย่างต่อไปนี้ ไคลเอ็นต์จะลงทะเบียน Service Worker และสมัครรับการแจ้งเตือนแบบพุช จากนั้นเซิร์ฟเวอร์จะส่งการแจ้งเตือนไปยังปลายทางการสมัครใช้บริการ

ไคลเอ็นต์และ Service Worker ใช้ JavaScript แบบเดิมโดยไม่มีไลบรารีเพิ่มเติม เซิร์ฟเวอร์สร้างขึ้นด้วยแพ็กเกจ express npm ใน Node.js และใช้แพ็กเกจ web-push npm เพื่อส่งการแจ้งเตือน หากต้องการส่งข้อมูลไปยังเซิร์ฟเวอร์ ไคลเอ็นต์จะเรียกใช้ URL ของ POST ที่เซิร์ฟเวอร์เปิดเผย

ส่วนที่ 1: ลงทะเบียน Service Worker และสมัครรับการแจ้งเตือนแบบพุช

แอปไคลเอ็นต์จะลงทะเบียน Service Worker กับ ServiceWorkerContainer.register() Service Worker ที่ลงทะเบียนจะทำงานต่อไปในเบื้องหลังเมื่อไคลเอ็นต์ไม่ได้ใช้งาน

รหัสไคลเอ็นต์:
```
navigator.serviceWorker.register('sw.js');
```
ไคลเอ็นต์ขอสิทธิ์จากผู้ใช้เพื่อส่งการแจ้งเตือน

รหัสไคลเอ็นต์:
```
Notification.requestPermission();
```
หากต้องการเปิดใช้ข้อความ Push Service Worker จะใช้ PushManager.subscribe() เพื่อสร้างการสมัครรับข้อความ Push ในการเรียกใช้ PushManager.subscribe() Service Worker จะระบุคีย์ API ของแอปเป็นตัวระบุ

รหัสไคลเอ็นต์:
```
navigator.serviceWorker.register('sw.js').then(sw => {
  sw.pushManager.subscribe({ /* API key */ });
});
```
บริการพุช เช่น Firebase Cloud Messaging ทำงานในรูปแบบการสมัครใช้บริการ เมื่อ Service Worker สมัครใช้บริการ Push โดยการเรียกใช้ PushManager.subscribe() บริการ Push จะสร้าง URL ที่ไม่ซ้ำกันสำหรับ Service Worker นั้น URL นี้เรียกว่าปลายทางการสมัครใช้บริการ

ไคลเอ็นต์จะส่งปลายทางการสมัครใช้บริการไปยังเซิร์ฟเวอร์แอป

รหัสไคลเอ็นต์:

navigator.serviceWorker.register('sw.js').then(sw => {
  sw.pushManager.subscribe({ /* API key */ }).then(subscription => {
    sendToServer(subscription, '/new-subscription', 'POST');
  });
});

รหัสเซิร์ฟเวอร์:

app.post('/new-subscription', (request, response) => {
  // extract subscription from request
  // send 'OK' response
});

ส่วนที่ 2: ส่งการแจ้งเตือน

เว็บเซิร์ฟเวอร์จะส่งการแจ้งเตือนไปยังปลายทางการสมัครใช้บริการ

รหัสเซิร์ฟเวอร์:

const webpush = require('web-push');

let options = { /* config info for cloud messaging and API key */ };
let subscription = { /* subscription created in Part 1*/ };
let payload = { /* notification */ };

webpush.sendNotification(subscription, payload, options);

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

โค้ด Service Worker:
```
self.addEventListener('push', (event) => {
  let title = { /* get notification title from event data */ }
  let options = { /* get notification options from event data */ }
  showNotification(title, options);
})
```
ผู้ใช้โต้ตอบกับการแจ้งเตือน ซึ่งจะทำให้เว็บแอปทำงานหากยังไม่ได้ทำงาน

ขั้นตอนถัดไป

ขั้นตอนถัดไปคือการติดตั้งใช้งานข้อความ Push

เราได้สร้างชุด Codelab เพื่อแนะนำคุณในแต่ละขั้นตอนของกระบวนการ