Push Notifications

अपने users को Web Push notifications भेजें, और AI को सब कुछ wire up करने दें।

टिप्पणी

Real browser push delivery तब उपलब्ध होती है जब आपके Proyecta Cloud environment में web-push delivery adapter enabled हो (PUSH_DELIVERY_ADAPTER=web-push)। इसके चालू होने पर, एक valid P-256 VAPID key pair जारी होती है और notifications subscribed browsers तक deliver होती हैं। बंद होने पर भी सब कुछ round-trip करता है — subscriptions store होती हैं और sends resolve होते हैं — लेकिन VAPID key एक placeholder होती है, इसलिए कोई real delivery नहीं होती और messages push होने की बजाय log होते हैं। अगर आपके pushes नहीं आ रहे, तो सबसे पहले यही adapter check करें।

हर Proyecta app अपने users को browser और PWA push notifications भेज सकती है। Proyecta, VAPID key generation, subscription storage, topic management, और delivery सब संभालता है — कोई third-party account की ज़रूरत नहीं।

यह कैसे काम करता है

Proyecta में push notifications, standard Web Push lifecycle को चार steps में follow करती हैं:

1. Enable — जब पहली बार ज़रूरत होती है, आपकी app के लिए VAPID keys generate हो जाती हैं
2. Subscribe — notifications receive करने के लिए visitor का device register करें
3. Identify — किसी anonymous subscription को signed-in user से link करें
4. Send — specific users, topics, या सभी को notification deliver करें

पहले तीन काम usePush() hook के अंदर आपके लिए हो जाते हैं; चौथा आप अपने admin panel से करते हैं।

User का device subscribe करें

आपकी app एक usePush() hook के साथ आती है जो पूरा browser flow संभालता है — VAPID key fetch करना, service worker register करना, Web Push subscription बनाना, secret store करना, और sign in करते ही anonymous subscription को user से link करना। इनमें से कुछ भी आपको खुद नहीं करना पड़ता:

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>
    );
}

अगर आपको बस opt-in prompt चाहिए, तो एक तैयार 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."

Anonymous visitors भी support किए जाते हैं — hook उन्हें एक generated id के साथ subscribe करता है और sign in करते ही उस subscription को उनके account से अपने आप दोबारा link कर देता है, इसलिए बाद में भेजी गई notification उन तक दोनों ही सूरत में पहुँचती है।

Notification भेजें

भेजना एक owner action है, ऐसा कुछ नहीं जो आपकी app के public pages करें — किसी visitor का browser आपकी पूरी audience को push नहीं कर पाना चाहिए। रोज़मर्रा में आप अपने app के admin panel के Push section से भेजते हैं: title और body लिखें, कोई topic चुनें या सभी को broadcast करें, और पहले अपने ही device पर एक test भेजें।

आप सभी को target कर सकते हैं, या सिर्फ़ उन visitors को जो किसी खास topic के subscriber हैं। एक notification में title, body, और optionally एक icon और image होती है।

भेजने के बाद आपको यह count मिलता है कि वह कितने devices तक गई और कितने fail हुए। एक चेतावनी: ये संख्याएँ केवल तभी real browser deliveries दर्शाती हैं जब web-push delivery adapter चालू हो। बंद होने पर, count actual deliveries की बजाय targeted stored subscriptions की संख्या दिखाता है — इसलिए उस स्थिति में इसे delivery confirmation न मानें।

Topics

Visitors एक ही all-or-nothing list की बजाय named topics (जैसे product-updates, weekly-digest) को subscribe कर सकते हैं। Opt-ins manage करने का यही recommended तरीका है — आपको broadcast के लिए खुद visitor IDs track नहीं करनी पड़तीं। Topics, admin panel के Push section में audience picker के रूप में दिखते हैं।

Unsubscribe करें

उसी usePush() hook से unsubscribe call करें — उसके पास पहले से subscription secret होता है, इसलिए आपको कुछ भी store या pass नहीं करना पड़ता:

const { subscribed, unsubscribe } = usePush();

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

AI से wire up करवाएं

यह सब खुद लिखने की ज़रूरत नहीं है। 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 में real pushes नहीं आतीं। Push notifications सिर्फ आपकी app के published version पर काम करती हैं क्योंकि browsers को real origin पर HTTPS चाहिए होती है।
• iOS के लिए PWA ज़रूरी है। iOS 16.4+ पर Web Push सिर्फ एक installed Progressive Web App (home screen पर add की गई) से काम करता है, सीधे Safari से नहीं।
• Permission एक बार ही मिलती है। अगर कोई user notification permission deny कर दे, तो browsers आपको programmatically दोबारा prompt नहीं करने देते। आपको उन्हें अपने browser या device settings तक ले जाना होगा।

जल्द आने वाला है

• Scheduled और event-triggered sends — app events या schedule के आधार पर automatically भेजें
• Deep linking — notification tap करने पर app की एक specific screen खोलें