הפרק הזה מתמקד בכמה היבטים קריטיים של עיבוד תוכן מחוץ לכרטיסייה בדפדפן.
החלון
למערכות הפעלה שונות יש רעיונות שונים לגבי חלון האפליקציה. לדוגמה, במכשירי iPhone, אפליקציה תמיד תופסת 100% מהמסך. אפליקציות ל-Android ול-iPad פועלות בדרך כלל במסך מלא, אבל אפשר לשתף את המסך בין שתי אפליקציות, אבל יש רק מופע אחד של אפליקציה פתוח בכל פעם. לעומת זאת, במחשב שולחני, לאפליקציה יכולה להיות יותר ממכונה אחת פתוחה בכל רגע נתון. הוא משתף את שטח המסך הזמין עם כל שאר האפליקציות הפתוחות. ניתן לשנות את הגודל של כל מופע של אפליקציה ולמקם אותו בכל מקום במסך, גם כשהוא חופף לאפליקציות אחרות.
הסמל
אנחנו מזהים אפליקציות לפי הסמל שלהן. הסמל מופיע כשאתם מחפשים אפליקציות, בהגדרות, בכל מקום שבו אתם מפעילים אפליקציות וגם במקומות שבהם מוצגות אפליקציות פעילות.
האפשרויות הן:
- מסך הבית (iOS, iPadOS, Android).
- מרכז האפליקציות (macOS, Android).
- תפריט ההתחלה או תפריט האפליקציה (Windows, ChromeOS, Linux).
- חלוניות באביזר העגינה, בסרגל המשימות או בריבוי משימות (כל מערכות ההפעלה).
כשאתם יוצרים את הסמל של Progressive Web App, ודאו שהסמל שלו לא תלוי פלטפורמה, כי כל מערכת הפעלה יכולה לעבד סמלים ולהחיל עליהם מסכות צורה שונות, כמו אלה שמופיעות בתמונה למטה.
קביעת עיצוב לאפליקציה
יש כמה דרכים להתאים אישית את עיצוב האפליקציה באפליקציות ה-PWA, כולל:
- צבע העיצוב: מגדיר את הצבע של שורת הכותרת של החלון במחשב ואת הצבע של שורת הסטטוס במכשירים ניידים. באמצעות מטא תג, תוכלו לבחור לסכמות שונות, כמו מצב כהה או בהיר, והמערכת תשתמש בהן בהתאם להעדפות של המשתמש.
- צבע רקע: מגדיר את צבע החלון לפני טעינת האפליקציה וה-CSS שלה.
- צבע משני: מגדיר את הצבע של רכיבי הדפדפן המובנים, כגון פקדי טפסים.
מצבי תצוגה
אפשר להגדיר את חוויית החלון הרצויה ב-Progressive Web App. אפשר לבחור מבין שלוש אפשרויות:
- מסך מלא
- עצמאי
- ממשק משתמש מינימלי
חוויית המשתמש במסך מלא
חוויה במסך מלא מתאימה לחוויות סוחפות כמו משחקים, מציאות מדומה (VR) או מציאות רבודה (AR). היא זמינה כרגע רק במכשירי Android, ומסתירה את שורת הסטטוס ואת סרגל הניווט, כך של-PWA יהיה 100% מהמסך להצגת התוכן.
במחשבים וב-iPadOS, אין תמיכה באפליקציות PWA במסך מלא. עם זאת, אפשר להשתמש ב-Fullscreen API מתוך ה-PWA כדי להציג את האפליקציה במסך מלא לבקשת המשתמש.
חוויה עצמאית
האפשרות הנפוצה ביותר ל-Progressive Web App – מצב עצמאי מציג את ה-PWA בחלון רגיל של מערכת ההפעלה, ללא ממשק משתמש לניווט בדפדפן. בנוסף, החלון עשוי לכלול תפריט בשליטת הדפדפן שבו המשתמש יכול:
- מעתיקים את כתובת ה-URL הנוכחית.
- הצגה, החלה או השבתה של תוספי דפדפן.
- הצגה ושינוי של הרשאות.
- יש לבדוק את המקור הנוכחי ואת אישור ה-SSL.
יכול להיות שבסרגל הכותרת יוצגו גם ההרשאות והשימוש בחומרה שמחליפים את סרגל הכתובות או את סרגל כתובות ה-URL כשה-PWA עובר רינדור בכרטיסייה.
במכשירים ניידים, חוויית PWA עצמאית תיצור מסך רגיל ששומר על שורת הסטטוס גלויה, כך שהמשתמש עדיין יכול לראות את ההתראות, השעה ורמת הטעינה של הסוללה. בדרך כלל הממשק לא כולל תפריט בשליטת הדפדפן, כמו שאפשר לכלול בממשק העצמאי של מחשב.
חלק מהדפדפנים ב-Android יוצרים התראה קבועה שקטה כשה-PWA פועלת בחזית, שמאפשרת למשתמש להעתיק את כתובת ה-URL הנוכחית או אפשרויות אחרות.
ממשק משתמש מינימלי
המצב הזה זמין לאפליקציות מסוג Progressive Web App במערכות ההפעלה Android ובמחשב. כשמשתמשים בה, הדפדפן שמעבד את ה-PWA יציג ממשק משתמש מינימלי כדי לעזור למשתמשים לנווט באפליקציה.
ב-Android יופיע סרגל כותרת שמעבד את הרכיב הנוכחי ב-<title> ואת המקור, עם תפריט נפתח קטן זמין. במחשב שולחני, יוצגו לחצנים בסרגל הכותרת על מנת לעזור בניווט, כולל לחצן 'הקודם' ופקדים שמחליפים בין עצירה לפעולת טעינה מחדש, בהתאם לסטטוס הטעינה הנוכחי.
אופטימיזציה של העיצוב למחשב
כשמעצבים Progressive Web App כך שיפעלו במחשב שולחני, יש לחשוב על האפשרויות הרבות לגודל החלון בהשוואה לשהייה בכרטיסיית הדפדפן או כאפליקציה במערכת הפעלה לנייד.
בפרק 3 הזכרנו את המצב מיני: אפליקציות למחשב יכולות להיות גם בגודל של 200 על 100 פיקסלים. החלון הזה ישתמש בתוכן של הרכיב <title> ב-HTML ככותרת החלון. התוכן הזה מעובד גם כשעוברים ל-alt Tab בין אפליקציות ובמקומות אחרים.
יש לשים לב לרכיב <title> של ה-HTML ולחשוב שוב על אופן השימוש בו. <title> לא מיועד רק ל-SEO או לעיבוד רק של התווים הראשונים בכרטיסייה של הדפדפן. הוא יהיה חלק מחוויית המשתמש בחלון הנפרד של המחשב.
שיטות מומלצות לשימוש בשירות CSS
כל חוויית השימוש בפריסה, עיצוב ואנימציה של CSS תקפה כאשר התוכן שלכם עובר רינדור בממשק נפרד. עם זאת, יש כמה טיפים וטריקים לשיפור החוויה בחלון נפרד.
שאילתות מדיה
שאילתת המדיה הראשונה שאפשר להשתמש בה ב-PWA היא הנכס display-mode שמקבל את הערכים browser, standalone, minimal-ui או fullscreen.
שאילתת המדיה הזו מחילה סגנונות שונים על כל מצב. לדוגמה, ניתן לעבד הזמנה להתקנה רק במצב דפדפן, או לעבד פרט מידע מסוים רק כשהמשתמש משתמש באפליקציה מסמל המערכת. הפעולות האלה יכולות לכלול הוספה של לחצן 'הקודם' שישמש כשהאפליקציה תופעל במצב עצמאי.
/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}
חוויית השימוש באפליקציה
כשהמשתמשים משתמשים ב-PWA מותקן, הם מצפים להתנהגות באפליקציה. לא פשוט להגדיר את המשמעות, אבל התנהגות ברירת המחדל באינטרנט לא מספקת את החוויה הטובה ביותר במצבים מסוימים.
בחירת משתמש
בדרך כלל ניתן לבחור בתוכן באמצעות עכבר או מצביע, או באמצעות לחיצה ארוכה על הלחצן במגע. אמנם הוא מועיל לתוכן, אבל לא מספק את החוויה הטובה ביותר בפריטי ניווט, תפריטים ולחצנים ב-PWA.
לכן, כדאי להשבית את בחירת המשתמשים ברכיבים האלה באמצעות user-select: none, ובגרסת הקידומת -webkit- שלה:
.unselectable {
user-select: none;
}
Accent color
ב-PWA, אפשר להגדיר צבע שיתאים למותג בפקדי טפסים ב-HTML באמצעות המאפיין accent-color.
גופני מערכת
אם רוצים שרכיב מסוים, כמו תיבות דו-שיח או הודעות, יתאים לגופן הפלטפורמה שמוגדר כברירת המחדל של המשתמש, אפשר להשתמש במשפחת הגופנים הבאה:
selector {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
"Helvetica Neue", sans-serif;
}
צריך למשוך כדי לרענן
לדפדפנים מודרניים לנייד, כמו Google Chrome ו-Safari, יש תכונה שמרעננת את הדף כשהוא נמשך. בדפדפנים מסוימים, כמו Chrome ב-Android, ההתנהגות הזו מופעלת גם באפליקציות PWA עצמאיות.
אפשר להשבית את הפעולה הזו. לדוגמה, כשמספקים ניהול תנועות או פעולת רענון משלכם, או אם יש אפשרות שהמשתמש יפעיל את הפעולה בטעות.
ניתן להשבית את ההתנהגות הזו באמצעות overscroll-behavior-y: contain:.
body {
overscroll-behavior-y: contain;
}
אזורים בטוחים
למכשירים מסוימים אין מסכים מלבניים נקיים. במקום זאת, יכול להיות שהמסך שלהם יהיה בצורה שונה, כמו עיגול, או שהוא כולל חלקים שלא ניתן להשתמש בהם, כמו החריץ של iPhone 13. במקרים כאלה, חלק מהדפדפנים יחשפו משתני סביבה עם אזורים בטוחים שבהם ניתן להציג תוכן.
אם אתם רוצים גישה מלאה למסך, כולל לאזור המוסתר כדי לעבד את הצבע או התמונה, עליכם לכלול את הפרמטר viewport-fit=cover בתוכן של תג <meta name="viewport">. לאחר מכן משתמשים במשתני הסביבה safe-area-inset-* כדי להרחיב את התוכן בבטחה לאזורים האלה.