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

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

Pete LePage

מה זה App Tagging API?

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

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

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

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

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

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

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

תמיכה

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

אני רוצה לנסות

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

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

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

ב-Tag 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.
});

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

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

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

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

אפשר גם להגדיר את תג האפליקציה ברקע באמצעות קובץ השירות (service worker). אפשר לעשות זאת באמצעות סנכרון תקופתי ברקע, באמצעות Push API או שילוב של שניהם.

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

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

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

ממשק API של Web Push

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

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

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

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

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

משוב

הצוות של Chrome רוצה לשמוע על החוויה שלך עם ה-API של תג באפליקציה.

לספר לנו על עיצוב ה-API

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

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

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

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

הבעת תמיכה ב-API

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

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

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

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