שימוש בהתראות כדי לעורר עניין בקרב המשתמשים ולחדש את העניין שלהם

Kate Jeffreys
Kate Jeffreys

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

המראה והסגנון של ההתראות משתנים בהתאם לפלטפורמה. לדוגמה:

התראה במכשיר Android.
התראה ב-MacBook.

בעבר, דפדפני אינטרנט היו צריכים ליזום את חילופי המידע בין השרת ללקוח על ידי שליחת בקשה. מצד שני, טכנולוגיית דחיפת דפי אינטרנט מאפשרת לכם להגדיר את השרת כך שישלח התראות במקרים שמתאימים לאפליקציה שלכם. שירות Push יוצר כתובות URL ייחודיות לכל מנוי שירות (service worker). שליחת הודעות לכתובת URL של קובץ שירות (service worker) מעלה את האירועים ב-service worker הזה, ומבקשה ממנו להציג התראה.

ההתראות יכולות לעזור למשתמשים להפיק את המרב מהאפליקציה שלכם, כי הן מעודדות אותם לפתוח מחדש את האפליקציה ולהשתמש בה על סמך המידע העדכני ביותר.

יצירה ושליחה של התראות

יוצרים התראות בעזרת Notifications API. אובייקט Notification מכיל מחרוזת title ואובייקט options. לדוגמה:

let title = 'Hi!';
let options
= {
  body
: 'Very Important Message',
 
/* other options can go here */
};
let notification
= new Notification(title, options);

כשההתראה פעילה, הtitle מוצג בגופן מודגש, וה-body מכיל טקסט נוסף.

איך מקבלים הרשאה לשלוח התראות

כדי להציג התראה, האפליקציה שלכם צריכה לקבל הרשאה מהמשתמש:

Notification.requestPermission();

איך פועלות התראות?

הכוח האמיתי של התראות מגיע מהשילוב של רכיבי שירות (service worker) וטכנולוגיית דחיפה:

  • Service Workers יכולים לפעול ברקע ולהציג התראות גם כשהאפליקציה לא מוצגת במסך.

  • טכנולוגיית Push מאפשרת לכם להגדיר את השרת כך שישלח התראות במקרים שמתאימים לאפליקציה שלכם. שירות Push יוצר כתובות URL ייחודיות לכל מנוי שירות (service worker). שליחת הודעות לכתובת URL של קובץ שירות (service worker) מעלה את האירועים ב-service worker הזה, ומבקשה ממנו להציג התראה.

בתהליך לדוגמה הבא, לקוח רושם קובץ שירות (service worker) ונרשמים לקבלת התראות. לאחר מכן, השרת שולח התראה לנקודת הקצה של המינוי.

הלקוח ו-Service Worker משתמשים ב-JavaScript וניל ללא ספריות נוספות. השרת מבוסס על חבילת express של NPM ב-Node.js, והוא משתמש בחבילת npm של web-push כדי לשלוח התראות. כדי לשלוח מידע לשרת, הלקוח מבצע קריאה לכתובת URL מסוג POST שהשרת חשף.

חלק 1: רישום Service Worker והרשמה ל-Push

  1. אפליקציית לקוח רושמת קובץ שירות (service worker) ב-ServiceWorkerContainer.register(). קובץ השירות הרשום ימשיך לפעול ברקע כשהלקוח לא פעיל.

    קוד לקוח:

    navigator.serviceWorker.register('sw.js');
  2. הלקוח מבקש מהמשתמש הרשאה לשלוח התראות.

    קוד לקוח:

    Notification.requestPermission();
  3. כדי להפעיל התראות, קובץ השירות (service worker) משתמש ב-PushManager.subscribe() כדי ליצור מינוי Push. בשיחה אל PushManager.subscribe(), ה-Service Worker מספק את מפתח ה-API של האפליקציה כמזהה.

    קוד לקוח:

    navigator.serviceWorker.register('sw.js').then(sw => {
      sw
    .pushManager.subscribe({ /* API key */ });
    });

    העברת שירותים כמו העברת הודעות בענן ב-Firebase פועלת על מודל מינוי. כאשר קובץ שירות (service worker) נרשם לשירות דחיפה באמצעות קריאה ל-PushManager.subscribe(), שירות ה-Push יוצר כתובת URL ייחודית לאותו קובץ שירות. כתובת ה-URL נקראת נקודת קצה של מינוי.

  4. הלקוח שולח את נקודת הקצה של המינוי לשרת האפליקציות.

    קוד לקוח:

    navigator.serviceWorker.register('sw.js').then(sw => {
      sw
    .pushManager.subscribe({ /* API key */ }).then(subscription => {
        sendToServer
    (subscription, '/new-subscription', 'POST');
     
    });
    });

    קוד שרת:

    app.post('/new-subscription', (request, response) => {
     
    // extract subscription from request
     
    // send 'OK' response
    });

חלק 2: שליחת התראה

  1. שרת האינטרנט שולח התראה לנקודת הקצה של המינוי.

    קוד שרת:

    const webpush = require('web-push');

    let options
    = { /* config info for cloud messaging and API key */ };
    let subscription
    = { /* subscription created in Part 1*/ };
    let payload
    = { /* notification */ };

    webpush
    .sendNotification(subscription, payload, options);
  2. התראות שנשלחות לאירועי דחיפת אש בנקודת הקצה של המינוי כשה-Service Worker משמש כיעד. ה-Service Worker מקבל את ההודעה ומציג אותה למשתמש כהתראה.

    קוד קובץ שירות (Service Worker):

    self.addEventListener('push', (event) => {
      let title
    = { /* get notification title from event data */ }
      let options
    = { /* get notification options from event data */ }
      showNotification
    (title, options);
    })
  3. המשתמש יוצר אינטראקציה עם ההתראה והופך את אפליקציית האינטרנט לפעילה אם היא לא הייתה פעילה.

השלבים הבאים

בשלב הבא, מטמיעים התראות.

יצרנו סדרה של Codelabs שידריכו אתכם בכל שלב בתהליך.