תמיכה בסמלים מותאמים באפליקציות PWA עם סמלים שניתנים להתאמה (maskable)

סמלי אפליקציות שמותאמים לפלטפורמות שונות.

תומאס סטיינר

אלון טיגריס

מהם סמלים שניתנים למיסוך?

אם התקנתם Progressive Web App בטלפון Android לאחרונה, יכול להיות שהסמל מופיע עם רקע לבן. ל-Android Oreo נוספו סמלים מותאמים, שמציגים סמלים של אפליקציות במגוון צורות מדגמי מכשירים שונים. סמלים שלא תואמים לפורמט החדש הזה מקבלים רקע לבן.

סמלים ניתנים לאנונימיזציה הם פורמט חדש של סמלים שנותן לכם יותר שליטה ומאפשרים ל-Progressive Web App להשתמש בסמלים מותאמים. אם מוסיפים סמל שניתן למיסוך, הסמל יכול למלא את כל הצורה ולראות נהדר בכל מכשירי Android. לאחרונה נוספו תמיכה בפורמט החדש הזה ב-Firefox וב-Chrome, ואתם יכולים לאמץ אותו באפליקציות שלכם.

האם הסמלים הנוכחיים שלי מוכנים?

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

למרבה המזל, יש 'אזור בטוח מינימלי' מוגדר היטב וסטנדרטי שמתאים לכל הפלטפורמות. החלקים החשובים של הסמל, כמו הלוגו, צריכים להיות ברדיוס מעוגל במרכז הסמל, ברדיוס של 40% מרוחב הסמל. אפשר לחתוך את הקצה החיצוני של 10%.

אתם יכולים לבדוק אילו חלקים של הסמלים שלכם נוחתים באזור הבטוח באמצעות כלי הפיתוח ל-Chrome. כשאפליקציית Progressive Web App פתוחה, מפעילים את כלי הפיתוח ומנווטים לחלונית Application. בקטע Icons תוכלו לבחור להציג רק את האזור הבטוח המינימלי לסמלים שניתן למיסוך. הסמלים ייחתכו כך שרק האזור הבטוח יהיה גלוי. אם הלוגו שלכם מופיע באזור הבטוח הזה, אתם מוכנים.

כדי לבדוק את הסמל שניתן למיסוך עם מגוון הצורות של Android, משתמשים בכלי Maskable.app שנוצר על ידי Tiger. פתחו את הסמל, ואז Maskable.app יאפשר לכם לנסות צורות וגדלים שונים, ולשתף את התצוגה המקדימה עם אחרים.

איך משתמשים בסמלים שניתנים למיסוך?

אם רוצים ליצור סמל שניתן למיסוך על סמך סמל קיים, אפשר להשתמש ב-Maskable.app Editor. העלו את הסמל, שנו את הצבע והגודל, ואז ייצאו את התמונה.

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

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

{
  …
  "icons": [
    …
    {
      "src": "path/to/regular_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable" // <-- New property value `"maskable"`
    },
    …
  ],
  …
}

לסמלים שניתנים לאנונימיזציה צריך להיות ערך שונה עבור purpose: "maskable". המשמעות היא שתמונה מיועדת לשימוש עם מסכות של סמלים, כך שיש לכם שליטה רבה יותר על התוצאה. כך לא יהיה לסמלים רקע לבן. תוכלו גם לציין כמה מטרות שמופרדות ברווחים (לדוגמה, "any maskable"), אם רוצים שייעשה שימוש בסמל שניתן למיסוך ללא מסכה במכשירים אחרים.

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

אישורים

המאמר הזה נכתב על ידי Joe Medley.