ממשק API של תיוג לאפליקציות אינטרנט

לכל אפליקציה מגיע תג

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

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

תנאים מוקדמים

על מנת שאפליקציית האינטרנט שלך תוכל להציג תג, היא צריכה לעמוד ב"קריטריונים להתקנות "של גוגל, המקושרים להלן בתוספת. וזה הגיוני לחלוטין: ה- PWA שלך צריך להיות מותקן במכשיר כדי שיהיה מקום קבוע במערכת שלך. ב- Windows, האפליקציות שלך חיות בשורת המשימות וב- macOS הן בעגינה.

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

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

איך זה עובד

היישום בפועל הוא מאוד פשוט ודורש רק כמה שורות קוד כדי לכסות את כל מקרי השימוש.

// These code examples asume you're using
// Typescript, as they use optional chaining.
//
// Also note that the API-calls for badging
// return a promise that can directly be
// catched.

async function setSimpleBadge(){
  // Just a simple indicator without any value.
  // This is the simplest variant of a badge.
  await navigator?.setClientBadge();
}

async function incrementBadgeCount(){
  // Get our dummy count and update it,
  // just to give more context for this demo.
  const countNow = getUnreadMessagesCount();
  await setUnreadMessagesCount(countNow + 1);
  
  // Update the UI.
  await navigator.setAppBadge(countNow + 1)
    .catch((error) => { /* ... */ });
}

async function resetBadge(){
  // As simple as it gets: reset the badge UI.
  await navigator.clearClientBadge();
}

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

סיכום

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