Codelab นี้จะแสดงวิธีสร้างเซิร์ฟเวอร์ข้อความ Push แบบทีละขั้นตอน เมื่อจบ Codelab คุณจะมีเซิร์ฟเวอร์ที่มีคุณสมบัติดังนี้
- ติดตามการสมัครรับการแจ้งเตือนแบบพุช (เช่น เซิร์ฟเวอร์จะสร้างระเบียนฐานข้อมูลใหม่เมื่อไคลเอ็นต์เลือกใช้การแจ้งเตือนแบบพุช และลบระเบียนฐานข้อมูลที่มีอยู่เมื่อไคลเอ็นต์เลือกไม่ใช้)
- ส่งข้อความ Push ไปยังไคลเอ็นต์รายเดียว
- ส่งข้อความ Push ไปยังลูกค้าที่สมัครใช้บริการทุกราย
Codelab นี้มุ่งเน้นที่จะช่วยให้คุณเรียนรู้จากการทําจริง และไม่พูดถึงแนวคิดมากนัก โปรดดูวิธีการทำงานของข้อความ Push เพื่อเรียนรู้เกี่ยวกับแนวคิดข้อความ Push
โค้ดไคลเอ็นต์ของโค้ดแล็บนี้เสร็จสมบูรณ์แล้ว คุณจะใช้เซิร์ฟเวอร์ในโค้ดแล็บนี้เท่านั้น ดูวิธีติดตั้งใช้งานไคลเอ็นต์ข้อความ Push ได้ที่ Codelab: สร้างไคลเอ็นต์ข้อความ Push
ไปที่ push-notifications-server-codelab-complete (แหล่งที่มา) เพื่อดูโค้ดที่สมบูรณ์
ความเข้ากันได้กับเบราว์เซอร์
เป็นที่ทราบกันว่าโค้ดแล็บนี้ใช้งานได้กับระบบปฏิบัติการและเบราว์เซอร์ต่อไปนี้
- Windows: Chrome, Edge
- macOS: Chrome, Firefox
- Android: Chrome, Firefox
เป็นที่ทราบกันดีว่าโค้ดแล็บนี้ไม่ทำงานร่วมกับระบบปฏิบัติการต่อไปนี้ (หรือชุดค่าผสมระบบปฏิบัติการและเบราว์เซอร์)
- macOS: Brave, Edge, Safari
- iOS
สแต็กแอปพลิเคชัน
- เซิร์ฟเวอร์สร้างขึ้นจาก Express.js
- ไลบรารี Node.js web-push จะจัดการตรรกะข้อความ Push ทั้งหมด
- ระบบจะเขียนข้อมูลการสมัครใช้บริการลงในไฟล์ JSON โดยใช้ lowdb
คุณไม่จำเป็นต้องใช้เทคโนโลยีเหล่านี้เพื่อติดตั้งใช้งาน Push Notification เราเลือกเทคโนโลยีเหล่านี้เนื่องจากมอบประสบการณ์การใช้งาน Codelab ที่เชื่อถือได้
ตั้งค่า
รับสำเนาที่แก้ไขได้ของโค้ด
ตัวแก้ไขโค้ดที่คุณเห็นทางด้านขวาของวิธีการเหล่านี้จะเรียกว่า UI ของ Glitch ตลอดทั้ง Codelab นี้
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
ตั้งค่าการตรวจสอบสิทธิ์
คุณต้องตั้งค่าเซิร์ฟเวอร์และไคลเอ็นต์ด้วยคีย์การตรวจสอบสิทธิ์ก่อนจึงจะใช้ Push Notification ได้ โปรดดูสาเหตุที่หัวข้อลงชื่อในคําขอโปรโตคอล Push บนเว็บ
- เปิดเทอร์มินัลของ Glitch โดยคลิกเครื่องมือ แล้วคลิกเทอร์มินัล
- เรียกใช้
npx web-push generate-vapid-keys
ในเทอร์มินัล คัดลอกค่าของคีย์ส่วนตัวและคีย์สาธารณะ - เปิด
.env
แล้วอัปเดตVAPID_PUBLIC_KEY
และVAPID_PRIVATE_KEY
ตั้งค่าVAPID_SUBJECT
เป็นmailto:test@test.test
ค่าเหล่านี้ทั้งหมดควรอยู่ในเครื่องหมายคำพูดคู่ หลังจากอัปเดตแล้ว ไฟล์.env
ควรมีลักษณะคล้ายกับตัวอย่างต่อไปนี้
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
- ปิดเทอร์มินัล Glitch
- เปิด
public/index.js
- ให้แทนที่
VAPID_PUBLIC_KEY_VALUE_HERE
ด้วยค่าของคีย์สาธารณะ
จัดการการสมัครใช้บริการ
ลูกค้าของคุณจัดการกระบวนการสมัครใช้บริการเกือบทั้งหมด สิ่งที่เซิร์ฟเวอร์ต้องทําหลักๆ คือบันทึกการสมัครรับการแจ้งเตือนแบบพุชใหม่และลบการสมัครรับข้อมูลเก่า การสมัครใช้บริการเหล่านี้จะช่วยให้คุณส่งข้อความไปยังลูกค้าในอนาคตได้ ดูบริบทเพิ่มเติมเกี่ยวกับกระบวนการสมัครใช้บริการได้ที่สมัครใช้บริการ Push Notification ให้กับลูกค้า
บันทึกข้อมูลการสมัครใช้บริการใหม่
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ
- คลิกลงทะเบียน Service Worker ในแท็บแอป ในช่องสถานะ คุณควร เห็นข้อความที่มีลักษณะคล้ายกันนี้
Service worker registered. Scope: https://desert-cactus-sunset.glitch.me/
- ในแท็บแอป ให้คลิกสมัครรับการพุช เบราว์เซอร์หรือระบบปฏิบัติการอาจถามว่าคุณต้องการอนุญาตให้เว็บไซต์ส่งข้อความ Push ให้คุณหรือไม่ คลิกอนุญาต (หรือวลีที่เทียบเท่าซึ่งเบราว์เซอร์/ระบบปฏิบัติการของคุณใช้) ในช่องสถานะ คุณควรเห็นข้อความที่คล้ายกับข้อความต่อไปนี้
Service worker subscribed to push. Endpoint: https://fcm.googleapis.com/fcm/send/…
- กลับไปที่โค้ดโดยคลิกดูซอร์สโค้ดใน UI ของ Glitch
- เปิดบันทึกข้อบกพร่องโดยคลิกเครื่องมือ แล้วคลิกบันทึก คุณควรเห็น
/add-subscription
ตามด้วยข้อมูลบางส่วน/add-subscription
คือ URL ที่ไคลเอ็นต์ส่งคำขอ POST ไปเมื่อต้องการสมัครรับข้อความ Push ข้อมูลต่อไปนี้คือข้อมูลการสมัครใช้บริการของลูกค้าที่คุณต้องบันทึก - เปิด
server.js
- อัปเดตตรรกะตัวแฮนเดิลเส้นทาง
/add-subscription
ด้วยโค้ดต่อไปนี้
app.post('/add-subscription', (request, response) => {
console.log('/add-subscription');
console.log(request.body);
console.log(`Subscribing ${request.body.endpoint}`);
db.get('subscriptions')
.push(request.body)
.write();
response.sendStatus(200);
});
ลบข้อมูลการสมัครใช้บริการเก่า
- กลับไปที่แท็บแอป
- คลิกยกเลิกการสมัครรับข้อความ Push
- ดูบันทึกข้อบกพร่องอีกครั้ง คุณควรเห็น
/remove-subscription
ตามด้วยข้อมูลการสมัครใช้บริการของลูกค้า - อัปเดตตรรกะตัวแฮนเดิลเส้นทาง
/remove-subscription
ด้วยโค้ดต่อไปนี้
app.post('/remove-subscription', (request, response) => {
console.log('/remove-subscription');
console.log(request.body);
console.log(`Unsubscribing ${request.body.endpoint}`);
db.get('subscriptions')
.remove({endpoint: request.body.endpoint})
.write();
response.sendStatus(200);
});
ส่งการแจ้งเตือน
ตามที่อธิบายไว้ในส่วนส่งข้อความพุช เซิร์ฟเวอร์ของจริงๆ แล้วไม่ได้ส่งข้อความพุชไปยังไคลเอ็นต์โดยตรง แต่จะใช้บริการ Push แทน โดยพื้นฐานแล้ว เซิร์ฟเวอร์จะเริ่มต้นกระบวนการส่งข้อความไปยังไคลเอ็นต์ด้วยการส่งคำขอบริการเว็บ (คำขอโปรโตคอล Web Push) ไปยังบริการเว็บ (บริการ Push) ที่เป็นของผู้ให้บริการเบราว์เซอร์ที่ผู้ใช้ของคุณใช้
- อัปเดตตรรกะตัวแฮนเดิลเส้นทาง
/notify-me
ด้วยโค้ดต่อไปนี้
app.post('/notify-me', (request, response) => {
console.log('/notify-me');
console.log(request.body);
console.log(`Notifying ${request.body.endpoint}`);
const subscription =
db.get('subscriptions').find({endpoint: request.body.endpoint}).value();
sendNotifications([subscription]);
response.sendStatus(200);
});
- อัปเดตฟังก์ชัน
sendNotifications()
ด้วยโค้ดต่อไปนี้
function sendNotifications(subscriptions) {
// TODO
// Create the notification content.
const notification = JSON.stringify({
title: "Hello, Notifications!",
options: {
body: `ID: ${Math.floor(Math.random() * 100)}`
}
});
// Customize how the push service should attempt to deliver the push message.
// And provide authentication information.
const options = {
TTL: 10000,
vapidDetails: vapidDetails
};
// Send a push message to each client specified in the subscriptions array.
subscriptions.forEach(subscription => {
const endpoint = subscription.endpoint;
const id = endpoint.substr((endpoint.length - 8), endpoint.length);
webpush.sendNotification(subscription, notification, options)
.then(result => {
console.log(`Endpoint ID: ${id}`);
console.log(`Result: ${result.statusCode}`);
})
.catch(error => {
console.log(`Endpoint ID: ${id}`);
console.log(`Error: ${error} `);
});
});
}
- อัปเดตตรรกะตัวแฮนเดิลเส้นทาง
/notify-all
ด้วยโค้ดต่อไปนี้
app.post('/notify-all', (request, response) => {
console.log('/notify-all');
response.sendStatus(200);
console.log('Notifying all subscribers');
const subscriptions =
db.get('subscriptions').cloneDeep().value();
if (subscriptions.length > 0) {
sendNotifications(subscriptions);
response.sendStatus(200);
} else {
response.sendStatus(409);
}
});
- กลับไปที่แท็บแอป
- คลิกยกเลิกการสมัครรับข้อความ Push แล้วคลิกสมัครรับข้อความ Push อีกครั้ง ขั้นตอนนี้จำเป็นเนื่องจากดังที่ได้กล่าวไว้ก่อนหน้านี้ว่า Glitch จะรีสตาร์ทโปรเจ็กต์ทุกครั้งที่คุณแก้ไขโค้ดและโปรเจ็กต์ได้รับการกำหนดค่าให้ลบฐานข้อมูลเมื่อเริ่มต้น
- คลิกแจ้งเตือนฉัน คุณจะได้รับข้อความ Push ชื่อควรเป็น
Hello, Notifications!
และเนื้อหาควรเป็นID: <ID>
โดยที่<ID>
เป็นตัวเลขแบบสุ่ม - เปิดแอปในเบราว์เซอร์หรืออุปกรณ์อื่น แล้วลองสมัครรับการแจ้งเตือนแบบพุช จากนั้นคลิกปุ่มแจ้งเตือนทั้งหมด คุณควรได้รับการแจ้งเตือนเดียวกันในอุปกรณ์ทุกเครื่องที่สมัครรับข้อมูล (กล่าวคือ รหัสในเนื้อหาของข้อความ Push ควรจะเหมือนกัน)
ขั้นตอนถัดไป
- อ่านภาพรวมข้อความ Push เพื่อให้เข้าใจแนวคิดที่ลึกซึ้งยิ่งขึ้นเกี่ยวกับวิธีการทำงานของข้อความ Push
- ลองใช้ Codelab: สร้างไคลเอ็นต์ข้อความ Push เพื่อดูวิธีสร้างไคลเอ็นต์ที่ขอสิทธิ์การแจ้งเตือน สมัครรับข้อมูลอุปกรณ์เพื่อรับข้อความ Push และใช้โปรแกรมทำงานของบริการเพื่อรับข้อความ Push และแสดงข้อความเป็นการแจ้งเตือน