Push Notifications

ส่ง Web Push notifications ไปยังผู้ใช้งานของคุณ แล้วให้ AI จัดการเชื่อมต่อทุกอย่างให้

หมายเหตุ

การส่ง push จริงไปยังเบราว์เซอร์จะใช้งานได้เมื่อ environment ของ Proyecta Cloud เปิดใช้งาน web-push delivery adapter (PUSH_DELIVERY_ADAPTER=web-push) ไว้ เมื่อเปิดใช้งานแล้ว ระบบจะออก P-256 VAPID key pair ที่ถูกต้องและ notifications จะถูกส่งไปยังเบราว์เซอร์ที่ subscribe ไว้ เมื่อปิดอยู่ ทุกอย่างยังทำงานครบวงจร — subscriptions จะถูกบันทึกและการส่งจะ resolve — แต่ VAPID key เป็นเพียง placeholder จึงไม่มีการส่งจริงเกิดขึ้นและ messages จะถูก log แทนที่จะถูก push หาก push ของคุณไม่ถึงผู้ใช้ ให้ตรวจสอบ adapter นี้เป็นอันดับแรก

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

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

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

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

สามขั้นตอนแรกเกิดขึ้นให้คุณอัตโนมัติภายใน hook usePush() ส่วนขั้นตอนที่สี่คุณทำจาก admin panel ของคุณ

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

app ของคุณมาพร้อม hook usePush() ที่จัดการ flow ฝั่งเบราว์เซอร์ทั้งหมด — ดึง VAPID key, ลงทะเบียน service worker, สร้าง Web Push subscription, เก็บ secret และเชื่อมโยง subscription ที่ไม่ระบุตัวตนกับผู้ใช้เมื่อพวกเขาล็อกอิน คุณไม่ต้องทำสิ่งเหล่านี้เองเลย:

import { usePush } from '@/hooks/usePush.ts';

function NotifyMeButton() {
    const { supported, subscribed, subscribe, unsubscribe, isPending } = usePush();

    // `supported: false` means this browser cannot do push at all — hide the CTA.
    if (!supported) return null;

    return (
        <button onClick={subscribed ? unsubscribe : subscribe} disabled={isPending}>
            {subscribed ? 'Turn off notifications' : 'Notify me'}
        </button>
    );
}

และถ้าคุณต้องการแค่ prompt สำหรับ opt-in ก็มี block สำเร็จรูปให้ใช้:

import { PushOptInButton } from '@/components/blocks/PushOptInButton.tsx';

<PushOptInButton description="Get told the moment a new drop lands." />;

ถามกับ AI ว่า: "Add a 'Notify me' button to the header that opts the visitor into push."

รองรับผู้เยี่ยมชมที่ไม่ระบุตัวตนด้วย — hook จะ subscribe พวกเขาด้วย id ที่สร้างขึ้น และเชื่อม subscription นั้นเข้ากับบัญชีของพวกเขาโดยอัตโนมัติเมื่อล็อกอิน ดังนั้น notification ที่คุณส่งภายหลังจะถึงพวกเขาไม่ว่าทางใดก็ทางหนึ่ง

ส่ง notification

การส่งเป็นการกระทำของ เจ้าของ ไม่ใช่สิ่งที่หน้าเว็บสาธารณะของ app ทำ — เบราว์เซอร์ของผู้เยี่ยมชมต้องไม่สามารถ push ไปยังผู้ชมทั้งหมดของคุณได้ ในการใช้งานประจำวัน คุณส่งจากส่วน Push ใน admin panel ของ app: เขียนหัวข้อและเนื้อหา เลือก topic หรือ broadcast ไปยังทุกคน แล้วลองส่งทดสอบไปยังอุปกรณ์ของคุณเองก่อน

คุณสามารถเลือกเป้าหมายเป็นทุกคน หรือเฉพาะผู้เยี่ยมชมที่ subscribe topic ใด topic หนึ่งก็ได้ notification หนึ่งรายการประกอบด้วยหัวข้อ เนื้อหา และอาจมี icon กับรูปภาพด้วย

หลังส่งแล้วคุณจะได้จำนวนอุปกรณ์ที่ส่งถึงและจำนวนที่ล้มเหลว มีข้อควรระวังหนึ่งอย่าง: ตัวเลขเหล่านี้สะท้อนการส่งจริงไปยังเบราว์เซอร์เฉพาะเมื่อเปิดใช้งาน web-push delivery adapter เท่านั้น เมื่อปิดอยู่ ตัวเลขจะสะท้อนจำนวน subscription ที่บันทึกไว้และเป็นเป้าหมาย ไม่ใช่การส่งจริง — อย่าใช้เป็นการยืนยันการส่งในกรณีนั้น

Topics

ผู้เยี่ยมชมสามารถ subscribe หัวข้อที่ตั้งชื่อไว้ (เช่น product-updates, weekly-digest) แทนที่จะมีเพียงรายชื่อเดียวแบบทั้งหมดหรือไม่เอาเลย นี่คือวิธีที่แนะนำในการจัดการรายชื่อ opt-in — คุณไม่จำเป็นต้องติดตาม visitor ID เองสำหรับการอัปเดตแบบ broadcast Topics จะปรากฏเป็นตัวเลือกกลุ่มผู้รับในส่วน Push ของ admin panel

ยกเลิก subscription

เรียก unsubscribe จาก hook usePush() ตัวเดียวกัน — มันเก็บ secret ของ subscription ไว้อยู่แล้ว คุณจึงไม่ต้องเก็บหรือส่งอะไรเพิ่ม:

const { subscribed, unsubscribe } = usePush();

{
    subscribed && <button onClick={unsubscribe}>Turn off notifications</button>;
}

ให้ AI จัดการเชื่อมต่อให้

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

• "Add a 'Notify me' button to the header that opts the visitor into push notifications."
• "Put a push opt-in prompt on the product page, but only show it to visitors who haven't already subscribed."
• "Add a topic called 'breaking-news' that visitors can opt into from the footer."

ข้อควรระวัง

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

เร็วๆ นี้

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