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

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

כל 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

בכלי הפיתוח

  1. בחלונית השמאלית, בקטע Application, בוחרים באפשרות Manifest.
  2. לבדוק את השדות במניפסט כפי שהם מנתחים בדפדפן.

עבור Firefox

  1. פותחים את כלי הבדיקה.
  2. עוברים אל הכרטיסייה 'אפליקציה'.
  3. בוחרים באפשרות המניפסט בחלונית הימנית.
  4. לבדוק את השדות במניפסט כפי שהם מנתחים בדפדפן.

עיצוב חוויית השימוש ב-PWA

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

שדות בסיסיים

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

name
השם המלא של ה-PWA. היא תופיע לצד הסמל במסך הבית, במרכז האפליקציות, במגש האפליקציות או בתפריט של מערכת ההפעלה.
short_name
אופציונלי, שם קצר יותר של ה-PWA, המשמש כאשר אין מספיק מקום להציג את הערך המלא של השדה name. חשוב להקפיד על אורך של פחות מ-12 תווים כדי לצמצם את הסיכוי להיחתך.
icons
מערך אובייקטים של סמלים עם השדות src, type, sizes ושדות purpose אופציונליים, שמתארים אילו תמונות צריכות לייצג את ה-PWA.
start_url
כתובת ה-URL שאפליקציית ה-PWA אמורה להיטען כשהמשתמש מפעיל אותה מסמל ההתקנה. מומלץ לבחור נתיב מוחלט, ולכן אם דף הבית של ה-PWA הוא הרמה הבסיסית (root) של האתר, אפשר להגדיר אותו ל-'/' כדי לפתוח אותה כשהאפליקציה מופעלת. אם לא תספקו כתובת 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 על 1024 פיקסלים.

"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 אחוזים מרוחב הסמל. (ראו תמונה בהמשך). מכשירים שתומכים בסמלים שניתנים למיסוך יסתירו את הסמל שלך לפי הצורך.

האזור הבטוח מסומן כעיגול במרכז רדיוס של 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.

אותה אפליקציית PWA מותקנת במחשב עם צבע עיצוב שונה.

כשמגדירים צבעים במניפסט, למשל בתוך theme_color ו-background_color, יש להשתמש בצבעים בעלי שם ב-CSS, כמו salmon או orange, בצבעי RGB כמו #FF5500, או פונקציות צבע ללא שקיפות כמו rgb() או hsl(). מידע נוסף זמין בפרק בנושא עיצוב האפליקציה.

רוצה לנסות?

מסכי פתיחה

במכשירים מסוימים, תמונה סטטית מוצגת בזמן טעינת ה-PWA, כדי לספק משוב מיידי למשתמשים.

מערכת Android משתמשת בערכים theme_color, background_color ו-icon כדי ליצור את מסך הפתיחה.

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

אפליקציית 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.

משאבים