ה-App Badging API מאפשר לאפליקציות אינטרנט מותקנות להגדיר תג לכל האפליקציה בסמל שלה.
מה זה App Badging API?
App Badging API מאפשר לאפליקציות אינטרנט מותקנות להגדיר תג לכל האפליקציה, שיוצג במקום ספציפי למערכת ההפעלה שמשויך לאפליקציה (למשל המדף או מסך הבית).
תגיות מאפשרות להודיע למשתמשים בצורה עדינה על פעילות חדשה שעשויה לדרוש את תשומת ליבם, או לציין כמות קטנה של מידע, כמו מספר ההודעות שלא נקראו.
תגים נוטים להיות ידידותיים יותר למשתמש מאשר התראות, ואפשר לעדכן אותם בתדירות גבוהה בהרבה כי הם לא מפריעים למשתמש. ובגלל שהן לא מפריעות למשתמש, לא נדרשת הרשאה מהמשתמש.
תרחישים לדוגמה
דוגמאות לאפליקציות שעשויות להשתמש ב-API הזה:
- צ'אט, אימייל ואפליקציות של רשתות חברתיות, כדי לסמן שהודעות חדשות הגיעו, או כדי להציג את מספר הפריטים שלא נקראו.
- אפליקציות פרודוקטיביות, כדי לס��ן שהושלמו משימות ממושכות ברקע (כמו עיבוד תמונה או וידאו).
- במשחקים, כדי לסמן שדרושה פעולה של השחקן (למשל, בשחמט, כשהתור של השחקן).
תמיכה
ה-App Badging API פועל ב-Windows וב-macOS, ב-Chrome 81 וב-Edge 81 ואילך. התמיכה ב-ChromeOS נמצאת בפיתוח ותהיה זמינה במהדורה עתידית. ב-Android אין תמיכה ב-Badging API. במקום זאת, מערכת Android מציגה באופן אוטומטי תג על סמל האפליקציה של אפליקציית האינטרנט המותקנת כשיש התראה שלא נקראה, בדיוק כמו באפליקציות ל-Android.
רוצה לנסות?
- פותחים את הדגמה של App Badging API.
- כשמוצגת בקשה, לוחצים על התקנה כדי להתקין את האפליקציה, או משתמשים בתפריט של Chrome כדי להתקין אותה.
- פותחים אותו כ-PWA מותקן. שימו לב שהאפליקציה צריכה לפעול כ-PWA מותקנת (בסרגל המשימות או במעגן).
- לוחצים על הלחצן הגדרה או ניקוי כדי להגדיר או לנקות את התג מסמל האפליקציה. אפשר גם לציין מספר בשדה Badge value.
איך משתמשים ב-App Badging API
כדי להשתמש ב-App Badging API, אפליקציית האינטרנט שלכם צריכה לעמוד בקריטריונים של Chrome להתקנה, והמשתמשים יצטרכו להוסיף אותה למסכי הבית שלהם.
ה-BTag 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().
עם זאת, רוב הדפדפנים, כולל Chrome, דורשים שתוצג התראה בכל פעם שמתקבלת הודעת דחיפה. האפשרות הזו מתאימה לחלק מתרחישי השימוש (לדוגמה, הצגת התראה כשמעדכנים את התג), אבל היא לא מאפשרת לעדכן את התג בצורה שקטה בלי להציג התראה.
בנוסף, המשתמשים צריכ��ם להעניק הרשאה לקבל התראות מהאתר כדי לקבל הודעות דחיפה.
שילוב של שניהם
ה��ימוש ב-Push API ובסנכרון תקופתי ברקע הוא לא פתרון מושלם, אבל הוא פתרון טוב. מידע בעדיפות גבוהה מועבר דרך Push API, מוצגת התראה ומתבצע עדכון התג. מידע בעל תעדוף נמוך יותר מועבר על ידי עדכון התג, כשהדף פתוח או באמצעות סנכרון תקופתי ברקע.
משוב
צוות Chrome רוצה לשמוע על החוויה שלכם עם App Badging API.
תיאור של עיצוב ה-API
האם יש משהו ב-API שלא פועל כצפוי? או שאולי חסרות שיטות או מאפיינים שדרושים לכם כדי ליישם את הרעיון? יש לכם שאלות או הערות לגבי מודל האבטחה?
- דווחו על בעיית מפרט במאגר GitHub של Badging API או הוסיפו את דעתכם לבעיה קיימת.
דיווח על בעיה בהטמעה
מצאתם באג בהטמעה של Chrome? או שההטמעה שונה מהמפרט?
- שולחים דיווח על באג בכתובת https://new.crbug.com. חשוב לכלול כמה שיותר פרטים, הוראות פשוטות לשחזור הבעיה ולהגדיר את Components לערך
UI>Browser>WebAppInstalls. Glitch הוא כלי מצוין לשיתוף של הדמיות מהירות וקלות.
תמיכה ב-API
מתכננים להשתמש ב-App Badging API באתר שלכם? התמיכה הציבורית שלכם עוזרת לצוות Chrome לתעדף תכונות, ומראה לספקי דפדפנים אחרים כמה חשובה התמיכה שלכם.
- אפשר לשלוח ציוץ אל @ChromiumDev באמצעות ההאשטאג
#BadgingAPIולספר לנו איפה ואיך אתם משתמשים בו.
קישורים שימושיים
- הסבר ציבורי
- טיוטת מפרט
- הדגמה של Badging API | מקור ההדגמה של Badging API
- באג במעקב
- הרשומה ב-ChromeStatus.com
- רכיב Blink:
UI>Browser>WebAppInstalls
התמונה הראשית של Prateek Katyal ב-Unsplash