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

Kate Jeffreys

למה כדאי להשתמש בהתראות?

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

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

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

התראה ב-MacBook.

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

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

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

בתרשים הזרימה הבא, לקוח רושם Service Worker ונרשם לקבלת התראות Push. לאחר מכן, השרת שולח הודעה לנקודת הקצה של המינוי.

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

חלק 1: רישום קובץ שירות (service worker) והרשמה לשליחת הודעות Push

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

   קוד לקוח:

   navigator.serviceWorker.register('sw.js');
   

2. הלקוח מבקש מהמשתמש הרשאה לשלוח התראות.

   קוד לקוח:

   Notification.requestPermission();
   

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

   קוד לקוח:

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

   שירותי Push כמו העברת הודעות בענן ב-Firebase פועלים לפי מודל מינויים. כש-service worker נרשם לשירות push באמצעות קריאה ל-PushManager.subscribe(), שירות ה-push יוצר כתובת URL ייחודית ל-service worker הזה. כתובת ה-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. ההתראות שנשלחות לנקודת הקצה של המינוי מפעילות אירועי Push עם 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 כדי להנחות אתכם בכל שלב בתהליך.