שיפורים

יש שיפורים רבים שיכולים לשפר את ההמרות ואת השימוש ב-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

אפשר להגדיר גרסאות שונות של תמונת ההפעלה באמצעות שאילתת מדיה בתוך המאפיין 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

כדאי להשתמש ב-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 במסך מלא שמאפשר לעבד תוכן מאחורי שורת הסטטוס.

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

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

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

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

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

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

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

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

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

משאבים