המניפסט של אפליקציית אינטרנט הוא קובץ שאתם יוצרים, שמגדיר לדפדפן איך אתם רוצים שהתוכן שלכם יוצג כאפליקציה במערכת ההפעלה. המניפסט יכול לכלול מידע בסיסי כמו שם האפליקציה, הסמל וצבע העיצוב; העדפות מתקדמות, כמו הכיוון הרצוי וקיצורי דרך של אפליקציה; ומטא-נתונים של קטלוג, כמו צילומי מסך.
כל PWA צריך לכלול מניפסט יחיד לכל אפליקציה, שמתארח בדרך כלל בתיקיית השורש, ומקושר בכל דפי ה-HTML שמהם אפשר להתקין את ה-PWA. התוסף הרשמי של המניפסט הוא .webmanifest, כך שאפשר לתת למניפסט שם כמו app.webmanifest.
הוספה של מניפסט של אפליקציית אינטרנט ל-PWA
כדי ליצור מניפסט של אפליקציית אינטרנט, קודם צריך ליצור קובץ טקסט עם אובייקט JSON שמכיל לפחות שדה name עם ערך מחרוזת:
app.webmanifest:
{
"name": "My First Application"
}
אבל לא מספיק ליצור את הקובץ, גם הדפדפן צריך לדעת שהוא קיים.
קישור למניפסט
כדי ליידע את הדפדפן לגבי המניפסט של אפליקציית האינטרנט, צריך לקשר אותו ל-PWA באמצעות אלמנט HTML של <link> והמאפיין rel מוגדר ל-manifest בכל דפי ה-HTML של ה-PWA. הדבר דומה לאופן שבו מקשרים גיליון סגנונות CSS למסמך.
index.html:
<html lang="en">
<title>This is my first PWA</title>
<link rel="manifest" href="/app.webmanifest">
ניפוי באגים במניפסט
כדי לוודא שהמניפסט מוגדר כראוי, אפשר להשתמש ב-Inspector ב-Firefox ובכלי הפיתוח בכל דפדפן מבוסס Chromium.
בדפדפני Chromium
בכלי הפיתוח
- בחלונית הימנית, בקטע אפליקציה, בוחרים באפשרות מניפסט.
- יש לבדוק את שדות המניפסט כפי שהדפדפן ניתח.
עבור Firefox
- פותחים את כלי הבדיקה.
- עוברים אל הכרטיסייה 'אפליקציות'.
- בוחרים באפשרות 'מניפסט' בחלונית הימנית.
- יש לבדוק את שדות המניפסט כפי שהדפדפן ניתח.
עיצוב חוויית ה-PWA
ה-PWA מחוברת עכשיו למניפסט שלה, והגיע הזמן למלא את שאר השדות כדי להגדיר את החוויה עבור המשתמשים.
שדות בסיסיים
קבוצת השדות הראשונה מייצגת את המידע העיקרי של ה-PWA. הן משמשות ליצירת הסמל והחלון של ה-PWA המותקנים, ולקביעה איך היא מופעלת. אלו הם:
name- השם המלא של ה-PWA. היא תופיע יחד עם הסמל במסך הבית, במרכז האפליקציות, באביזר העגינה או בתפריט של מערכת ההפעלה.
short_name- אופציונלי: שם קצר יותר של ה-PWA, שנעשה בו שימוש כשאין מספיק מקום להצגת הערך המלא של השדה
name. כדאי לשמור על טקסט באורך של פחות מ-12 תווים כדי לצמצם את הסיכוי לכך שהוא ייחתך. icons- מערך של אובייקטים של סמלים עם השדות
src,type,sizesו-purposeאופציונליים, שמתארים אילו תמונות צריכות לייצג את ה-PWA. start_url- כתובת ה-URL שה-PWA אמור להיטען כשהמשתמש מפעיל אותה מהסמל המותקן. מומלץ להשתמש בנתיב מוחלט, כך שאם דף הבית של ה-PWA הוא הבסיס של האתר, אפשר להגדיר את הערך'/' כדי לפתוח אותו כשהאפליקציה מופעלת. אם לא תספקו כתובת URL להתחלה, הדפדפן יוכל להשתמש בכתובת ה-URL שממנה ה-PWA הותקנה בהתחלה. הוא יכול להיות קישור עומק, כמו פרטי מוצר במקום מסך הבית.
display- אחד מתוך
fullscreen,standalone,minimal-uiאוbrowser, שמתאר איך מערכת ההפעלה צריכה לשרטט את חלון ה-PWA. מידע נוסף על מצבי התצוגה השונים מפורט בפרק בנושא עיצוב האפליקציה. ברוב התרחישים לדוגמה נעשה שימוש ב-standalone. id- מחרוזת שמזהה באופן ייחודי את ה-PWA הזה לעומת אפליקציות אחרות שעשויות להתארח באותו מקור. אם המדיניות לא מוגדרת,
start_urlישמש כערך חלופי. חשוב לזכור ששינוי שלstart_urlבעתיד (למשל, כשמשנים ערך של מחרוזת שאילתה) עלול לבטל את היכולת של הדפדפן לזהות שכבר מותקנת PWA.
סמלים
סמל ה-PWA מייצג את הזהות החזותית שלו בכל המכשירים של המשתמשים כשהוא מותקן, לכן חשוב להגדיר לפחות אחד מהם. המאפיין icons הוא אוסף של אובייקטים של סמלים, ולכן ניתן להגדיר מספר סמלים בפורמטים שונים כדי לספק למשתמשים את חוויית השימוש הטובה ביותר בסמלים. כל דפדפן יבחר סמל אחד או יותר בהתאם לצרכים שלו ולמערכת ההפעלה שבה הוא מותקן, הסמלים שקרובים יותר למפרטים הנדרשים.
כדי לבחור גודל סמל אחד בלבד, הוא צריך להיות בגודל 512 על 512 פיקסלים. עם זאת, מומלץ לספק גדלים נוספים, כולל תמונות בגודל 192 על 192, 384 על 384 ו-1024 על 1, 024 פיקסלים.
"icons": [
{
"src": "icons/512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "icons/1024.png",
"type": "image/png",
"sizes": "1024x1024"
}
]
אם לא תספקו סמל או שהסמלים לא בגדלים המומלצים, לא תעמדו בקריטריונים להתקנה בפלטפורמות מסוימות. בפלטפורמות אחרות, הסמל ייווצר באופן אוטומטי, למשל מצילום מסך של ה-PWA או מסמל גנרי.
סמלים שניתנים לאנונימיזציה
במערכות הפעלה מסוימות, כמו Android, ניתן להתאים סמלים לגדלים ולצורות שונים. לדוגמה, ב-Android 12, יצרנים או הגדרות שונים יכולים לשנות את צורת הסמלים מעיגולים לריבועים לריבועים עם פינה מעוגלת. כדי לתמוך בסמלים מותאמים מהסוגים האלה, אפשר לספק סמל שניתן למיסוך באמצעות השדה purpose.
כדי לעשות זאת, יש לספק קובץ תמונה ריבועי שהסמל הראשי שלו נמצא בתוך 'אזור בטוח', עיגול במרכז הסמל עם רדיוס של 40 אחוז מרוחב הסמל. (תמונה שמופיעה בהמשך). מכשירים שתומכים בסמלים שניתנים למיסוך יסתירו את הסמל לפי הצורך.
הנה דוגמה לסמל שניתן למיסוך במספר צורות נפוצות:
בתמונה הבאה, אם תשתמש בסמל שמימין כסמל שניתן למיסוך, יתקבלו תוצאות לא טובות במכשירים אם הוחלה עליהם מסכת צורה.
אפשר להשתמש בתמונה הזו עם יותר מרווח פנימי.
סמלים ניתנים לאנונימיזציה צריכים להיות בגודל של לפחות 512 על 512. אחרי שיוצרים נכס, אפשר להוסיף אותו לאוסף icons כדי לשפר את חוויית השימוש במכשירים נתמכים:
"icons": [
{
"src": "/icons/512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "/icons/1024.png",
"type": "image/png",
"sizes": "1024x1024"
},
{
"src": "/icons/512-maskable.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "maskable"
},
]
ברוב המקרים, אם הסמל שניתן למיסוך לא מוצג כמו שצריך, אפשר לשפר אותו על ידי הוספת עוד מרווח פנימי. Maskable.app הוא כלי אונליין חינמי לבדיקה וליצירת גרסה של הסמל שלך שניתן למיסוך.
שדות מומלצים
קבוצת השדות הבאה שצריך לכלול היא שדות שישפרו את חוויית המשתמש, למרות שהם לא נדרשים כדי שתהיה אפשרות להתקין אותם.
theme_color- צבע ברירת המחדל של האפליקציה, שמשפיע לפעמים על האופן שבו מערכת ההפעלה מציגה את האתר (למשל, צבע החלון ושורת הכותרת במחשב, או צבע שורת הסטטוס במכשירים ניידים). רכיב ה-HTML
theme-color<meta> יכול לשנות את הצבע הזה.
background_color- צבע Placeholder שיוצג ברקע של האפליקציה לפני שגיליון הסגנונות שלה נטען. נכון לעכשיו, המערכת מתעלמת מהשדה הזה ב-Safari ב-iOS וב-iPadOS וברוב הדפדפנים במחשבים.
scope- משנה את היקף הניווט של ה-PWA, וכך מאפשר לך להגדיר מה יוצג ומה לא יוצג בחלון של האפליקציה שמותקנת. לדוגמה, אם מקשרים לדף שלא נכלל בהיקף ההרשאות, הוא יוצג בדפדפן באפליקציה ולא בחלון ה-PWA. עם זאת, הפעולה הזו לא תשנה את ההיקף של קובץ השירות (service worker).
בתמונה הבאה אפשר לראות איך השדה theme_color משמש לסרגל הכותרת במחשב כשמתקינים PWA.
כשמגדירים צבעים במניפסט, למשל בתוך theme_color ו-background_color, יש להשתמש בצבעים בעלי שם של CSS, כגון salmon או orange, צבעי RGB כגון #FF5500, או פונקציות צבע ללא שקיפות כגון rgb() או hsl(). מידע נוסף זמין בפרק בנושא עיצוב האפליקציה.
אני רוצה לנסות
מסכי פתיחה
במכשירים מסוימים, תמונה סטטית מוצגת בזמן טעינת ה-PWA כדי לספק משוב מיידי למשתמש.
מערכת Android משתמשת בערכים theme_color, background_color ו-icon כדי ליצור את מסך הפתיחה.
כשמתקינים PWA ב-Android, המכשיר יוצר מסך פתיחה עם המידע שמגיע מהמניפסט, כפי שאפשר לראות בתרשים הבא.
מצד שני, Safari ב-iOS וב-iPadOS לא משתמש בקובץ המניפסט של אפליקציית האינטרנט כדי ליצור מסכי פתיחה. במקום זאת, הם משתמשים בתמונה שמקושרת מתוך רכיב <link> קנייני שדומה לאופן שבו הם מטפלים בסמלים. פרטים נוספים זמינים בפרק השיפור.
שדות מורחבים
קבוצת השדות הבאה מציגה מידע נוסף על ה-PWA. כל האפשרויות הן אופציונליות.
lang- תג שפה שמציין את השפה הראשית של ערכי המניפסט, כמו
enלאנגלית,pt-BRלפורטוגזית ברזילאית אוinלהינדי. dir- הכיוון להצגת שדות מניפסט שמאפשרים כיוון (כמו
name,short_nameו-description). הערכים החוקיים הםauto,ltr(משמאל לימין) ו-rtl(מימין לשמאל). orientation- הכיוון הרצוי של האפליקציה לאחר ההתקנה. יכול להיות שבמשחק יוגדר בקשה לפריסה לרוחב בלבד. ניתן להשתמש בכמה ערכים, אבל אם כוללים אותם, בדרך כלל הם ערכי
portraitאוlandscapeבאופן מפורש.
שדות של קידום מכירות
קבוצת השדות הרביעית מאפשרת לספק מידע שיווקי על ה-PWA, לדוגמה, בתהליכי התקנה, ברישומים ובתוצאות חיפוש.
description- הסבר לגבי ה-PWA.
screenshots- מערך של אובייקטים בצילום מסך עם
src,typeו-sizes(דומה לאובייקטicons) שנועדו להציג את ה-PWA. אין הגבלות גודל. categories- מערך קטגוריות שאליו שייכת PWA ישמש כרמזים לרישומים, אופציונלי מרשימת הקטגוריות הידועות. בדרך כלל הערכים האלה מופיעים באותיות קטנות.
iarc_rating_id- קוד האישור של International Age Rating Coalition עבור ה-PWA, אם יש כזה. היא נועדה לקבוע לאילו גילאים מתאימה PWA.
שדות קידום המכירות האלה בפעולה כבר היום. ב-Android, למשל, אם אפשר להתקין את ה-PWA ואתם מציינים לפחות ערכים בשדות description ו-screenshots, תיבת הדו-שיח של ההתקנה הופכת מסרגל מידע פשוט 'הוספה למסך הבית' ותיבת דו-שיח עם אפשרויות התקנה עשירה יותר, שדומה לזו שקיבלתם מחנות אפליקציות.
ב-Android, ניתן ליהנות מממשק משתמש מוצלח יותר להתקנה אם מזינים ערכים לשדות של קידום המכירות, כמו שאפשר לראות בסרטון הבא
ראה את שדות קידום המכירות הבאים בפעולה:
שדות יכולות
לבסוף, יש כמה שדות שקשורים ליכולות שונות שבהן ה-PWA יכולה להשתמש בדפדפנים נתמכים, כמו השדות shortcuts, share_target, display_overrides, כפי שמתואר בפרק היכולות. יש גם שדות כמו related_apps ו-prefer_related_apps (למידע נוסף כדאי לעיין בפרק הזיהוי) כדי לקשר את ה-PWA לאפליקציות המותקנות, לרוב מחנות אפליקציות.
הרבה שדות חדשים עשויים להופיע בעתיד, בעוד שדפדפנים יוסיפו עוד יכולות ל-Progressive Web Apps.