התראות Push

שלח התראות Web Push למשתמשים שלך, ותן ל-AI לחבר הכול יחד.

כל אפליקציה ב-Proyecta יכולה לשלוח התראות push לדפדפן ול-PWA למשתמשיה. Proyecta מטפלת ביצירת מפתחות VAPID, אחסון מנויים, ניהול נושאים ומשלוח — ללא צורך בחשבון של צד שלישי.

איך זה עובד

התראות push ב-Proyecta עוקבות אחר מחזור החיים הסטנדרטי של Web Push בארבעה שלבים:

Enable — מפתחות VAPID נוצרים לאפליקציה שלך בפעם הראשונה שיש בהם צורך
Subscribe — רשום את המכשיר של מבקר לקבלת התראות
Identify — קשר מנוי אנונימי למשתמש מחובר
Send — שלח התראה למשתמשים ספציפיים, נושאים, או לכולם

שלושת הראשונים קורים עבורך בתוך ה-hook‏ usePush(); את הרביעי אתה עושה מפאנל הניהול שלך.

רשום את המכשיר של משתמש

האפליקציה שלך מגיעה עם hook בשם usePush() שמטפל בכל התהליך בדפדפן — שליפת מפתח ה-VAPID, רישום ה-service worker, יצירת מנוי ה-Web Push, אחסון ה-secret, וקישור מנוי אנונימי למשתמש ברגע שהוא מתחבר. אתה לא עושה שום דבר מזה ביד:

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

יש גם בלוק מוכן אם אתה רק רוצה את הנחיית ההצטרפות:

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 רושם אותם עם מזהה שנוצר וקושר מחדש את המנוי לחשבון שלהם אוטומטית כשהם מתחברים, כך שהתראה שתשלח מאוחר יותר תגיע אליהם בכל מקרה.

שלח התראה

השליחה היא פעולת בעלים, ולא משהו שהדפים הציבוריים של האפליקציה שלך עושים — דפדפן של מבקר לעולם לא אמור להיות מסוגל לשלוח push לכל הקהל שלך. ביום-יום אתה שולח מקטע Push בפאנל הניהול של האפליקציה שלך: כתוב את הכותרת והגוף, בחר נושא או שדר לכולם, ושלח בדיקה למכשיר שלך תחילה.

אפשר למקד לכולם, או רק למבקרים הרשומים לנושא מסוים. התראה נושאת כותרת, גוף, ובאופן אופציונלי אייקון ותמונה.

לאחר השליחה אתה מקבל ספירה של כמה מכשירים קיבלו אותה וכמה נכשלו. הסתייגות אחת: המספרים האלה משקפים משלוחים אמיתיים לדפדפן רק כאשר מתאם המשלוח web-push פעיל. כשהוא כבוי, הספירה משקפת כמה מנויים מאוחסנים מוקדו, ולא משלוחים בפועל — אז אל תקרא אותה כאישור משלוח במקרה זה.

נושאים

מבקרים יכולים להירשם לנושאים בעלי שם (למשל product-updates, weekly-digest) במקום רשימה אחת של הכול-או-כלום. זו הדרך המומלצת לניהול רשימות הצטרפות מרצון — אינך צריך לעקוב בעצמך אחר visitor IDs לעדכונים בסגנון שידור כללי. הנושאים מופיעים כבורר הקהל בקטע Push של פאנל הניהול.

ביטול מנוי

קרא ל-unsubscribe מאותו hook‏ usePush() — הוא כבר מחזיק את ה-secret של המנוי, כך שאין לך מה לאחסן או להעביר:

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 עובדות רק בגרסה המפורסמת של האפליקציה שלך, מפני שדפדפנים דורשים HTTPS על origin אמיתי.
iOS דורש PWA. ב-iOS 16.4 ומעלה, Web Push עובד רק מתוך Progressive Web App מותקנת (שנוספה למסך הבית), ולא ישירות מ-Safari.
הרשאה היא חד-פעמית. אם משתמש דחה את הרשאת ההתראות, הדפדפנים לא מאפשרים לבקש מחדש באופן תכנותי. עליך להדריך אותו להגדרות הדפדפן או המכשיר שלו.

בקרוב

שליחה מתוזמנת ומונעת-אירועים — שלח אוטומטית בהתבסס על אירועי אפליקציה או לפי לוח זמנים
Deep linking — פתח מסך ספציפי באפליקציה כאשר לוחצים על ההתראה