שיפורים

יש הרבה שיפורים שיכולים לשפר את ההמרה של PWA ואת השימוש בה.

קיצורי דרך לאפליקציות הם רשימה סטטית של קישורי עומק לאפליקציית ה-PWA. הם נכתבים במניפסט. מפרט מניפסט של אפליקציית אינטרנט. המפרט הזה מאפשר לכם להגדיר רשימת קיצורי דרך לחלקים או לתכונות שונים ב-PWA, וכך לזרז את הניווט לקטעים שבהם אתם ניגשים לעיתים קרובות.

קיצורי דרך לאפליקציות זמינים ברוב מערכות ההפעלה למחשבים וב-Android עם WebAPK, והם מופיעים בתפריט הקשרי של סמל האפליקציה במסך הבית, במעמד או בשורת המשימות, כמו בתמונה הבאה:

קיצורי דרך של אפליקציות ב-Android וב-macOS.

כדי לגשת לתפריט הזה, המשתמשים צריכים ללחוץ לחיצה ימנית או להקיש לחיצה ארוכה על הסמל של ה-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 הוא דוגמה לכלי כזה.
  • גנרטור בצד הלקוח, כלי 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 שמאפשרת להציג תוכן מאחורי שורת הסטטוס.

התנהגות ברירת מחדל עצמאית (משמאל) ומסך iOS במסך מלא (מימין).

אם תוסיפו את התג הבא ל-HTML, אפליקציית ה-PWA ב-iOS וב-iPadOS תעבור למצב מסך מלא, אבל הוא שונה מ-Android.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

במצב הזה, שורת הסטטוס של המכשיר (החלק העליון שבו מוצגים השעון, רמת הטעינה של הסוללה וסמלי ההתראות) עדיין גלויה, אבל היא מוצגת מעל התוכן עם רקע שקוף.

כשמשתמשים במצב הזה, חשוב להיזהר בתכנון כי מערכת ההפעלה תמיד תציג את הסמלים בלבן. לכן, תמיד כדאי ליצור ניגודיות בין הרקעים בחלק העליון של המסך לבין התוכן הבהיר. בנוסף, חשוב להשתמש במשתני סביבה של CSS כדי להציג תוכן באזור הבטוח, כפי שמתואר בפרק על עיצוב אפליקציות.

0px העליונים של אזור התצוגה נמצאים מתחת לסרגל הסטטוס כברירת מחדל. אם מוסיפים תג מטא שקוף-שחור, 0px העליונים של אזור התצוגה יהיו זהים לחלק העליון הפיזי של המסך.

אמינות ההתקנה

ב-iOS וב-iPadOS בגרסאות קודמות ל-15.4, קובץ המניפסט נטען מהרשת רק כשהמשתמש פותח את גיליון השיתוף – באמצעות סמל השיתוף בדפדפן – ולא כשהדף נטען. לכן, הדפדפן לא בודק אם האתר הוא אפליקציה לנייד (PWA) עד לאותו רגע. כתוצאה מכך, יכולות להיות מצבים שבהם לא ניתן לטעון את המניפסט או שהטעינה שלו נמשכת יותר מדי זמן, והדפדפן מתעלם ממנו.

אם הדפדפן לא מצליח לטעון את המניפסט בזמן, לחיצה על 'הוספה למסך הבית' תוסיף סמל למסך הבית, אבל לא תספק חוויית שימוש באפליקציה. זה יהיה רק קיצור דרך לכרטיסייה בדפדפן.

משאבים