אפליקציות PWA יכולות להשתמש במאפיין "display_override" כדי לטפל במצבי תצוגה מיוחדים.
מניפסט של אפליקציית אינטרנט הוא קובץ JSON שכולל מידע לדפדפן על Progressive Web App ואיך הוא צריך להתנהג כשהוא מותקן במחשב או בנייד של המשתמש.
באמצעות הנכס display
, אפשר להתאים אישית את ממשק המשתמש של הדפדפן שמוצג כשהאפליקציה מופעלת. לדוגמה, אפשר להסתיר
את סרגל הכתובות ואת דפדפן Chrome. אפשר אפילו להגדיר משחקים כך שיוצגו במסך מלא.
לסיכום מהיר של המילים הבאות, הנה מצבי התצוגה שצוינו כשמאמר זה נכתב.
נכס | שימוש ב- |
---|---|
fullscreen |
פותח את אפליקציית האינטרנט ללא ממשק משתמש של הדפדפן וממלא את כל אזור התצוגה הזמין. |
standalone |
האפליקציה פותחת את אפליקציית האינטרנט כדי להיראות ולהרגיש כמו אפליקציה עצמאית. האפליקציה פועלת בחלון משלה, בנפרד מהדפדפן, ומסתירה רכיבים רגילים בממשק המשתמש של הדפדפן, כמו סרגל כתובות ה-URL. |
minimal-ui |
המצב הזה דומה ל-standalone , אבל הוא מספק למשתמש קבוצה מינימלית של רכיבים בממשק המשתמש לשליטה בניווט (כמו חזרה וטעינה מחדש).
|
browser |
חוויית דפדפן רגילה. |
מצבי התצוגה האלה פועלים לפי שרשרת גיבוי מוגדרת היטב ("fullscreen"
← "standalone"
← "minimal-ui"
← "browser"
). אם הדפדפן לא תומך במצב מסוים, הוא חוזר למצב התצוגה הבא בשרשרת.
חסרונות של הנכס display
יש שלושה סוגים של בעיות בגישה שמבוססת על השרשרת של הגיבוי הקווי:
- מפתח לא יכול לבקש
"minimal-ui"
בלי לאלץ חזרה למצב התצוגה של"browser"
במקרה שדפדפן מסוים לא תומך ב-"minimal-ui"
. - למפתחים אין דרך לטפל בהבדלים בין דפדפנים שונים, למשל אם הדפדפן כולל או לא כולל לחצן 'הקודם' בחלון של מצב
"standalone"
. - בהתאם להתנהגות הנוכחית, אי אפשר להוסיף מצבי תצוגה חדשים בתאימות לאחור, כי אין מקום טבעי בשרשרת של חזרה לגרסה קודמת, כמו במצב אפליקציה בכרטיסייה עם כרטיסיות.
הנכס display_override
כדי לפתור את הבעיות האלה, הדפדפן צריך להביא בחשבון את המאפיין display_override
, לפני הנכס display
. הערך שלו הוא רצף של מחרוזות שנחשבות לפי הסדר, ומיושם מצב התצוגה הראשון הנתמך. אם אין תמיכה בשדה הזה, הדפדפן יחזור לבצע הערכה של השדה display
.
בדוגמה הבאה, שרשרת החלופה של מצב התצוגה תיראה כך.
(הפרטים של "window-controls-overlay"
לא רלוונטיים למאמר הזה).
"window-controls-overlay"
(קודם כול, בודקים אתdisplay_override
.)"minimal-ui"
"standalone"
(כשהציון שלdisplay_override
ינוצל במלואו, יש לבדוק את הערךdisplay
)."minimal-ui"
(לבסוף, צריך להשתמש בשרשרת הגיבויdisplay
)."browser"
{
"display_override": ["window-controls-overlay", "minimal-ui"],
"display": "standalone",
}
כדי להמשיך להשתמש בתאימות לאחור, כל מצב תצוגה עתידי יתקבל רק כערך של
display_override
, אבל לא של display
.
דפדפנים שלא תומכים ב-display_override
עוברים לנכס display
ומתעלמים מ-display_override
כנכס מניפסט לא ידוע של אפליקציית אינטרנט.
קישורים שימושיים
אימות חתימות
הנכס ב-display_override
עוצב באופן רשמי על ידי דניאל מרפי.