← กรณีการใช้งาน

การแจ้งเตือนแบบพุชที่ดึงผู้ใช้กลับมา

แจ้งเตือนสินค้ากลับมามีสต็อก การเตือนความจำ และการตอบกลับ ไปยัง iOS, Android และเว็บผ่าน API เดียวที่เข้ากันได้กับ Beams พร้อมหัวข้อที่ผู้ใช้เลือกเองและดีปลิงก์

ผู้ใช้ส่วนใหญ่ของคุณไม่ได้อยู่ในแอปตอนนี้ การแจ้งเตือนแบบพุชที่มาถูกเวลา (“สินค้าที่คุณสนใจกลับมามีสต็อกแล้ว”, “คลาสของคุณจะเริ่มใน 15 นาที”, “Ann ตอบกลับคุณ”) พาพวกเขากลับมาด้วยเหตุผลที่เขาสนใจ Hibira Push ส่งไปยัง iOS, Android และเบราว์เซอร์ผ่าน API เดียวที่เข้ากันได้กับ Beams คุณจึงเขียนตรรกะเพียงครั้งเดียว

สิ่งที่ผู้ใช้ได้รับ

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

ฟีเจอร์ที่ใช้

• Interest: หัวข้อที่อุปกรณ์สมัครรับ เช่น price-drop-sku-123 หรือ team-tigers เผยแพร่ครั้งเดียวถึงทุกคนที่ติดตาม
• ผู้ใช้ที่ยืนยันตัวตนแล้ว: เผยแพร่ถึง ID ผู้ใช้ แล้วไปถึงทุกอุปกรณ์ที่ผู้ใช้คนนั้นลงชื่อเข้าใช้
• APNs, FCM และ Web Push ในคำขอเดียว ด้วย SDK สำหรับเว็บ, Android และ iOS
• ใช้โค้ด Beams เดิมได้: SDK เซิร์ฟเวอร์ทางการของ Beams ทำงานกับ endpoint ของคุณ

ขั้นที่ 1: ให้ผู้ใช้เลือกสิ่งที่จะติดตาม

สมัครอุปกรณ์เข้ากับ interest เมื่อผู้ใช้แตะ “แจ้งเตือนฉัน”:

import { Client } from '@hibira-io/push-web';

const push = new Client({ instanceId: 'YOUR_INSTANCE_ID', endpoint: 'https://ws.hibira.io' });

// Browsers only show the permission prompt after a click or tap.
notifyButton.addEventListener('click', async () => {
  await push.start();
  await push.addDeviceInterest(`price-drop-sku-${sku}`);
  notifyButton.textContent = 'We will tell you';
});

Android และ iOS มี addDeviceInterest แบบเดียวกัน ดูการตั้งค่าแต่ละแพลตฟอร์มได้ที่คู่มือการแจ้งเตือนแบบพุช

ขั้นที่ 2: เผยแพร่เมื่อเกิดขึ้น

const PushNotifications = require('@pusher/push-notifications-server');
const beams = new PushNotifications({ instanceId: 'YOUR_INSTANCE_ID', secretKey: process.env.HIBIRA_PUSH_SECRET_KEY, endpoint: 'ws.hibira.io' });
beams.protocol = 'https';

await beams.publishToInterests([`price-drop-sku-${sku}`], {
  web: { notification: { title: 'Back in stock', body: `${name} is back, now ${price}.`, deep_link: `https://your-shop.example/p/${sku}` } },
  fcm: { notification: { title: 'Back in stock', body: `${name} is back, now ${price}.` }, data: { url: `/p/${sku}` } },
  apns: { aps: { alert: { title: 'Back in stock', body: `${name} is back, now ${price}.` } }, data: { url: `/p/${sku}` } },
});

เผยแพร่ครั้งเดียวไปถึงทุกอุปกรณ์ที่ติดตาม interest นั้น

ขั้นที่ 3: ข้อความส่วนตัวสำหรับผู้ใช้ที่ลงชื่อเข้าใช้

เชื่อมอุปกรณ์กับ ID ผู้ใช้ของคุณหลังลงชื่อเข้าใช้ (SDK จะเรียกเส้นทาง token ของคุณ) แล้วเผยแพร่ถึงผู้ใช้คนนั้น:

await beams.publishToUsers([String(userId)], {
  fcm: { notification: { title: 'Your class starts in 15 minutes', body: 'Yoga with Mei, studio 2.' } },
  apns: { aps: { alert: { title: 'Your class starts in 15 minutes', body: 'Yoga with Mei, studio 2.' } } },
  web: { notification: { title: 'Your class starts in 15 minutes', deep_link: 'https://your-site.example/bookings' } },
});

เมื่อผู้ใช้ออกจากระบบ ให้เรียก push.stop() ในเบราว์เซอร์ (clearAllState() บน Android และ iOS) และเรียก beams.deleteUser(userId) บนเซิร์ฟเวอร์เมื่อเขาลบบัญชี

เคล็ดลับ

• ขออนุญาตในจังหวะที่มีประโยชน์ (“บอกฉันเมื่อมีของ”) ไม่ใช่ตอนเปิดหน้าครั้งแรก คนจะตอบตกลงบ่อยกว่ามาก
• ใช้หนึ่ง interest ต่อหนึ่งสิ่งที่ติดตามได้ interest ไม่มีภาระอะไร แต่การแจ้งเตือนที่ผู้ใช้ไม่ได้ขอจะทำให้แอปของคุณถูกปิดเสียง
• เคารพช่วงเวลาห้ามรบกวนตามเขตเวลาของผู้ใช้บนเซิร์ฟเวอร์ก่อนเผยแพร่
• ใช้พุชร่วมกับเรียลไทม์: ขณะที่ผู้ใช้อยู่ในแอป ให้แสดงอีเวนต์เดียวกันในหน้าด้วยการแจ้งเตือนในแอปและข้ามการพุช