יש הרבה שיפורים שיכולים לשפר את ההמרות ואת השימוש באפליקציית ה-PWA.
קיצורי דרך לאפליקציות
קיצורי דרך לאפליקציות הם רשימה סטטית של קישורי עומק לאפליקציית ה-PWA. הם נכתבים במניפסט. מפרט מניפסט של אפליקציית אינטרנט. המפרט הזה מאפשר לכם להגדיר רשימת קיצורי דרך לחלקים או לתכונות שונים ב-PWA, שמאיצים את הניווט לקטעים שבהם אתם ניגשים לעיתים קרובות.
קיצורי דרך לאפליקציות זמינים ברוב מערכות ההפעלה למחשבים וב-Android עם WebAPK, והם מופיעים בתפריט הקשרי של סמל האפליקציה במסך הבית, במעמד או בשורת המשימות, כמו בתמונה הבאה:
כדי לגשת לתפריט הזה, המשתמשים צריכים ללחוץ לחיצה ימנית או להקיש לחיצה ארוכה על הסמל של ה-PWA.
קיצורי הדרך מוגדרים במאפיין shortcuts במניפסט. הפונקציה מקבלת מערך של חברים עם המאפיינים הבאים:
name- הטקסט שיוצג למשתמש, בדרך כלל בתפריט הקשר.
url- כתובת ה-URL ש-PWA צריך לטעון כשהמשתמש מפעיל אותו מהקיצור הדרך הזה. זו צריכה להיות כתובת URL בתוך היקף ה-PWA, והיא צריכה לקשר לעומק לתכונה שמתוארת ב-
nameאו ב-short_name. short_name- (אופציונלי) שם קצר יותר שמשמש כשאין מספיק מקום להצגת הערך המלא של השדה
name. description- (אופציונלי) תיאור של הפעולה שתתבצע באמצעות קיצור הדרך
icons- (אופציונלי) מערך של אובייקטים של סמלים עם השדות
src,type,sizesו-purposeאופציונלי, שמתארים אילו תמונות ייצגו את קיצור הדרך
מומלץ להתייחס לקיצורי הדרך של האפליקציות כאל יכולת שמבוססת על ניסיון. כלומר, אי אפשר להסתמך על כך שהקיצורי הדרך האלה יופיעו באופן עקבי, וגם אם הם יופיעו, לא תדעו כמה קיצורי דרך יופיעו או אם הפלטפורמה תתעלם מהסמלים, כי זה נתון לשיקול דעת הדפדפנים. לא נרחיב על כל פלטפורמה בנפרד, אבל בהמשך מוסבר איך זה עובד ב-Android ובמחשב. הדרך הטובה ביותר להתמודד עם חוסר הוודאות הזה היא להזמין את הפריטים לפי סדר עדיפות.
דוגמת הקוד הבאה מגדירה קיצורי דרך שונים לאפליקציה, שאפשר לנסות אם מתקינים את האפליקציה ב-Android באמצעות Chrome או במחשב באמצעות Edge או Chrome.
iOS ו-iPadOS
כשמפרסמים אפליקציות PWA, יש כמה שיפורים שיכולים לשפר את חוויית השימוש של המשתמשים ב-Safari ב-iOS או ב-iPadOS.
מסכי פתיחה
כפי שמתואר בפרק על מניפסט של אפליקציית אינטרנט, מערכת Android יוצרת מסכי פתיחה באופן אוטומטי על סמך הערכים במניפסט. המצב שונה ב-iOS וב-iPadOS. במכשירים האלה, צריך להגדיר את מסכי הטעינה ב-HTML כתמונות סטטיות באמצעות רכיבי <link>.
התמונות האלה נקראות 'תמונות הפעלה' במכשירי Apple, והן משתמשות במאפיין rel עם הערך apple-touch-startup-image, כמו:
<link rel="apple-touch-startup-image" href="ios-startup.png">
האתגר הוא שתמונת האתחול צריכה להיות בגודל החלון המדויק שבו אפליקציית ה-PWA תופיע כשהיא תיפתח. לכן, למכשירי iOS ו-iPadOS שונים נדרשות תמונות שונות. צריך לטפל במצבים נוספים ב-iPad, כמו פתיחה בפורמט לרוחב/לאורך ורינדור של אפליקציית ה-PWA במצב של ריבוי משימות (למשל,1/3, 1/2 או 2/3 מהמסך).
אפשר לבדוק רשימה מעודכנת של גודלי המסכים ב-iOS וב-iPadOS במסמך Apple Human Interface Guidelines.
אפשר להגדיר גרסאות שונות של תמונת ההשקה באמצעות שאילתה של מדיה בתוך המאפיין media:
<link rel="apple-touch-startup-image" href="ios-startup.png"
media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
media="orientation: landscape">
תבניות עיצוב לתמונות של אפליקציות ל-iOS
הגדרת קובצי אימג' של הפעלה היא משימה קשה, לכן יש לנו כמה כלים ליצירה ולהגדרה אוטומטיות:
- היצירה הסטטית משתלבת במערכת ה-build, יוצרת את כל התמונות הסטטיות בפורמט PNG ומספקת את קוד ה-HTML עם רכיבי
<link>להזרקה למסמך. PWA Asset Generator הוא דוגמה לכלי כזה. - גנרטור בצד הלקוח, כלי JavaScript שיכול להטמיע גרסה אחת או יותר של base64 של קובץ האימג' של האפליקציה לרכיבים מוחדרים של
<link>על סמך סוג המכשיר הנוכחי וגודל המסך. אפשר להשתמש בקנבס בזיכרון, ליצור עיבוד (רנדור) של התמונה ולהמיר אותה ל-URI שלdata:באמצעות קובץ PNG. ספריית PWA Compat היא ספריית לקוח קלה לשימוש שמבצעת את הפעולה הזו על ידי יצירת עותקים מקוריים (cloning) של מסך ההפעלה האופייני של Android.
זיהוי אפליקציית PWA בפלטפורמות לנייד של Apple
מומלץ להשתמש בשיפור הדרגתי ובזיהוי תכונות באפליקציית ה-PWA, אבל יכול להיות שיהיו מקרים קיצוניים שבהם נצטרך לדעת אם המשתמש נמצא באפליקציית PWA בפלטפורמות ניידות של Apple, למשל כשרוצים להציע הוראות התקנה או להוסיף קישורים לאפליקציות ספציפיות לפלטפורמה שזמינות רק ל-iOS.
כדי להימנע מקריאת המחרוזת של סוכן המשתמש, בודקים את המאפיין standalone של האובייקט navigator. זוהי מאפיין לא סטנדרטי, והוא זמין רק במנוע WebKit ב-iOS וב-iPadOS.
- אם הערך של
navigator.standaloneהואundefined, המשמעות היא שהמשתמש לא משתמש במכשיר עם מערכת iPadOS או iOS. - אם הערך של
navigator.standaloneהואfalse, סימן שהמשתמש פתח את אפליקציית ה-PWA בדפדפן והוא משתמש בה שם. - אם הערך של
navigator.standaloneהואtrue, סימן שהמשתמש פתח את ה-PWA ממסך הבית והוא מקבל את חוויית השימוש של ה-PWA הנפרד.
תמיכה במסך מלא
בדפדפן Safari ב-iOS ובמכשירי iPad, רק display: standalone נתמך כמצב תצוגה של אפליקציית ה-PWA.
בתמונה הבאה, בצד ימין מוצג עיצוב ברירת המחדל של אפליקציה עצמאית עם צבע נושא, ובצד ימין מוצגת אפליקציית PWA עם מצב מסך מלא ב-iOS שמאפשרת להציג תוכן מאחורי שורת הסטטוס.
אם תוסיפו את התג הבא ל-HTML, אפליקציית ה-PWA ב-iOS וב-iPadOS תעבור למצב מסך מלא, אבל הוא שונה מ-Android.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
במצב הזה, שורת הסטטוס של המכשיר (החלק העליון שבו מוצגים השעון, רמת הטעינה של הסוללה וסמלי ההתראות) עדיין גלויה, אבל היא מוצגת מעל התוכן עם רקע שקוף.
כשמשתמשים במצב הזה, חשוב להיזהר בתכנון כי מערכת ההפעלה תמיד תציג את הסמלים בלבן. לכן, תמיד צריך ליצור ניגודיות בין הרקעים בחלק העליון של המסך לבין התוכן הבהיר. בנוסף, חשוב להשתמש במשתני סביבה של CSS כדי להציג תוכן באזור הבטוח, כפי שמתואר בפרק על עיצוב אפליקציות.
אמינות ההתקנה
ב-iOS וב-iPadOS בגרסאות קודמות ל-15.4, קובץ המניפסט נטען מהרשת רק כשהמשתמש פותח את גיליון השיתוף – באמצעות סמל השיתוף בדפדפן – ולא כשהדף נטען. לכן, הדפדפן לא בודק אם האתר הוא אפליקציה לנייד (PWA) עד לאותו רגע. כתוצאה מכך, יכולות להיות מצבים שבהם לא ניתן לטעון את המניפסט או שהטעינה שלו נמשכת יותר מדי זמן, והדפדפן מתעלם ממנו.
אם הדפדפן לא מצליח לטעון את המניפסט בזמן, לחיצה על 'הוספה למסך הבית' תוסיף סמל למסך הבית, אבל לא תספק חוויית שימוש באפליקציה. זה יהיה רק קיצור דרך לכרטיסייה בדפדפן.