תיוג של סמלי אפליקציות

ה-API של תגי האפליקציות מאפשר לאפליקציות אינטרנט מותקנות להגדיר תג כללי לאפליקציה בסמל האפליקציה.

Pete LePage

מה זה App Badging API?

דוגמה ל-Twitter עם שמונה התראות ולאפליקציה אחרת שמוצג בה תג מסוג דגל.
דוגמה ל-Twitter עם שמונה התראות ולאפליקציה אחרת שמוצג בה תג מסוג דגל.

‫App Badging API מאפשר לאפליקציות אינטרנט מותקנות להגדיר תג לכל האפליקציה, שמוצג במקום ספציפי במערכת ההפעלה שמשויך לאפליקציה (למשל, המדף או מסך הבית).

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

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

תרחישים אפשריים לדוגמה

דוגמאות לאפליקציות שעשויות להשתמש בממשק ה-API הזה:

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

תמיכה

ה-API של תגי האפליקציות פועל ב-Windows וב-macOS, ב-Chrome 81 וב-Edge 81 ומעלה. התמיכה ב-ChromeOS נמצאת בפיתוח ותהיה זמינה בגרסה עתידית. ב-Android, אין תמיכה ב-Badging API. במקום זאת, מערכת Android מציגה באופן אוטומטי תג על סמל האפליקציה של אפליקציית האינטרנט המותקנת, כשיש התראה שלא נקראה, בדיוק כמו באפליקציות ל-Android.

רוצה לנסות?

  1. פותחים את הדמו של App Badging API.
  2. כשמופיעה בקשה, לוחצים על התקנה כדי להתקין את האפליקציה, או משתמשים בתפריט Chrome כדי להתקין אותה.
  3. פותחים אותו כ-PWA מותקן. הערה: האפליקציה צריכה לפעול כ-PWA מותקן (בסרגל המשימות או במזח העגינה).
  4. לוחצים על הלחצן הגדרה או הסרה כדי להגדיר או להסיר את התג מסמל האפליקציה. אפשר גם לציין מספר בשדה ערך התג.

איך משתמשים ב-App Badging API

כדי להשתמש ב-App Badging API, אפליקציית האינטרנט צריכה לעמוד בקריטריונים של Chrome להתקנה, והמשתמשים צריכים להוסיף אותה למסכי הבית שלהם.

‫Badge API כולל שתי שיטות ב-navigator:

  • ‫setAppBadge(number): הגדרת התג של האפליקציה. אם מצוין ערך, צריך להגדיר את התג לערך הזה. אחרת, צריך להציג נקודה לבנה פשוטה (או דגל אחר בהתאם לפלטפורמה). הגדרת number ל-0 זהה לקריאה ל-clearAppBadge().
  • ‫clearAppBadge(): מסיר את התג של האפליקציה.

שתי הפונקציות מחזירות הבטחות ריקות שאפשר להשתמש בהן לטיפול בשגיאות.

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

// Set the badge
const unreadCount = 24;
navigator.setAppBadge(unreadCount).catch((error) => {
  //Do something with the error.
});

// Clear the badge
navigator.clearAppBadge().catch((error) => {
  // Do something with the error.
});

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

אל תניחו הנחות לגבי האופן שבו סוכן המשתמש מציג את התג. חלק מסוכני המשתמשים עשויים לקחת מספר כמו '4000' ולשכתב אותו כ-'99+‎'. אם אתם מציגים את התג בעצמכם (למשל, אם אתם מגדירים אותו כ-'99'), הסימן '+‎' לא יופיע. לא משנה מה המספר בפועל, פשוט קוראים ל-setAppBadge(unreadCount) ומאפשרים לסוכן המשתמש לטפל בהצגה שלו בהתאם.

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

הגדרה ומחיקה של התג ברקע מ-service worker

אפשר גם להגדיר את תג האפליקציה ברקע באמצעות Service Worker. אפשר לעשות את זה באמצעות סנכרון תקופתי ברקע, Push API או שילוב של שניהם.

סנכרון תקופתי ברקע

סנכרון תקופתי ברקע מאפשר ל-Service Worker לבצע מדי פעם בדיקה של השרת, שאפשר להשתמש בה כדי לקבל עדכון סטטוס ולקרוא ל-navigator.setAppBadge().

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

Web Push API

Push API מאפשר לשרתים לשלוח הודעות ל-service workers, שיכולים להריץ קוד JavaScript גם כשלא מורץ דף בחזית. לכן, אפשר לעדכן את התג באמצעות שליחת push מהשרת על ידי קריאה ל-navigator.setAppBadge().

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

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

שילוב של שניהם

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

משוב

צוות Chrome רוצה לשמוע על החוויות שלכם עם App Badging API.

נשמח לקבל מידע על עיצוב ה-API

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

דיווח על בעיה בהטמעה

מצאתם באג בהטמעה של Chrome? או שההטמעה שונה מהמפרט?

  • אפשר לדווח על באג בכתובת https://new.crbug.com. חשוב לכלול כמה שיותר פרטים, הוראות פשוטות לשחזור ולהגדיר את Components לערך UI>Browser>WebAppInstalls.

תמיכה ב-API

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

  • אתם יכולים לשלוח ציוץ אל @ChromiumDev באמצעות ההאשטאג #BadgingAPI ולספר לנו איפה ואיך אתם משתמשים בו.

קישורים שימושיים

תמונה ראשית (Hero) מאת Prateek Katyal ב-Unsplash