דף זה תורגם על ידי Cloud Translation API.

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

Kate Jeffreys

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

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

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

בעבר, דפדפני אינטרנט היו צריכים ליזום חילופי מידע בין השרת ללקוח על ידי שליחת בקשה. מצד שני, טכנולוגיית דחיפת אינטרנט מאפשרת להגדיר את השרת לשליחת התראות כשהדבר הגיוני לאפליקציה שלכם. שירות 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 משתמשים ב-Vanilla JavaScript ללא ספריות נוספות. השרת נוצר באמצעות חבילת npm של express ב-Node.js, ומשתמש בחבילת npm של web-push כדי לשלוח התראות. כדי לשלוח מידע לשרת, הלקוח מבצע קריאה לכתובת URL מסוג POST שהשרת חשף.

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

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

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

קוד לקוח:
```
Notification.requestPermission();
```
כדי להפעיל התראות, ה-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) נרשם לשירות דחיפה על ידי קריאה ל-PushManager.subscribe(), שירות ה-Push יוצר כתובת URL ייחודית לאותו קובץ שירות (service worker). כתובת ה-URL נקראת נקודת קצה של מינוי.

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

קוד לקוח:

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: שליחת התראה

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

קוד שרת:

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

התראות שנשלחות אל נקודת הקצה של המינוי להפעלת אירועי דחיפת הודעות עם 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);
})
```
המשתמש יוצר אינטראקציה עם ההתראה, ואפליקציית האינטרנט מופעלת אם היא עדיין לא הופעלה.

השלבים הבאים

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

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