ב-Codelab הזה נשתמש בתכונות בסיסיות Notifications API אל:
- צריך לבקש הרשאה לשלוח התראות
- שליחת התראות
- ניסוי עם אפשרויות של התראות
יצירת רמיקס של אפליקציה לדוגמה והצגתה בכרטיסייה חדשה
ההתראות חסומות באופן אוטומטי באפליקציית Glitch המוטמעת, כך שלא ניתן להציג תצוגה מקדימה של האפליקציה בדף הזה. במקום זאת:
- לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.
- כדי לראות תצוגה מקדימה של האתר, לוחצים על הצגת האפליקציה. לאחר מכן לוחצים על מסך מלא .
התקלה אמורה להיפתח בכרטיסייה חדשה של Chrome:
במהלך העבודה ב-Codelab הזה, יש לבצע שינויים בקוד ב-Glitch שמוטמע בדף הזה. כדאי לרענן את הכרטיסייה החדשה עם האפליקציה הפעילה כדי לראות את השינויים.
כדאי להכיר את אפליקציית הפתיחה ואת הקוד שלה
כדי להתחיל, אפשר לבדוק את האפליקציה הפעילה בכרטיסיית Chrome החדשה:
מקישים על 'Control+Shift+J' (או על 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח. לוחצים על הכרטיסייה מסוף.
אתם אמורים לראות את ההודעה הבאה במסוף:
Notification permission is default
אם לא ידוע לך מה זה אומר, אל דאגה. הכול יתגלה בקרוב!
לוחצים על הלחצנים באפליקציה בשידור חי: מבקשים הרשאה לשלוח התראות ואז על שליחת התראה.
המסוף מדפיס את TODO מכמה כרטיסיות פונקציות:
requestPermission
ו-sendNotification
. אלו הפונקציות שתטמיעו ב-Codelab הזה.
עכשיו נסתכל על הקוד של האפליקציה לדוגמה מתוך תקלה שמוטמעת בדף הזה.
מומלץ לפתוח את public/index.js
ולעיין בכמה חלקים חשובים בקוד הקיים:
הפונקציה
showPermission
משתמשת ב-Notification 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
היא stub:// Use the Notification API to request permission to send notifications. function requestPermission() { console.log('TODO: Implement requestPermission()'); }
תטמיעו את הפונקציה הזו בשלב הבא.
הפונקציה
sendNotification
היא stub:// 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()
כדי להפעיל חלון קופץ עם בקשה מהמשתמש לאשר או לחסום התראות מהאתר.
מחליפים את ה-stub של הפונקציה
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
, תוצג ההתראה.
מחליפים את ה-stub של הפונקציה
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'
},],
*/
}
לרעיונות נוספים, אפשר לעיין במחולל ההתראות של פיטר בוורלו.
אם נתקעת, הנה הקוד שהושלם עבור Codelab זה: glitch.com/edit/#!/codelab-notifications-get-started-completed
בשיעור הבא בסדרה הזו, תטפלו בהתראות באמצעות Service Worker תוכלו לקרוא מידע נוסף בנושא.