למה כדאי להשתמש בהתראות?
התראות מציגות למשתמשים קטעי מידע קטנים. אפליקציות אינטרנט יכולות להשתמש בהתראות כדי להודיע למשתמשים על אירועים חשובים שקשורים לזמן או על פעולות שהמשתמשים צריכים לבצע.
העיצוב של ההתראות משתנה בין הפלטפורמות. לדוגמה:
באופן מסורתי, דפדפני אינטרנט היו צריכים ליזום את החלפת המידע בין השרת ללקוח על ידי שליחת בקשה. לעומת זאת, טכנולוגיית Web Push מאפשרת להגדיר את השרת כך שישלח התראות כשזה הגיוני לאפליקציה. שירות Push יוצר כתובות URL ייחודיות לכל עובד שירות (service worker) שמנוי. שליחת הודעות לכתובת ה-URL של עובד השירות מפעילה אירועים בעובד השירות הזה, ומבקשת ממנו להציג התראה.
התראות דחיפה יכולות לעזור למשתמשים להפיק את המקסימום מהאפליקציה שלכם, על ידי כך שהן מעודדות אותם לפתוח אותה מחדש ולהשתמש בה על סמך המידע העדכני ביותר.
יצירת התראות ושליחתן
יצירת התראות באמצעות 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 workers) וטכנולוגיית דחיפה (push):
שירותי עבודה יכולים לפעול ברקע ולהציג התראות גם כשהאפליקציה לא מוצגת במסך.
טכנולוגיית Push מאפשרת לכם להגדיר את השרת כך שישלח התראות כשזה הגיוני לאפליקציה. שירות Push יוצר כתובות URL ייחודיות לכל עובד שירות שמנוי. שליחת הודעות לכתובת ה-URL של עובד השירות מפעילה אירועים בעובד השירות הזה, ומבקשת ממנו להציג התראה.
בתהליך לדוגמה הבא, לקוח רושם שירות עבודה ומירשם לקבלת התראות דחיפה. לאחר מכן, השרת שולח התראה לנקודת הקצה של המינוי.
הלקוח ו-service worker משתמשים ב-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()
כדי ליצור מינוי לקבלת התראות בדחיפה. בקריאה ל-PushManager.subscribe()
, ה-service worker מספק את מפתח ה-API של האפליקציה כמזהה.קוד לקוח:
navigator.serviceWorker.register('sw.js').then(sw => {
sw.pushManager.subscribe({ /* API key */ });
});שירותי Push כמו Firebase Cloud Messaging פועלים לפי מודל מינויים. כשעובד שירות נרשם לשירות דחיפה באמצעות קריאה ל-
PushManager.subscribe()
, שירות הדחיפה יוצר כתובת URL ייחודית לאותו עובד שירות. כתובת ה-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);
})המשתמש יוצר אינטראקציה עם ההתראה, וכך אפליקציית האינטרנט הופכת לפעילה אם היא לא הייתה פעילה עד אז.
השלבים הבאים
השלב הבא הוא להטמיע התראות.
יצרנו סדרה של Codelabs שיעזרו לכם בכל שלב בתהליך.