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 מותקנת (בשורת המשימות או ב-Dock).
- כדי להגדיר או לנקות את התג מהאפליקציה, לוחצים על הלחצן הגדרה או ניקוי . אפשר גם להוסיף מספר לערך התג.
איך משתמשים ב-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 נדרשת אפליקציה מותקנת, לבצע קריאות ל-Bigging 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. חשוב לכלול כמה שיותר פרטים
אפשר לתת לו הוראות פשוטות לשחזור, ולהגדיר את הרכיבים
UI>Browser>WebAppInstallsתקלה פועלת מצוין עבור ולשתף שחזורים מהירים וקלים.
הצגת תמיכה ב-API
האם אתם מתכננים להשתמש ב-App Badging API באתר שלכם? התמיכה הציבורית שלך עוזרת צוות Chrome מתעדף את התכונות, ומראה לספקי דפדפנים אחרים עד כמה הם חשובים היא לתמוך בהם.
- שליחת ציוץ אל @ChromiumDev בעזרת hashtag
#BadgingAPIוספר לנו איפה אתה משתמש בו ובאיזה אופן.
קישורים שימושיים
- הודעת הסבר ציבורית
- טיוטת מפרט
- הדגמה של ממשק ה-API של התג | מקור ההדגמה של Badging API
- באג במעקב
- רשומה של ChromeStatus.com
- רכיב Blink:
UI>Browser>WebAppInstalls
תמונה ראשית (Hero) של Prateek Katyal אצל ביטול הפתיחה