הפרק הזה מתמקד בכמה היבטים חשובים של עיבוד תוכן מחוץ לכרטיסיית הדפדפן.
החלון
למערכות הפעלה שונות יש רעיונות שונים לגבי חלון של אפליקציה. לדוגמה, במכשירי iPhone, אפליקציה תמיד תופסת 100% מהמסך. בדרך כלל, אפליקציות במכשירי Android ו-iPad פועלות במסך מלא, אבל ניתן לשתף את המסך בין שתי אפליקציות, אבל רק מופע אחד של האפליקציה פתוח בכל פעם. לעומת זאת, במחשב שולחני יכולה להיות אפליקציה פתוחה מספר פעמים בו-זמנית. הוא משתף את שטח המסך הזמין עם כל שאר האפליקציות הפתוחות. אפשר לשנות את הגודל של כל מופע של אפליקציה ולמקם אותה בכל מקום במסך, גם כשחופפים לאפליקציות אחרות.
הסמל
אנחנו מזהים אפליקציות לפי הסמל שלהן. הסמל הזה מופיע כשמחפשים אפליקציות, בהגדרות, בכל מקום שבו מפעילים אפליקציות ובמקום שבו מוצגות אפליקציות פעילות.
למשל:
- מסך הבית (iOS, iPadOS, Android).
- מרכז האפליקציות (macOS, Android).
- תפריט ההתחלה או תפריט האפליקציה (Windows, ChromeOS, Linux).
- לוחות עגינה, סרגל משימות או ריבוי משימות (כל מערכות ההפעלה).
כשיוצרים את הסמל של Progressive Web App לוודא שהסמל שלו משתנה בהתאם לפלטפורמה, מכיוון שכל מערכת הפעלה יכולה לעבד סמלים ולהחיל עליהם מסכות צורה שונות, כמו אלה שבתמונה שלמטה.
עיצוב האפליקציה
יש כמה דרכים להתאים אישית את סגנון האפליקציה באפליקציית ה-PWA, כולל:
- צבע העיצוב: מגדיר את הצבע של שורת הכותרת של החלון במחשב ואת הצבע של שורת הסטטוס במכשירים ניידים. באמצעות מטא תג, אפשר להציע אפשרויות שונות, כמו מצב כהה או בהיר, והן ישמשו בהתאם להעדפות המשתמש.
- צבע רקע: מגדיר את צבע החלון לפני טעינת האפליקציה וה-CSS שלה.
- צבע משני: מגדיר את הצבע של רכיבי הדפדפן המובנים, כמו פקדי טפסים.
מצבי תצוגה
אתם יכולים להגדיר את סוג חוויית החלון הרצוי לכם ב-Progressive Web App. יש 3 אפשרויות:
- מסך מלא
- מודעה להצגה באופן עצמאי
- ממשק משתמש מינימלי
החוויה במסך מלא
חוויה במסך מלא מתאימה לחוויות סוחפות כמו משחקים, מציאות מדומה או מציאות רבודה. היא זמינה כרגע רק במכשירי Android, ומסתירה את שורת הסטטוס ואת סרגל הניווט. כך ה-PWA היא 100% מהמסך.
במחשבים וב-iPadOS, אין תמיכה באפליקציות PWA במסך מלא. עם זאת, אפשר להשתמש ב-Fullscreen API מתוך ה-PWA כדי להציג את האפליקציה במסך מלא לפי בקשת המשתמש.
חוויה עצמאית
האפשרות הנפוצה ביותר של Progressive Web App. במצב עצמאי, ה-PWA מוצגת בחלון רגיל של מערכת ההפעלה, ללא ממשק משתמש לניווט בדפדפן. החלון יכול לכלול גם תפריט בשליטת הדפדפן, שבו המשתמש יכול:
- מעתיקים את כתובת ה-URL הנוכחית.
- הצגה, החלה או השבתה של תוספי דפדפן.
- צפייה בהרשאות ושינוי שלהן.
- צריך לבדוק את המקור הנוכחי ואת אישור ה-SSL.
בסרגל הכותרת, יכול להיות שיוצגו גם הרשאות ושימוש בחומרה שיחליפו את סרגל הכתובות או את סרגל כתובות ה-URL כשה-PWA תעובד בכרטיסייה.
במכשירים ניידים, ממשק PWA עצמאי ייצור מסך סטנדרטי שבו ניתן לראות את שורת הסטטוס, כך שהמשתמש עדיין יוכל לראות את ההתראות, את השעה ואת רמת הטעינה של הסוללה. לרוב אין בו תפריט שמנוהל על ידי דפדפן, כמו ממשקים עצמאיים למחשב.
בחלק מהדפדפנים ב-Android מוצגת התראה קבועה ושקטה, בזמן שאפליקציית ה-PWA פועלת בחזית שמאפשרת למשתמש להעתיק את כתובת ה-URL הנוכחית או אפשרויות אחרות.
ממשק משתמש מינימלי
המצב הזה זמין ב-Progressive Web Apps במערכות הפעלה 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-* כדי להרחיב את התוכן באופן בטוח לאזורים האלה.