אם התקנתם Progressive Web App (PWA) בטלפון Android לאחרונה, יכול להיות שתראו שלסמל האפליקציה יש רקע לבן. ל-Android 8.0 נוספו סמלים מותאמים, שמציגים סמלי אפליקציות במגוון צורות ודגמי מכשירים שונים. לסמלים שלא בפורמט הזה יש רקע לבן.
סמלים שניתנים לאנונימיזציה הם פורמט חדש של סמלים ב-Chrome וב-Firefox. הפורמט מאפשר להשתמש בסמלים שניתנים להתאמה ב-Progressive Web App, ומאפשרים לכם לשלוט טוב יותר במראה של הסמל.
האם הסמלים הנוכחיים שלי מוכנים?
מכיוון שסמלים ניתנים למיסוך צריכים לתמוך במגוון צורות, עליכם לספק לתמונה אטומה עם מרווח פנימי כלשהו שהדפדפן יוכל לחתוך לצורה ולגודל הנדרשים לכל דפדפן או פלטפורמה.
המפרט של הסמלים שניתנים למיסוך כולל 'אזור בטוח מינימלי' קבוע, שמתאים לכל הפלטפורמות. החלקים החשובים של הסמל, כמו הלוגו, צריכים להיות ברדיוס מעוגל במרכז הסמל, ברדיוס של 40% מרוחב הסמל. יכול להיות שהקצה החיצוני של 10% ייחתך בפלטפורמות מסוימות.
בעזרת כלי הפיתוח ל-Chrome אפשר לבדוק אילו חלקים של הסמלים נמצאים באזור הבטוח. כשאפליקציית Progressive Web App פתוחה, מפעילים את כלי הפיתוח ועוברים לחלונית Application. בקטע Icons תוכלו לבחור להציג רק את האזור הבטוח המינימלי לסמלים שניתן למיסוך. הפעולה הזו תחתוך את הסמלים כך שרק האזור הבטוח יהיה גלוי. אם הלוגו שלכם מופיע באזור הבטוח הזה, הסמל מוכן.
כדי לבדוק את הסמל שניתן למיסוך במגוון צורות ב-Android, משתמשים ב-Maskable.app של Tiger Oakes. פותחים סמל, וב-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.