Push Notifications

ส่ง Web Push notifications ถึงผู้ใช้ของคุณ ตั้งค่าด้วย SDK แล้วให้ AI เชื่อมทุกอย่างให้อัตโนมัติ

หมายเหตุ

Push notification API ทำงานได้บางส่วนในระดับ SDK — การเก็บ subscription และการเรียก send จะสำเร็จโดยไม่มี error อย่างไรก็ตาม การส่ง push จริงไปยังเบราว์เซอร์ยังไม่ได้เปิดใช้งานในระบบ production: VAPID keys ที่ enable() คืนค่ากลับมาเป็น random bytes ไม่ใช่ P-256 EC keys ที่ถูกต้อง ดังนั้น browser subscription (pushManager.subscribe) จะล้มเหลวจนกว่าจะเปิดใช้งาน production delivery ข้อความจะถูกบันทึก log ไว้ แต่ไม่ถูกส่งถึงอุปกรณ์จริง ระบบ production delivery จะเปิดให้ใช้งานเร็วๆ นี้

ทุกแอปใน Proyecta สามารถส่ง browser และ PWA push notifications ให้กับผู้ใช้ได้ Proyecta SDK จัดการ VAPID key generation, การเก็บ subscription, การจัดการ topic และการส่ง notification — โดยไม่ต้องมีบัญชีบริการของบุคคลที่สาม

วิธีการทำงาน

Push notifications ใน Proyecta ทำงานตาม Web Push lifecycle มาตรฐาน 4 ขั้นตอน:

1. Enable — สร้าง VAPID keys สำหรับแอปของคุณ (ทำครั้งเดียว)
2. Subscribe — ลงทะเบียนอุปกรณ์ของผู้ใช้เพื่อรับ notifications
3. Identify — เชื่อม subscription ที่ไม่ระบุตัวตนกับผู้ใช้ที่ลงชื่อเข้าใช้แล้ว
4. Send — ส่ง notification ไปยังผู้ใช้เฉพาะ, topics, หรือทุกคน

ทั้งสี่ขั้นตอนอยู่ภายใต้ proyecta.pushNotifications ใน SDK

เปิดใช้งาน push สำหรับแอปของคุณ

การเรียกครั้งแรกจะสร้าง VAPID public key ที่เบราว์เซอร์ต้องใช้เพื่อสร้าง subscription โดยเป็น idempotent — การเรียกซ้ำจะได้ key เดิมกลับมา

import Proyecta from '@proyecta-ai/sdk';

const proyecta = new Proyecta({ apiKey: process.env.PROYECTA_API_KEY });

const { vapidPublicKey } = await proyecta.pushNotifications.enable();

ถามกับ AI ได้เลย: "Enable push notifications and store the VAPID key in a PROYECTA_VAPID_PUBLIC_KEY env var"

Subscribe อุปกรณ์ของผู้ใช้

ฝั่ง client ให้สร้าง Web Push subscription ด้วย VAPID key แล้วส่งไปยัง server พร้อมกับ visitorId:

// client side
const registration = await navigator.serviceWorker.ready;
const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: PROYECTA_VAPID_PUBLIC_KEY,
});

// server side (or via your API route)
const { secret } = await proyecta.pushNotifications.subscribe({
    visitorId: currentUser?.id ?? generateAnonymousId(),
    subscription: {
        endpoint: subscription.endpoint,
        keys: {
            auth: subscription.keys.auth,
            p256dh: subscription.keys.p256dh,
        },
    },
});
// Store `secret` on the client — it's required to unsubscribe or identify later

ใช้ user ID ที่ผ่านการยืนยันตัวตนเป็น visitorId หากผู้ใช้ลงชื่อเข้าใช้แล้ว หรือใช้ UUID ที่สร้างขึ้นสำหรับผู้เยี่ยมชมที่ไม่ระบุตัวตน

เชื่อม subscription ที่ไม่ระบุตัวตนกับผู้ใช้

เมื่อผู้เยี่ยมชมที่ไม่ระบุตัวตนลงชื่อเข้าใช้ ให้เชื่อม subscription ที่มีอยู่กับ authenticated user ID เพื่อให้การเรียก send ครั้งถัดไปสามารถระบุเป้าหมายได้:

await proyecta.pushNotifications.identify({
    secret: storedSubscriptionSecret,
    userId: authenticatedUser.id,
});

ส่ง notification

คุณสามารถระบุเป้าหมายเป็น visitor IDs เฉพาะ, topics, ทั้งสอง (แบบ union) หรือ broadcast ไปทุกคน หากละเว้นทั้ง visitorIds และ topics จะเป็นการ broadcast

// Send to specific users
await proyecta.pushNotifications.send({
    title: 'Your order has shipped',
    body: 'Track it from your dashboard',
    visitorIds: ['user_123', 'user_456'],
    data: { orderId: 'ord_789' }, // custom payload
});

// Send to everyone subscribed to a topic
await proyecta.pushNotifications.send({
    title: 'New feature just dropped',
    topics: ['product-updates'],
    icon: 'https://cdn.example.com/icon.png',
    image: 'https://cdn.example.com/banner.png',
});

// Broadcast to all subscribers
await proyecta.pushNotifications.send({
    title: 'Scheduled maintenance at 2am UTC',
});

send คืนค่า { sent, failed } เพื่อให้คุณทราบผลการส่ง ค่า sent ใน stub response ปัจจุบันสะท้อนจำนวน subscription ที่เก็บไว้ที่ถูกระบุเป็นเป้าหมาย ไม่ใช่การส่งถึงเบราว์เซอร์จริง — อย่าใช้ค่านี้เป็นการยืนยันการส่งจนกว่า production delivery จะเปิดใช้งาน

Topics

ผู้ใช้สามารถ subscribe หัวข้อที่ตั้งชื่อไว้ได้ (เช่น product-updates, weekly-digest) ผ่าน sub-resource proyecta.pushNotifications.topics นี่คือวิธีที่แนะนำในการจัดการรายการ opt-in — คุณไม่ต้องติดตาม visitor IDs เองสำหรับการอัปเดตแบบ broadcast

Unsubscribe

ลบ subscription โดยใช้ secret ที่ได้รับกลับมาจาก subscribe:

await proyecta.pushNotifications.unsubscribe({ secret });

ให้ AI จัดการแทน

คุณไม่จำเป็นต้องเขียนโค้ดเหล่านี้เอง ถาม AI ได้เลย:

• "Enable push notifications for my app. Register a service worker, call pushNotifications.subscribe on the client after the user grants permission, and store the secret in localStorage."
• "Send a push to all users subscribed to the 'breaking-news' topic whenever a new article is published."
• "After a user signs in, call pushNotifications.identify to link their anonymous subscription to their user ID."

ข้อควรระวัง

• Preview ไม่ส่ง push จริง Push notifications จะทำงานได้เฉพาะบนเวอร์ชันที่ publish แล้วของแอปคุณ เพราะเบราว์เซอร์กำหนดให้ต้องใช้ HTTPS บน origin จริงเท่านั้น
• iOS ต้องใช้ PWA บน iOS 16.4 ขึ้นไป Web Push ทำงานได้เฉพาะจาก Progressive Web App ที่ติดตั้งแล้ว (เพิ่มไว้บน home screen) เท่านั้น ไม่ใช่จาก Safari โดยตรง
• การอนุญาตให้ทำได้แค่ครั้งเดียว หากผู้ใช้ปฏิเสธการอนุญาต notification เบราว์เซอร์จะไม่อนุญาตให้แสดง prompt ซ้ำโดยอัตโนมัติ คุณต้องแนะนำให้ผู้ใช้ไปที่การตั้งค่าเบราว์เซอร์หรืออุปกรณ์เอง

เร็วๆ นี้

• การส่งแบบ scheduled และ event-triggered — ส่งอัตโนมัติตาม app events หรือตามกำหนดเวลา
• Deep linking — เปิดหน้าจอเฉพาะในแอปเมื่อผู้ใช้แตะที่ notification