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