Desktop Notifications זה יותר פשוט ממה שחשבתם

תוכן עניינים

1 Desktop Notifications – למה צריך את זה?
- 1.1 אחוזי תמיכה וצפי לעתיד
2 Desktop Notifications – איך עושים את זה
3 דוגמא
4 סיכום
- - 4.0.1 אם הגעת עד לפה, הגיע הזמן להירשם לניוזלטר!

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

Desktop Notifications – למה צריך את זה?

אז למה בכלל להשתמש ב Desktop Notifications, או בשפתנו הנפלאה – התראות בשולחן העבודה?
קודם כל, כי זה מגניב! אני בטוח שלרוב המוחץ של קוראי הפוסט הזה כבר יצא להשתמש או לפחות לראות התראות דסקטופ – בין אם זה בWhatsapp Web (מי שלא משתמש בזה, אני מפציר בו. זה שווה!), ובין אם זה בפייסבוק.
אי אפשר להתעלם מהעובדה שזה פשוט די מגניב. אז אולי בפייסבוק זה לפעמים קצת מייגע, אבל זה בעיקר כי רוב ההתראות של בפייסבוק לא באמת מעניינות אותנו.
בגרסאת הווב של ווטסאפ לעומת זאת, זה נפלא. שולחים לך הודעה, וגם אם אתה בחלון אחר בכלל – היא קופצת לה, אבל בלי להפריע, קטנה וחמודה בצד המסך. אתה רואה מי שלח אותה, מתרגש קצת, מרגיש מקובל לרגע, ובאופן כללי כל העסק די נחמד.

שנית, זה שימושי. אם נשים בצד לרגע את אחוזי התמיכה שהולכים ועולים (אתייחס לנקודה הזאת ממש עוד מעט), יש ל Desktop Notification יישומים מאוד פרקטיים – הן בצד חוויית המשתמש, והן בצד השיווקי.
התפרסם פוסט חדש בבלוג האהוב עליכם (אהמ אהמ)? קבלו התראה. יש מבצע באתר הקניות שאתם לא עוברים שבוע בלי לרכוש בו? קבלו התראה. יצא עדכון לפלאגין מסויים בוורדפרס? נו, אתם בטח כבר מנחשים את ההמשך.
אישית, אני מוצא את ההתראות בדסקטופ מאוד שימושית. הן צצות בזמנים נוחים, לא נשארות הרבה זמן, לא מדירות שינה מעיניי כמו העיגול האדום שמבשר לך שיש הודעה חדשה במשיבון בפלאפון (אולי זה רק אני וOCD שלי..אבל לא מספיק שבן אדם השאיר הודעה במשיבון שזה כבר נורא ואיום כשלעצמו, למה אני צריך להסתובב עם הסימן עד הזה שאני מצליח להגיע למשיבון איכשהוא?!). עם זאת, ולא פחות חשוב – על אף כל העדינות שלהן, ההתראות מספיק טובות בשביל להעביר את ההודעה שבגינה הן נשלחו.

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

אחוזי תמיכה וצפי לעתיד

טוב, אז אחוזי התמיכה של Desktop Notifications הם קצת טריקיים.
אם אנחנו מדברים על "פרופר-דסקטופ", משמע רק דפדפני דסקטופ בדסקטופ, אז אחוזי התמיכה גבוהים. למעט אינטרנט אקספלורר (תיעלם כבר אמן!), כלל הדפדפנים בדסקטופ תומכים בהתראות – משמע אחוזי התמיכה עומדים פחות או יותר על 90%.
אם אנחנו מצרפים את הדפדפנים בגרסאות המובייל שלהם – Chrome for Android, iOS Safari וחבריהם, אחוזי התמיכה יורדים – למרות שבשימוש עם Service Worker, ניתנת תמיכה בחלק מהדפדפנים הללו. מכיוון שבדסקטופ עסקינן, לא ארחיב בנושא הפעם..

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

Desktop Notifications – איך עושים את זה

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

קודם כל – לבקש רשות

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

denied – אין אישור. נקבל במקרה שהמשתמש לחץ "Block"
granted – יש אישור. נקבל במקרה שהמשתמש לחץ "Allow"
default – לא ניתן אישור, אך גם לא ניתנה דחייה. במקרה כזה עדיין לא נוכל לשלוח התראות, אולם נוכל לבקש שוב את אישור המשתמש.

בשביל לבקש את האישור של המשתמש, נשתמש בפונקצייה requestPermission().
תחילה, נשלח למשתמש בקשה לאישור בסיום טעינת העמוד, ורק במקרה שלא קיבלנו את אישורו:


document.addEventListener('DOMContentLoaded', function () {
  if (Notification.permission !== "granted")
    Notification.requestPermission();
});

document.addEventListener('DOMContentLoaded', function () {

if (Notification.permission !== "granted")

Notification.requestPermission();

});

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

כמו כן, אנחנו יכולים ליצור callback לבקשת האישור:


document.addEventListener('DOMContentLoaded', function () {
  if (Notification.permission !== "granted")
    Notification.requestPermission(function (permission) {
      if (permission !== "granted") {
        alert('אי אפשר לשלוח התראה אם אתה לא מסכים..');
      }
    });
});

document.addEventListener('DOMContentLoaded', function () {

if (Notification.permission !== "granted")

Notification.requestPermission(function (permission) {

if (permission !== "granted") {

alert('אי אפשר לשלוח התראה אם אתה לא מסכים..');

}

});

יצירת ההתראה

יצירת ההתראה היא מאוד פשוטה. הדבר היחידי שחובה לספק להתראה בעת יצירתה היא הכותרת:


new Notification("כותרת ההתראה החמודה שלנו");

new Notification("כותרת ההתראה החמודה שלנו");

די פשוט, לא? קחו טיפ ממני – אורך הכותרת המקסימלית בהתראה הוא משהו כמו 65-70 תווים.

הוספת מאפיינים להתראה

טוב, אז אפשר לתת להתראה קצת יותר עומק מאשר כותרת. האמת היא שיש תכונות די מגניבות להתראות, אולם רובן לא נתמכות ואני אתעסק בהן בהמשך הפוסט. לבנתיים, נתמקד בשתי תכונות שכן נתמכות (אולי למעט Safari), ושיוסיפו חיים להתראות שלנו – icon ו- body.


var options = {
      body: 'זה גוף ההתראה שלנו',
      icon: 'http://masterscripter.co.il/wp-content/uploads/2016/05/logo-1.png',
};
new Notification('? זאת כותרת ההתראה ?', options);

var options = {

body: 'זה גוף ההתראה שלנו',

icon: 'http://masterscripter.co.il/wp-content/uploads/2016/05/logo-1.png',

};

new Notification('? זאת כותרת ההתראה ?', options);

עד כאן די נחמד! בגוף ההתראה ניתן להשתמש ב190-195 תווים, אולם אם הכותרת ארוכה אז נשאר לנו משהו כמו 120-125 תווים.
אבל מה צופן לנו העתיד?

מאפיינים שעדיין אין להם מספיק תמיכה

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

Notification.image – תמונה שתופיע בתוך ההתראה
Notification.vibrate – קביעת תפוס רטט עבור מכשירים תומכים בעת קבלת התראה (יותר מוכוון למובייל מן הסתם)
Notification.sound – שימוש בסאונד ייחודי כשמתקבלת התראה
Notification.sticky – יצירת התראה "דביקה", אשר המשתמש יצטרך ל"נקות" בשביל שתיעלם

אירועים שחלים על התראה

לא ציפיתם שאני אשחרר אתכם בלי קצת אירועים, נכון?
או במילים אחרות – מה קורה כשהמשתמש לוחץ על ההתראה?
אז מלבד onclick, יש לנו עוד מספר אירועים ששווה להתייחס אליהם – onshow, onclose, ו- onerror.


var n = new Notification('כותרת ההתראה שלנו', options);

// בעת לחיצה
n.onclick = function() {
  window.open("http://masterscripter.co.il");
};

// בעת הופעה
n.onshow = function() {
  console.log("IT'S ON!!!");
};

// בעת העלמות
n.onclose = function() {
  console.log("BYE BYE");
};

var n = new Notification('כותרת ההתראה שלנו', options);

// בעת לחיצה

n.onclick = function() {

window.open("http://masterscripter.co.il");

};

// בעת הופעה

n.onshow = function() {

console.log("IT'S ON!!!");

};

// בעת העלמות

n.onclose = function() {

console.log("BYE BYE");

};

דוגמא

כן כן, אי אפשר לכתוב פוסט התראות – ולא ליצור איזה כפתור שאפשר להטריד בשביל התראות, לא ככה?
תרגישו חופשי:

<script>// <![CDATA[
function notify() { // Check browser support 
if (!("Notification" in window)) {
 alert('הדפדפן איננו תומך בהתראות דסקטופ!');
 return; 
}
 // In case somebody didn't gave the permission and tries to get notification
 if (Notification.permission !== "granted")
 Notification.requestPermission(function (permission) {
 // If the user accepts, let's create a notification 
if (permission === "granted") {
 new Notification("מזל שהסכמת ?", {
 body: 'נו, אהבת את כל עניין ההתראות?',
 icon: 'http://masterscripter.co.il/wp-content/uploads/2016/05/logo-1.png',
 });
 } 
else {
 alert('אי אפשר לשלוח התראה אם אתה לא מסכים..');
 }
 }); 
else {
 // Notification for user who already got notification before
 new Notification("? תמיד טוב ללחוץ שוב", {
 body: 'אנחנו חזקים בהתראות היום!',
 icon: 'http://masterscripter.co.il/wp-content/uploads/2016/05/logo-1.png',
 });
 }
 }
// ]]></script><button style="background-color: #00ada7; color: white; padding: 5px 10px; border: none; font-family: 'open sans hebrew';">בא לי איזו התראה!</button>

function notify() { // Check browser support

if (!("Notification" in window)) {

alert('הדפדפן איננו תומך בהתראות דסקטופ!');

return;

}

// In case somebody didn't gave the permission and tries to get notification

if (Notification.permission !== "granted")

Notification.requestPermission(function (permission) {

// If the user accepts, let's create a notification

if (permission === "granted") {

new Notification("מזל שהסכמת ?", {

body: 'נו, אהבת את כל עניין ההתראות?',

icon: 'http://masterscripter.co.il/wp-content/uploads/2016/05/logo-1.png',

});

}

else {

alert('אי אפשר לשלוח התראה אם אתה לא מסכים..');

}

});

else {

// Notification for user who already got notification before

new Notification("? תמיד טוב ללחוץ שוב", {

body: 'אנחנו חזקים בהתראות היום!',

icon: 'http://masterscripter.co.il/wp-content/uploads/2016/05/logo-1.png',

});

}

// ]]></script><button style="background-color: #00ada7; color: white; padding: 5px 10px; border: none; font-family: 'open sans hebrew';">בא לי איזו התראה!</button>

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

סיכום

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

Summary

Article Name

Desktop Notifications זה יותר פשוט ממה שחשבתם

Description

מדריך קל ופשוט לשימוש והטמעה של Desktop Notifications.

Author

שלומי זק

Publisher Name

MasterScripter

Publisher Logo

4 תגובות

איתןom
15 בינואר 2017 - 1:56
תגובה

איפה אתה ממליץ לשים את הסקריפט הזה?

שלומי זק
15 בינואר 2017 - 18:44
תגובה

הי איתן 🙂
תוכל לחדד את שאלתך – האם הכוונה שלך היא איפה למקם את הסקריפט והלוגיקה מבחינת מיקום בקובץ הJS –
או לחלופין שכוונתך היא היכן הייתי ממליץ להשתמש בהתראות דסקטופ?

איתן
15 בינואר 2017 - 19:54
תגובה

ובכן, נתקלתי בבעיה(רק שלי, כנראה כי אני פשוט לא יודע איך לעשות זאת). אני משתמש ב-Laravel לצד שרת(יש לי אתר של מתכונים), וכל פעם שאני יוצר פוסט(מתכון) אני רוצה שתופיע ההודעה שדיברת עליה בכתבה. אבל איך בדיוק אני עושה את זה? כי נכון לעכשיו מופיעה לי ההתראה בכל פעם שאני מרענן את הדף(ככל הנראה בגלל ששמתי את new Notification בדף מאסטר שלי). רציתי לדעת איך בדיוק לשלב את זה ולגרום לזה לעבוד רק מתי שאני יוצר פוסט חדש. תודה מראש.

שלומי זק
24 בינואר 2017 - 17:51
תגובה

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

השאר/י תגובה לאיתן

לבטל

Desktop Notifications זה יותר פשוט ממה שחשבתם

Desktop Notifications – למה צריך את זה?

אחוזי תמיכה וצפי לעתיד

Desktop Notifications – איך עושים את זה

קודם כל – לבקש רשות

יצירת ההתראה

הוספת מאפיינים להתראה

מאפיינים שעדיין אין להם מספיק תמיכה

אירועים שחלים על התראה

דוגמא

סיכום

אם הגעת עד לפה, הגיע הזמן להירשם לניוזלטר!

4 תגובות

איתןom

שלומי זק

איתן

שלומי זק

השאר/י תגובה לאיתן

הירשם לניוזלטר

עקבו אחריי!

פוסטים אחרונים

חיפוש

Desktop Notifications זה יותר פשוט ממה שחשבתם

Desktop Notifications – למה צריך את זה?

אחוזי תמיכה וצפי לעתיד

Desktop Notifications – איך עושים את זה

קודם כל – לבקש רשות

יצירת ההתראה

הוספת מאפיינים להתראה

מאפיינים שעדיין אין להם מספיק תמיכה

אירועים שחלים על התראה

דוגמא

סיכום

אם הגעת עד לפה, הגיע הזמן להירשם לניוזלטר!

4 תגובות

השאר/י תגובה לאיתן

הירשם לניוזלטר

עקבו אחריי!

פוסטים פופולאריים

פוסטים אחרונים

חיפוש