יש הרבה שיפורים שיכולים לשפר את ההמרה של 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
אפשר להגדיר גרסאות שונות של תמונת ההשקה באמצעות שאילתת מדיה בתוך המאפיין 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 הוא דוגמה לכלי כזה. - מחולל בצד הלקוח, כלי JavaScript שיכול להטמיע גרסה אחת או יותר של תמונת ההפעלה ב-base64 בתוך רכיבים שהוחדרו ל-
<link>, על סמך סוג המכשיר הנוכחי וגודל המסך. אפשר להשתמש באזור עריכה בזיכרון, לעבד את התמונה ולהמיר אותה ל-URI שלdata:באמצעות קובץ PNG. הספרייה של PWA Compat היא ספרייה בצד הלקוח שאפשר להשתמש בה בקלות באמצעות שכפול מסך ההפעלה האופייני של Android.
איתור PWA בפלטפורמות לניידים של Apple
כדאי להשתמש ב-Progressive Progressive & זיהוי תכונות ב-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. אמנם אין תמיכה ב-display: fullscreen כמו במכשירי Android, אבל אפשר להשתמש במטא תג לא סטנדרטי כדי להעביר את ה-PWA למצב מסך מלא.
בתמונה הבאה אפשר לראות בצד שמאל עיצוב עצמאי שמוגדר כברירת מחדל עם צבע עיצוב, ובצד שמאל, אפליקציית PWA עם מצב iOS במסך מלא שמאפשרת לעבד תוכן מאחורי שורת הסטטוס.
אם מוסיפים את התג הבא ב-HTML, ה-PWA ב-iOS וב-iPadOS תעבור למצב מסך מלא, אבל היא שונה מ-Android.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
במצב הזה, שורת הסטטוס של המכשיר (בחלק העליון שבו מופיע השעון, רמת הסוללה וסמלי ההתראות) עדיין גלויה, אבל מעובדת מעל התוכן עם רקע שקוף.
כשמשתמשים במצב הזה, צריך להיזהר עם העיצוב כי מערכת ההפעלה תמיד מציגה את הסמלים בלבן. לכן צריך תמיד להבדיל בין הרקעים בחלק העליון של המסך לבין התוכן הבהיר. בנוסף, חשוב להשתמש במשתני סביבה של CSS כדי לעבד את התוכן באזור הבטוח, כפי שניתן לראות בפרק בנושא עיצוב אפליקציות.
אמינות ההתקנה
Safari ב-iOS וב-iPadOS לפני גרסה 15.4 טוען את קובץ המניפסט מהרשת רק כשהמשתמש פותח את גיליון השיתוף באמצעות סמל השיתוף בדפדפן, ולא כשהדף נטען. לכן, Safari לא בודק אם האתר שלכם הוא PWA עד לאותו רגע, וזה עלול להוביל למצבים שבהם לא ניתן לטעון את המניפסט או שלוקח יותר מדי זמן לטעון אותו, ומערכת Safari מתעלמת ממנו.
אם דפדפן Safari לא מצליח לטעון את המניפסט בזמן, לחץ על 'הוסף למסך הבית' מציב סמל במסך הבית, אבל לא מספק חוויית שימוש באפליקציה. הוא פשוט יהיה קיצור דרך לכרטיסיית Safari.