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

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

Pete LePage

מה זה App Badging API?

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

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

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

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

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

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

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

תמיכה

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

רוצה לנסות?

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

איך משתמשים ב-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) ולתת לסוכן המשתמש להציג אותו בהתאם.

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

הגדרה וניקוי של התג ברקע מ-Service Worker

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

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

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

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

Web Push API

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

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

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

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

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

משוב

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

תיאור של עיצוב ה-API

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

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

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

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

תמיכה ב-API

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

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

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

התמונה הראשית של Prateek Katyal ב-Unsplash