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

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

כל אפליקציית PWA צריכה לכלול מניפסט אחד לכל אפליקציה, שמתארח בדרך כלל בתיקיית השורש ומקושר לכל דפי ה-HTML שמהם אפשר להתקין את ה-PWA. הסיומת הרשמית שלו היא .webmanifest, כך שאפשר לתת למניפסט שם כמו app.webmanifest.

הוספת מניפסט של אפליקציית אינטרנט ל-PWA

כדי ליצור מניפסט של אפליקציית אינטרנט, קודם יוצרים קובץ טקסט עם אובייקט JSON שמכיל לפחות שדה name עם ערך מחרוזת:

app.webmanifest:

{
   "name": "My First Application"
}

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

קישור למניפסט

כדי שהדפדפן יזהה את המניפסט של אפליקציית האינטרנט, צריך לקשר אותו ל-PWA באמצעות רכיב HTML מסוג <link> והמאפיין rel שמוגדר כ-manifest בכל דפי ה-HTML של ה-PWA. האופן שבו מקשרים גיליון סגנונות CSS למסמך דומה לאופן שבו מקשרים גיליון סגנונות CSS למסמך.

index.html:

<html lang="en">
  <title>This is my first PWA</title>
  <link rel="manifest" href="/app.webmanifest">

ניפוי באגים במניפסט

כדי לוודא שהמניפסט מוגדר בצורה נכונה, אפשר להשתמש בכלי לבדיקת קוד ב-Firefox וב-DevTools בכל דפדפן שמבוסס על Chromium.

בדפדפני Chromium

ב-DevTools

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

ב-Firefox

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

עיצוב חוויית המשתמש של ה-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 ו-1,024 על 1,024 פיקסלים.

"icons": [
   {
      "src": "icons/512.png",
      "type": "image/png",
      "sizes": "512x512"
   },
   {
      "src": "icons/1024.png",
      "type": "image/png",
      "sizes": "1024x1024"
   }
]

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

סמלים שניתן להתאים (maskable)

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

כדי לעשות זאת, צריך לספק קובץ תמונה ריבועית שבו הסמל הראשי נמצא ב'אזור בטוח' – מעגל שממוקם במרכז הסמל ורדיוס שלו הוא 40% מרוחב הסמל. (ראו את התמונה שבהמשך). במכשירים שתומכים בסמלים שניתן להסתיר, הסמל שלכם יוסתר לפי הצורך.

האזור הבטוח מסומן כעיגול ברדיוס של 40 אחוזים במרכז הסמל הריבוע

זו דוגמה לסמל שניתן להחיל עליו מסכה, שעבר רינדור במספר צורות נפוצות:

בתמונה הבאה, אם משתמשים בסמל שמשמאל כסמל שניתן להתאמה (maskable), התוצאות יהיו גרועות במכשירים כשחלה עליו מסכה בצורת ריבוע.

סמל שלא מתאים לסמל שניתן למיסוך.

אפשר להשתמש בתמונה הזו עם יותר רווחים.

הסמל עם יותר ריפוד מתאים למסכות.

סמלים שניתן להציג אותם במסכה צריכים להיות בגודל 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 הוא כלי אונליין חינמי לבדיקה וליצירה של גרסה שניתן להסתיר (mask) של הסמל.

אם הסמל משמש למטרות כלליות שאפשר להסתיר, אפשר להגדיר את השדה purpose לערך "any maskable". פרטים נוספים זמינים במסמכי התיעוד של MDN בנושא מניפסט של אפליקציות אינטרנט.

קבוצת השדות הבאה שצריך לכלול היא קבוצה של שדות שיעזרו לשפר את חוויית המשתמש, גם אם הם לא נדרשים להתקנה.

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
מערך של קטגוריות שאליהן האפליקציה לנייד צריכה להשתייך כדי לשמש כהנחיות לכרטיסי מוצר, אפשר גם מתוך רשימת הקטגוריות המוכרות. הערכים האלה בדרך כלל קטנים.
iarc_rating_id
קוד האישור של ה-PWA מהקואליציה הבין-לאומית לדירוג גיל (IARC), אם יש לך כזה. הוא מיועד לקבוע לאילו קבוצות גיל אפליקציית ה-PWA שלכם מתאימה.

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

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

כדאי לראות איך השדות האלה של קידום המכירות פועלים:

שדות של יכולות

לבסוף, יש מספר שדות שקשורים ליכולות שונות שבהן אפליקציית ה-PWA יכולה להשתמש בדפדפנים נתמכים, כמו השדות shortcuts, ‏ share_target ו-display_override, כפי שמוסבר בפרק 'יכולות'. יש גם שדות, כמו related_apps ו-prefer_related_apps (מידע נוסף זמין בפרק 'זיהוי'), שמאפשרים לחבר את אפליקציית ה-PWA לאפליקציות מותקנות, לרוב מחנות אפליקציות.

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

משאבים