בהכנה למצבי התצוגה של מחר

אפליקציות PWA יכולות להשתמש בפרמטר "display_override" כדי לטפל במצבי תצוגה מיוחדים.

מניפסט של אפליקציית אינטרנט הוא קובץ JSON שמעביר לדפדפן על ה-Progressive שלך אפליקציית אינטרנט ואיך היא צריכה להתנהג כשמתקינים את האפליקציה במחשב או במכשיר הנייד של המשתמש. באמצעות הנכס display, אפשר לקבוע איזה ממשק משתמש יוצג בדפדפן כשהאפליקציה מופעלת. לדוגמה, אפשר להסתיר את בסרגל הכתובות ובדפדפן Chrome. אפשר אפילו ליצור משחקים כך שיוצגו במסך מלא. חזרה קצרה – אלה מצבי התצוגה שצוינו נכון למועד שבו המאמר הזה נכתב.

נכס שימוש
fullscreen פותח את אפליקציית האינטרנט ללא אף ממשק משתמש של דפדפן ולוקח את כל אזור התצוגה הזמין.
standalone פותח את אפליקציית האינטרנט כדי להיראות ולהרגיש כמו עצמאי אפליקציה. האפליקציה פועלת בחלון משלה, בנפרד מהדפדפן, וגם מסתיר רכיבים רגילים של ממשק המשתמש של הדפדפן, כמו סרגל כתובות האתרים.
minimal-ui המצב הזה דומה ל-standalone, אבל מספק את להשתמש בקבוצה מינימלית של רכיבים בממשק המשתמש לשליטה בניווט (כמו כמו חזרה וטעינה מחדש).
browser חוויית שימוש רגילה בדפדפן.

מצבי התצוגה האלה פועלים לפי שרשרת גיבוי מוגדרת היטב ("fullscreen""standalone""minimal-ui""browser"). אם דפדפן מסוים לא תומך הוא יחזור למצב התצוגה הבא בשרשרת.

חסרונות של הנכס display

הבעיה בגישה של שרשרת גיבויים בחיבור קווי היא פי 3:

  • מפתח לא יכול לשלוח בקשה ל-"minimal-ui" בלי צורך באילוץ חזרה למצב התצוגה של "browser" במקרה ש-"minimal-ui" לא נתמך על ידי דפדפן מסוים.
  • למפתחים אין דרך לטפל בהבדלים בין דפדפנים שונים, למשל אם הדפדפן כולל או מחריג לחצן 'הקודם' בחלון של מצב "standalone".
  • ההתנהגות הנוכחית ולכן לא ניתן להציג מסך חדש באופן של תאימות לאחור, כי בחקירות כמו מצב אפליקציה עם כרטיסיות את המקום הטבעי בשרשרת החלופית.

הנכס display_override

הבעיות האלה נפתרות באמצעות המאפיין display_override, שהדפדפן מביא בחשבון לפני את המאפיין display. הערך שלו הוא רצף של מחרוזות שנחשבות לפי סדר. יופעל מצב התצוגה הנתמך הראשון. אם אף אחת מהאפשרויות לא נתמכת, הדפדפן יחזור לבצע הערכה השדה display.

בדוגמה הבאה, שרשרת החלופה של מצב התצוגה תיראה כך. (הפרטים של "window-controls-overlay" לא רלוונטיים למאמר הזה.)

  1. "window-controls-overlay" (קודם כול, בודקים את display_override).
  2. "minimal-ui"
  3. "standalone" (כשהמשתמש display_override נוצל במלואו, יש להעריך את הערך display.)
  4. "minimal-ui" (לסיום, יש להשתמש בשרשרת החלופית display).
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

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

אימות חתימות

הנכס display_override הוגדר באופן רשמי על ידי דניאל מרפי