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