כיצד לשלוח הודעות דחיפה עם JavaScript

התראות JavaScript הן דרך לשלוח הודעות למשתמשים שלך בזמן אמת. אתה יכול להשתמש בהם כדי להודיע ​​על עדכוני האתר שלך, הודעות צ'אט חדשות, הודעות דוא"ל או כל פעילות במדיה חברתית. תוכל גם להשתמש בהתראות לתזכורות ביומן (כגון פגישה מתקרבת ב-Google Meet או בזום).

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

בקשת רשות לשלוח הודעות

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

JavaScript הבא יבקש הרשאה לשלוח הודעות למשתמש. ה requestPermission call תחזיר הודעה המציינת אם הדפדפן מאפשר הודעות או לא:

const כפתור = מסמך.querySelector('לַחְצָן')
 button.addEventListener("נְקִישָׁה", ()=> {
 Notification.requestPermission().then(רְשׁוּת => {
 התראה (הרשאה)
 })
})

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

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

שליחת הודעות בסיסיות

אתה יוצר הודעת דחיפה על ידי יצירת א הוֹדָעָה אובייקט עם מילת המפתח החדשה. לצלילה עמוקה לתוך תכנות מונחה עצמים, אתה יכול לעיין במדריך שלנו בנושא כיצד ליצור שיעורים ב-JavaScript.

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

const כפתור = מסמך.querySelector('לַחְצָן')
button.addEventListener("נְקִישָׁה", ()=> {
 Notification.requestPermission().then(סלסול => {
אם(סלסול 'ניתן') {
חָדָשׁ הוֹדָעָה("הודעה לדוגמא")
 }
 })
})

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

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

מאפייני התראות מתקדמים

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

הגוף רכוש

הנכס הראשון שכדאי להכיר הוא גוּף תכונה. תוכל להשתמש בזה כדי להוסיף גוף להתראה שלך, בדרך כלל כדי להעביר מידע נוסף בצורה של טקסט. הנה דוגמה פשוטה:

const כפתור = מסמך.querySelector('לַחְצָן')
button.addEventListener("נְקִישָׁה", ()=> {
 Notification.requestPermission().then(סלסול => {
אם(סלסול 'ניתן') {
חָדָשׁ הוֹדָעָה("הודעה לדוגמא", {
 גוּף: "זה יותר טקסט",
 })
 }
 })
})

אם תפעיל את הקוד הזה, טקסט הגוף יופיע בהודעת הדחיפה, מתחת ל- הודעה לדוגמה כּוֹתֶרֶת.

תכונת הנתונים

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

button.addEventListener("נְקִישָׁה", ()=> {
 Notification.requestPermission().then(סלסול => {
אם(סלסול 'ניתן') {
const הודעה = חָדָשׁ הוֹדָעָה("הודעה לדוגמא", {
 גוּף: "זה יותר טקסט",
 נתונים: {שלום: "עוֹלָם"}
 })

 התראה (notification.data.hello)
 }
 })
})

אתה יכול לגשת לנתונים מה- נתונים מאפיין בדומה לזה שמוצג בבלוק הקוד לעיל (בתוך עֵרָנִי()).

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

const הודעה = חָדָשׁ הוֹדָעָה("הודעה לדוגמא", { 
 גוּף: "זה יותר טקסט",
 נתונים: {שלום: "עוֹלָם"} 
})
הוֹדָעָה. addEventListener("סגור", e => {
לְנַחֵם.log (e.target.data.hello)
})

זוהי דרך מצוינת להעביר נתונים אם אתה צריך לעשות משהו כשמישהו סוגר הודעה או לוחץ עליה. חוץ מ סגור אירוע (שמבצע כאשר אתה סוגר את ההודעה), עליך לשמור אותם מאזיני אירועים לדעתך:

• הופעה: מופעל כאשר ההודעה מופיעה.
• נְקִישָׁה: מופעל כאשר המשתמש לוחץ במקום כלשהו בהתראה.
• שְׁגִיאָה: מופעל כאשר אתה מונע הרשאת JavaScript לשלוח הודעות.

הסמל נכס

ה סמל המאפיין מיועד להוספת סמל להודעת הדחיפה. בהנחה שיש לך סמל לוגו בשם logo.png בספרייה הנוכחית, אתה יכול להשתמש בה בהתראות שלך כך:

const הודעה = חָדָשׁ הוֹדָעָה("הודעה לדוגמא", { 
 סמל: "logo.png"
})

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

כשתשמור את הקובץ, רענן את הדפדפן ולחץ על הכפתור, התמונה תוצג בהודעה בצד שמאל של הכותרת והגוף.

תכונת התג

כאשר אתה מגדיר את תָג תכונה בהתראה שלך, אתה בעצם נותן להודעה מזהה ייחודי. שתי התראות לא יכולות להתקיים יחד אם יש להן אותו תג. במקום זאת, ההודעה החדשה ביותר תחליף את ההודעה הישנה יותר.

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

const הודעה = חָדָשׁ הוֹדָעָה("הודעה לדוגמא", { 
 גוּף: "זה יותר טקסט",
 תָג: "התג החדש שלי"
})

אם היית לוחץ שוב על הכפתור, רק תיבת הודעה אחת תופיע. כל לחיצה שלאחר מכן תחליף את ההודעה הקודמת, כך שרק הודעה אחת תוצג לא משנה כמה פעמים תלחץ על הכפתור. זה שימושי אם ברצונך להוסיף נתונים דינמיים (כמו Math.random()) לגוף:

const הודעה = חָדָשׁ הוֹדָעָה("הודעה לדוגמא", { 
 גוּף: מתמטיקה.אַקרַאִי()
 סמל: "logo.png",
 תָג: "תג הגוף שלי"
})

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

דוגמה ל-Push Notification באמצעות JavaScript

הדוגמה הבאה מזהה כל פעם שאתה מאבד מיקוד בדף שלך (כלומר כאשר אתה סוגר את הדף או פותח כרטיסייה חדשה). במקרה זה, הקוד שולח הודעה המבקשת ממך להחזיר:

לתת הוֹדָעָה
מסמך.addEventListener("נראות-שינוי", ()=> {
אם(מסמך.visibilityState "מוּסתָר") {
 הודעה = חָדָשׁ הוֹדָעָה("תחזור בבקשה", {
 גוּף: "אל תעזוב עדיין :("
 תָג: "חזור"
 })
 } אַחֵר {
 notification.close()
 }
})

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

למידע נוסף על JavaScript

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