ถึงตรงนี้ เราได้พูดถึงการติดตามผู้ใช้และการส่งข้อความพุชไปแล้ว ขั้นตอนต่อไปคือการรับข้อความ Push นี้ในอุปกรณ์ของผู้ใช้และแสดงการแจ้งเตือน (รวมถึงงานอื่นๆ ที่เราอาจต้องการทำ)
เหตุการณ์ Push
เมื่อได้รับข้อความ ก็จะส่งผลให้มีการส่งเหตุการณ์พุชไปยัง Service Worker
โค้ดสำหรับการตั้งค่า Listener เหตุการณ์พุชควรคล้ายกับ Listener เหตุการณ์อื่นๆ ที่คุณเขียนใน JavaScript ดังนี้
self.addEventListener('push', function(event) {
if (event.data) {
console.log('This push event has data: ', event.data.text());
} else {
console.log('This push event has no data.');
}
});
ส่วนแปลกๆ ของโค้ดนี้สำหรับนักพัฒนาแอปส่วนใหญ่ที่เพิ่งเริ่มใช้ Service Worker ก็คือตัวแปร self
self
ใช้กันโดยทั่วไปใน Web Workers ซึ่งเป็น Service Worker ส่วน self
หมายถึงขอบเขตรวม คล้ายกับ window
ในหน้าเว็บ แต่สำหรับ Web Work และ Service Worker แล้ว self
จะหมายถึงตัวผู้ปฏิบัติงานเอง
ในตัวอย่างด้านบน self.addEventListener()
อาจหมายถึงการเพิ่ม Listener เหตุการณ์ให้กับ Service Worker เองก็ได้
ในตัวอย่างเหตุการณ์พุช เราจะตรวจสอบว่ามีข้อมูลไหม และพิมพ์บางอย่างไปยังคอนโซล
ยังมีวิธีอื่นๆ ในการแยกวิเคราะห์ข้อมูลจากเหตุการณ์พุชได้ด้วย
// Returns string
event.data.text()
// Parses data as JSON string and returns an Object
event.data.json()
// Returns blob of data
event.data.blob()
// Returns an arrayBuffer
event.data.arrayBuffer()
คนส่วนใหญ่ใช้ json()
หรือ text()
ขึ้นอยู่กับว่าผู้ใช้คาดหวังอะไรจากแอปพลิเคชัน
ตัวอย่างนี้แสดงวิธีเพิ่ม Listener เหตุการณ์พุชและวิธีเข้าถึงข้อมูล แต่กลับไม่มีฟังก์ชันที่สำคัญมาก 2 อย่าง ไม่แสดงการแจ้งเตือนและ
ไม่ได้ใช้ event.waitUntil()
รอจนถึง
สิ่งหนึ่งที่ควรทำความเข้าใจเกี่ยวกับ Service Worker คือคุณควบคุมได้น้อยมากว่าโค้ดของ Service Worker จะทำงานเมื่อใด เบราว์เซอร์จะตัดสินใจว่าจะปลุกระบบเมื่อใด
และยุติการทำงานเมื่อใด ทางเดียวที่คุณจะบอกเบราว์เซอร์ได้ว่า "เฮ้ ฉันยุ่งมากเพื่อทำเรื่องสำคัญ" คือการส่งคำมั่นสัญญาไปยังเมธอด event.waitUntil()
ด้วยวิธีนี้ เบราว์เซอร์จะทำให้ Service Worker ทำงานต่อไปจนกว่าสัญญาที่คุณส่งเข้ามาจะเรียบร้อย
กิจกรรมข้อความ Push มีข้อกำหนดเพิ่มเติมว่าคุณต้องแสดงการแจ้งเตือนก่อนที่คำสัญญาที่คุณส่งจะสำเร็จ
ตัวอย่างพื้นฐานของการแสดงการแจ้งเตือนมีดังนี้
self.addEventListener('push', function(event) {
const promiseChain = self.registration.showNotification('Hello, World.');
event.waitUntil(promiseChain);
});
การโทรไปยัง self.registration.showNotification()
เป็นวิธีการแสดงการแจ้งเตือนแก่ผู้ใช้และคุณจะได้รับสัญญาว่าจะมีผลทันทีเมื่อมีการแจ้งเตือนปรากฏขึ้น
เพื่อทำให้ตัวอย่างนี้ชัดเจนที่สุด ผมจึงกำหนดสัญญานี้ให้กับตัวแปรชื่อ promiseChain
ซึ่งจะถูกส่งผ่านไปยัง event.waitUntil()
ฉันรู้ว่าเรื่องนี้มีรายละเอียดมาก แต่ฉันเห็นปัญหามากมายที่ก่อให้เกิดความเข้าใจผิดเพราะความเข้าใจผิดว่าจะให้ส่งอะไรไปยัง waitUntil()
หรือเป็นผลจากเชนสัญญาที่ผิดพลาด
ตัวอย่างที่ซับซ้อนมากขึ้นซึ่งมีคำขอข้อมูลของเครือข่ายและการติดตามเหตุการณ์พุชด้วยข้อมูลวิเคราะห์อาจมีลักษณะดังนี้
self.addEventListener('push', function(event) {
const analyticsPromise = pushReceivedTracking();
const pushInfoPromise = fetch('/api/get-more-data')
.then(function(response) {
return response.json();
})
.then(function(response) {
const title = response.data.userName + ' says...';
const message = response.data.message;
return self.registration.showNotification(title, {
body: message
});
});
const promiseChain = Promise.all([
analyticsPromise,
pushInfoPromise
]);
event.waitUntil(promiseChain);
});
เราจะเรียกฟังก์ชันที่ส่งคืนคำสัญญา pushReceivedTracking()
สำหรับตัวอย่างนี้ เราสามารถสมมติว่าจะส่งคำขอเครือข่ายไปยังผู้ให้บริการวิเคราะห์ของเรา นอกจากนี้ เรายังจะส่งคำขอเครือข่าย รับการตอบกลับ และแสดงการแจ้งเตือนโดยใช้ข้อมูลการตอบกลับสำหรับชื่อและข้อความในการแจ้งเตือน
เราสามารถทำให้ Service Worker ยังคงอยู่ในขณะที่งานทั้ง 2 อย่างนี้เสร็จสิ้นโดยการรวมคำสัญญาเหล่านี้กับ Promise.all()
ระบบจะส่งคำสัญญาที่ได้ไปยัง event.waitUntil()
ซึ่งหมายความว่าเบราว์เซอร์จะรอจนกระทั่งสัญญาทั้งคู่สิ้นสุดลง ก่อนที่จะตรวจสอบว่ามีการแสดงการแจ้งเตือนแล้วและสิ้นสุด Service Worker
เหตุผลที่เราควรกังวลเกี่ยวกับ waitUntil()
และวิธีใช้งานเนื่องจากหนึ่งในปัญหาที่นักพัฒนาแอปพบได้บ่อยที่สุดคือเมื่อห่วงโซ่ของสัญญาไม่ถูกต้อง / เสีย Chrome จะแสดงการแจ้งเตือน "เริ่มต้น" นี้
![รูปภาพของการแจ้งเตือนเริ่มต้นใน Chrome](https://web.dev/static/articles/push-notifications-handling-messages/image/an-image-the-default-not-ec0a0feda0315.png?authuser=5&hl=th)
Chrome จะแสดงเฉพาะการแจ้งเตือน "มีการอัปเดตเว็บไซต์นี้ในเบื้องหลัง" เมื่อได้รับข้อความ Push และข้อความ Push ในโปรแกรมทำงานของบริการจะไม่แสดงการแจ้งเตือนหลังจากที่สัญญาที่ส่งไปยัง event.waitUntil()
สิ้นสุดลง
สาเหตุหลักที่นักพัฒนาซอฟต์แวร์ถูกจับได้ก็คือโค้ดของพวกเขามักจะเรียกใช้ self.registration.showNotification()
แต่ไม่ทำอะไรตามคำสัญญาที่ให้ไว้ ซึ่งจะส่งผลให้ระบบแสดงการแจ้งเตือนเริ่มต้นเป็นระยะๆ ตัวอย่างเช่น เราอาจนำการคืนสินค้าสำหรับ self.registration.showNotification()
ในตัวอย่างด้านบนออก และมีความเสี่ยงที่จะเห็นการแจ้งเตือนนี้
self.addEventListener('push', function(event) {
const analyticsPromise = pushReceivedTracking();
const pushInfoPromise = fetch('/api/get-more-data')
.then(function(response) {
return response.json();
})
.then(function(response) {
const title = response.data.userName + ' says...';
const message = response.data.message;
self.registration.showNotification(title, {
body: message
});
});
const promiseChain = Promise.all([
analyticsPromise,
pushInfoPromise
]);
event.waitUntil(promiseChain);
});
คุณจะรู้ได้ว่าการพลาดเป็นเรื่องง่ายได้อย่างไร
อย่าลืมว่าหากคุณเห็นการแจ้งเตือนนั้น ให้ตรวจสอบห่วงโซ่สัญญาและ event.waitUntil()
ในส่วนถัดไป เราจะมาดูสิ่งที่เราทำได้เพื่อจัดรูปแบบการแจ้งเตือนและ เนื้อหาที่จะแสดงได้
ขั้นตอนถัดไป
- ภาพรวมข้อความ Push ในเว็บ
- วิธีการทำงานของ Push
- การสมัครใช้บริการ
- UX ของสิทธิ์
- การส่งข้อความด้วยไลบรารีพุชจากเว็บ
- โปรโตคอลพุชจากเว็บ
- การจัดการเหตุการณ์พุช
- การแสดงการแจ้งเตือน
- ลักษณะการทำงานของการแจ้งเตือน
- รูปแบบการแจ้งเตือนทั่วไป
- คำถามที่พบบ่อยเกี่ยวกับข้อความ Push
- ปัญหาที่พบได้ทั่วไปและการรายงานข้อบกพร่อง