পুশ নোটিফিকেশন

তোমার ব্যবহারকারীদের কাছে Web Push নোটিফিকেশন পাঠাও, আর AI-কে সব কিছু সংযুক্ত করতে দাও।

Note

Real browser push delivery তখনই পাওয়া যাবে যখন তোমার Proyecta Cloud environment-এ web-push delivery adapter চালু থাকবে (PUSH_DELIVERY_ADAPTER=web-push)। এটি চালু থাকলে একটি বৈধ P-256 VAPID key pair ইস্যু করা হয় এবং subscribed browser-এ নোটিফিকেশন পাঠানো হয়। এটি বন্ধ থাকলে সবকিছু তবুও round-trip করে — subscription সংরক্ষিত হয় এবং send resolve হয় — কিন্তু VAPID key একটি placeholder হয়, তাই কোনো real delivery তৈরি হয় না এবং message push না হয়ে log করা হয়। তোমার push না পৌঁছালে, এই adapter-টিই প্রথমে দেখার বিষয়।

প্রতিটি Proyecta অ্যাপ তার ব্যবহারকারীদের কাছে browser এবং PWA push নোটিফিকেশন পাঠাতে পারে। Proyecta VAPID key generation, subscription storage, topic management এবং delivery সামলায় — কোনো third-party অ্যাকাউন্টের প্রয়োজন নেই।

এটি কীভাবে কাজ করে

Proyecta-তে push নোটিফিকেশন চারটি ধাপে standard Web Push lifecycle অনুসরণ করে:

1. Enable — প্রথমবার প্রয়োজন হলেই তোমার অ্যাপের জন্য VAPID key তৈরি হয়ে যায়
2. Subscribe — নোটিফিকেশন পেতে একজন visitor-এর device নিবন্ধন করো
3. Identify — anonymous subscription-কে একজন signed-in ব্যবহারকারীর সাথে সংযুক্ত করো
4. Send — নির্দিষ্ট ব্যবহারকারী, topic বা সবার কাছে নোটিফিকেশন পাঠাও

প্রথম তিনটি usePush() hook-এর ভেতরেই তোমার হয়ে হয়ে যায়; চতুর্থটি তুমি করো তোমার admin প্যানেল থেকে।

ব্যবহারকারীর device subscribe করো

তোমার অ্যাপের সাথেই একটি usePush() hook আসে, যা পুরো browser flow সামলায় — VAPID key আনা, service worker নিবন্ধন করা, Web Push subscription তৈরি করা, secret সংরক্ষণ করা, এবং ব্যবহারকারী sign in করার পর anonymous 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>
    );
}

শুধু 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 visitor সমর্থিত — hook তাদের একটি generated id দিয়ে subscribe করে এবং তারা sign in করলে সেই subscription স্বয়ংক্রিয়ভাবে তাদের অ্যাকাউন্টের সাথে পুনরায় সংযুক্ত করে দেয়, তাই পরে পাঠানো নোটিফিকেশন দুই ক্ষেত্রেই তাদের কাছে পৌঁছায়।

নোটিফিকেশন পাঠাও

পাঠানো একটি owner action, তোমার অ্যাপের public পেজের কাজ নয় — কোনো visitor-এর browser যেন কখনোই তোমার পুরো audience-কে push করতে না পারে। দৈনন্দিন কাজে তুমি পাঠাও তোমার অ্যাপের admin প্যানেলের Push সেকশন থেকে: title ও body লেখো, একটি topic বেছে নাও বা সবার কাছে broadcast করো, এবং আগে নিজের device-এ একটি test পাঠাও।

তুমি সবাইকে target করতে পারো, অথবা শুধু কোনো নির্দিষ্ট topic-এ subscribe করা visitor-দের। একটি নোটিফিকেশনে থাকে একটি title, একটি body এবং ঐচ্ছিকভাবে একটি icon ও image।

পাঠানোর পরে তুমি জানতে পারো কতগুলো device-এ গেছে এবং কতগুলো ব্যর্থ হয়েছে। একটি সতর্কতা: এই সংখ্যাগুলো real browser delivery প্রতিফলিত করে কেবল তখনই, যখন web-push delivery adapter চালু থাকে। বন্ধ থাকলে সংখ্যাটি actual delivery নয় বরং target করা stored subscription-এর সংখ্যা প্রতিফলিত করে — সে ক্ষেত্রে এটিকে delivery confirmation হিসেবে ধরো না।

Topic

Visitor-রা সব-অথবা-কিছুই নয় এমন একটিমাত্র তালিকার বদলে নামযুক্ত topic-এ (যেমন product-updates, weekly-digest) subscribe করতে পারে। opt-in পরিচালনার জন্য এটি recommended পদ্ধতি — broadcast-style আপডেটের জন্য নিজে visitor ID track করতে হবে না। admin প্যানেলের Push সেকশনে topic-গুলোই audience picker হিসেবে দেখা যায়।

Unsubscribe

একই usePush() hook থেকে unsubscribe কল করো — এটি আগে থেকেই subscription secret ধরে রাখে, তাই তোমার কিছু সংরক্ষণ বা pass করার দরকার নেই:

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-তে real push কাজ করে না। Push নোটিফিকেশন শুধুমাত্র তোমার অ্যাপের published সংস্করণে কাজ করে, কারণ browser-গুলো real origin-এ HTTPS প্রয়োজন।
• iOS-এ PWA লাগবে। iOS 16.4+-এ, Web Push শুধুমাত্র একটি installed Progressive Web App (home screen-এ যুক্ত) থেকে কাজ করে, সরাসরি Safari থেকে নয়।
• Permission একবারই পাওয়া যায়। কোনো ব্যবহারকারী notification permission অস্বীকার করলে, browser programmatically পুনরায় prompt করার সুযোগ দেয় না। তাদের browser বা device settings-এ যেতে গাইড করতে হবে।

###近日আসছে

• Scheduled এবং event-triggered send — অ্যাপ event বা schedule-এর ভিত্তিতে স্বয়ংক্রিয়ভাবে পাঠাও
• Deep linking — নোটিফিকেশনে ট্যাপ করলে অ্যাপের নির্দিষ্ট screen খুলবে