ב-codelab הזה תשתמשו בתכונות הבסיסיות של Notifications API כדי:
- שליחת בקשה להרשאה לשלוח התראות
- שליחת התראות
- ניסוי באפשרויות ההתראות
יצירת רמיקס של האפליקציה לדוגמה והצגה שלה בכרטיסייה חדשה
ההתראות נחסמות באופן אוטומטי מאפליקציית Glitch המוטמעת, כך שלא תוכלו לראות תצוגה מקדימה של האפליקציה בדף הזה. במקום זאת, צריך לבצע את הפעולות הבאות:
- לוחצים על Remix to Edit כדי לאפשר עריכה של הפרויקט.
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא .
Glitch אמור להיפתח בכרטיסייה חדשה ב-Chrome:
במהלך העבודה ב-codelab הזה, תוכלו לבצע שינויים בקוד ב-Glitch המוטמע בדף הזה. כדי לראות את השינויים, צריך לרענן את הכרטיסייה החדשה עם האפליקציה הפעילה.
מעיינים באפליקציה המקורית ובקוד שלה
כדי להתחיל, כדאי לבדוק את האפליקציה הפעילה בכרטיסייה החדשה ב-Chrome:
מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את DevTools. לוחצים על הכרטיסייה מסוף.
אמורה להופיע ההודעה הבאה במסוף:
Notification permission is default
אם אתם לא יודעים מה זה אומר, אל דאגה, בקרוב נחשוף את כל הפרטים.
לוחצים על הלחצנים באפליקציה בשידור חי: בקשה לקבלת הרשאה לשליחת התראות ושליחת התראה.
במסוף מודפסות הודעות 'TODO' מכמה stubs של פונקציות:
requestPermission
ו-sendNotification
. אלה הפונקציות שתטמיעו ב-codelab הזה.
עכשיו נסתכל על הקוד של האפליקציה לדוגמה ב-Glitch המוטמע בדף הזה.
פותחים את public/index.js
ומעיינים בחלקים חשובים בקוד הקיים:
הפונקציה
showPermission
משתמשת ב-Notifications API כדי לקבל את מצב ההרשאות הנוכחי של האתר ולתעד אותו ביומן במסוף:// Print current permission state to console;
// update onscreen message.
function showPermission() {
let permission = Notification.permission;
console.log('Notification permission is ' + permission);
let p = document.getElementById('permission');
p.textContent = 'Notification permission is ' + permission;
}לפני שליחת בקשת ההרשאה, מצב ההרשאה הוא
default
. במצב ההרשאהdefault
, האתר צריך לבקש הרשאה ולקבל אותה כדי שיוכל לשלוח התראות.הפונקציה
requestPermission
היא סטאב:// Use the Notification API to request permission to send notifications.
function requestPermission() {
console.log('TODO: Implement requestPermission()');
}בשלב הבא נטמיע את הפונקציה הזו.
הפונקציה
sendNotification
היא סטאב:// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
console.log('TODO: Implement sendNotification()');
}מטמיעים את הפונקציה הזו אחרי שמטמיעים את
requestPermission
.בחיישן האירועים
window.onload
מתבצעת קריאה לפונקציהshowPermission
בזמן טעינת הדף, והמצב הנוכחי של ההרשאה מוצג במסוף ובדף:window.onload = () => { showPermission(); };
שליחת בקשה להרשאה לשלוח התראות
בשלב הזה, תוסיפו פונקציונליות לבקשת הרשאה מהמשתמש לשלוח התראות.
משתמשים בשיטה Notification.requestPermission()
כדי להפעיל חלון קופץ שבו המשתמש מתבקש לאשר או לחסום התראות מהאתר.
מחליפים את גוף הפונקציה
requestPermission
בקובץ public/index.js בקוד הבא:// Use the Notification API to request permission to send notifications.
function requestPermission() {
Notification.requestPermission()
.then((permission) => {
console.log('Promise resolved: ' + permission);
showPermission();
})
.catch((error) => {
console.log('Promise was rejected');
console.log(error);
});
}טוענים מחדש את הכרטיסייה ב-Chrome שבה מוצגת האפליקציה שלכם.
בממשק האפליקציה הפעיל, לוחצים על בקשה להרשאה לשליחת התראות. יופיע חלון קופץ.
המשתמש יכול לבחור באחת משלוש התשובות בחלון הקופץ של ההרשאה.
תגובה של משתמש | מצב ההרשאה לשליחת התראות |
---|---|
המשתמש בוחר באפשרות אישור. | granted |
המשתמש בוחר באפשרות חסימה. | denied |
המשתמש סוגר את החלון הקופץ בלי לבחור אפשרות | default |
אם המשתמש לוחץ על 'אישור':
Notification.permission
מוגדר לערךgranted
.האתר יוכל להציג התראות.
קריאות חוזרות ל-
Notification.requestPermission
יפנו ל-granted
בלי חלון קופץ.
אם המשתמש לוחץ על 'חסימה':
Notification.permission
מוגדר לערךdenied
.האתר לא יוכל להציג התראות למשתמש.
קריאות חוזרות ל-
Notification.requestPermission
יפנו ל-denied
בלי חלון קופץ.
אם המשתמש סוגר את החלון הקופץ:
Notification.permission
נשארdefault
.האתר לא יוכל להציג התראות למשתמש.
קריאות נוספות ל-
Notification.requestPermission
ייצרו חלונות קופצים נוספים.עם זאת, אם המשתמש ימשיך לסגור את החלונות הקופצים, יכול להיות שהדפדפן יחסום את האתר ויגדיר את
Notification.permission
לערךdenied
. לא ניתן יהיה להציג למשתמש חלונות קופצים עם בקשות להרשאות או התראות.נכון למועד כתיבת המאמר, ההתנהגות של הדפדפן בתגובה לחלון קופץ עם בקשה להרשאה לקבלת התראות שנסגר עדיין עשויה להשתנות. הדרך הטובה ביותר לטפל בבעיה הזו היא תמיד לבקש הרשאה לשלוח התראות בתגובה לאינטראקציה כלשהי שהמשתמש יזום, כדי שהוא יהיה מוכן לכך ויידע מה קורה.
שליחת התראה
בשלב הזה שולחים התראה למשתמש.
תשתמשו ב-constructor Notification
כדי ליצור התראה חדשה ולנסות להציג אותה.
אם סטטוס ההרשאה הוא granted
, ההודעה תוצג.
מחליפים את קטעי הקוד של פונקציית
sendNotification
בקובץ index.js בקוד הבא:// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
let title = 'Test';
let options = {
body: 'Test body',
// Other options can go here
};
console.log('Creating new notification');
let notification = new Notification(title, options);
}ה-constructor של
Notification
כולל שני פרמטרים:title
ו-options
.options
הוא אובייקט עם מאפיינים שמייצגים הגדרות חזותיות ונתונים שאפשר לכלול בהתראה. מידע נוסף זמין במסמכי התיעוד של MDN בנושא פרמטרים של התראות.מרעננים את הכרטיסייה ב-Chrome שבה מוצגת האפליקציה הפעילה ולוחצים על הלחצן שליחת התראה. אמורה להופיע התראה עם הטקסט
Test body
.
מה קורה כששולחים התראות בלי רשות?
בשלב הזה תוסיפו כמה שורות קוד שיאפשרו לכם לראות מה קורה כשמנסים להציג התראה בלי רשות המשתמש.
- ב-
public/index.js
, בסוף הפונקציהsendNotification
, מגדירים את פונקציית הטיפול באירועיםonerror
של ההתראה החדשה:
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
let title = 'Test';
let options = {
body: 'Test body',
// Other options can go here
};
console.log('Creating new notification');
let notification = new Notification(title, options);
notification.onerror = (event) => {
console.log('Could not send notification');
console.log(event);
};
}
כדי לבדוק אם יש שגיאה בהרשאה לשליחת התראות:
לוחצים על סמל הנעילה לצד סרגל כתובות ה-URL ב-Chrome ומאפסים את הגדרת ההרשאה לקבלת התראות מהאתר להגדרת ברירת המחדל.
לוחצים על בקשה לקבלת הרשאה לשליחת התראות, ובחלון הקופץ בוחרים הפעם באפשרות חסימה.
לוחצים על שליחת התראה וצפו מה יקרה. טקסט השגיאה (
Could not send notification
) ועצם האירוע נרשמים במסוף.
אפשר גם לאפס שוב את הרשאות ההתראות של האתר. אפשר לנסות לבקש הרשאה ולסגור את החלון הקופץ כמה פעמים כדי לראות מה קורה.
ניסוי באפשרויות ההתראות
עכשיו סיימתם לקרוא את היסודות של בקשת הרשאה ושליחת התראות. ראינו גם איזו השפעה יש לתגובות המשתמשים על היכולת של האפליקציה להציג התראות.
עכשיו אפשר להתנסות באפשרויות הרבות של רכיבים חזותיים ונתונים שזמינות בזמן יצירת ההתראה. בהמשך מפורטות כל האפשרויות הזמינות. (בתיעוד בנושא התראות ב-MDN מפורט מידע נוסף על האפשרויות האלה).
חשוב לזכור שהדפדפנים והמכשירים מטמיעים את האפשרויות האלה באופן שונה, לכן כדאי לבדוק את ההתראות בפלטפורמות שונות כדי לראות איך הן נראות.
let options = {
dir: 'auto', // Text direction
lang: 'en-US', // A language tag
badge: '/orange-cat.png', // Display when insufficient room
body: 'Hello World', // Body text
tag: 'mytag', // Tag for categorization
icon: '/line-cat.png', // To display in the notification
image: '/orange-cat.png', // To display in the notification
data: { // Arbitrary data; any data type
cheese: 'I like cheese',
pizza: 'Excellent cheese delivery mechanism',
arbitrary: {
faveNumber: 42,
myBool: true
}},
vibrate: [200, 100, 200], // Vibration pattern for hardware
renotify: false, // Notify if replaced? Default false
requireInteraction: false,// Active until click? Default false
/*
actions: // Array of NotificationActions
// Only usable with a service worker
[{
action: 'shop',
title: 'Shop!',
icon: '/bags.png'
},],
*/
}
בכלי ליצירת התראות של Peter Beverloo תוכלו למצוא רעיונות נוספים.
אם נתקעתם, הנה הקוד המלא של ה-Codelab הזה: glitch.com/edit/#!/codelab-notifications-get-started-completed
כדאי לעיין בקודלאב הבא בסדרה הזו, טיפול בהתראות באמצעות שירות עובד, כדי לקבל מידע נוסף.