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

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

כל אפליקציית 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) של הסמל.

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

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
קוד האישור International Age Rating Coalition ל-PWA, אם יש כזה. הוא מיועד לקבוע לאילו קבוצות גיל אפליקציית ה-PWA שלכם מתאימה.

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

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

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

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

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

ייתכן ששדות חדשים רבים יופיעו בעתיד, בזמן שהדפדפנים יוסיפו יכולות נוספות ל-Progressive Web Apps.

משאבים