התקנה

אחרי שהמשתמש יתקין את ה-PWA, הוא:

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

קריטריוני התקנה

לכל דפדפן יש קריטריון שמסמן מתי אתר או אפליקציית אינטרנט הם מסוג Progressive Web App ואפשר להתקין אותם כדי ליהנות מחוויה עצמאית. המטא-נתונים של ה-PWA מוגדרים באמצעות קובץ מבוסס JSON שנקרא 'מניפסט של אפליקציית אינטרנט', שעליו נפרט במודול הבא.

כדרישה מינימלית להתקנת האפליקציה, רוב הדפדפנים שתומכים בה משתמשים בקובץ המניפסט של אפליקציית האינטרנט ובמאפיינים מסוימים כמו שם האפליקציה והגדרות של חוויית ההתקנה. היוצא מן הכלל הוא Safari ל-macOS, שלא תומך ביכולת ההתקנה.

הדרישות לאישור ההתקנה משתנות בין הדפדפנים השונים. מאמר זה מפרט את הקריטריונים עבור Google Chrome וכולל קישורים לדרישות עבור דפדפנים אחרים.

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

התקנה במחשב

כרגע, התקנת PWA במחשב נתמכת ב-Google Chrome וב-Microsoft Edge ב-Linux, ב-Windows, ב-macOS וב-Chromebook. הדפדפנים האלה יציגו תג (סמל) של התקנה בסרגל כתובת ה-URL (ראו תמונה למטה), שמציין שניתן להתקין את האתר הנוכחי.

Chrome ו-Edge במחשבים עם תג ההתקנה בסרגל כתובות ה-URL

כשמשתמש יוצר אינטראקציה עם אתר, הוא עשוי לראות חלון קופץ, כמו זה שמופיע למטה, שמזמין את המשתמשים להתקין את האתר כאפליקציה.

עזרה במוצר של Google Chrome עם הצעה להתקנת ה-PWA.

התפריט הנפתח של הדפדפן כולל גם פריט 'התקנה ' שהמשתמש יכול להשתמש בו:

אפשרויות בתפריט של Chrome ו-Edge להתקנת PWA.

במערכות הפעלה במחשב יש תמיכה רק במצבי תצוגה עצמאיים ובממשק משתמש מינימלי.

אפליקציות PWA שמותקנות במחשבים:

  • להציג סמל בתפריט 'התחלה' או במסך הפתיחה במחשבי Windows, באביזר העגינה או בשולחן העבודה בממשקי GUI של Linux, במשטח ההפעלה של macOS או במרכז האפליקציות של Chromebook.
  • להציג סמל במעבר בין אפליקציות ובאביזרי עגינה כשהאפליקציה פעילה, הייתה בשימוש לאחרונה או כשהאפליקציה פתוחה ברקע.
  • מופיעים בחיפוש באפליקציה, למשל חיפוש ב-Windows או ב-Spotlight ב-macOS.
  • יכולים להגדיר מספר תג על הסמלים שלהם כדי לציין התראות חדשות. כדי לעשות את זה, משתמשים ב-Badging API.
  • ניתן להגדיר תפריט הקשרי לסמל באמצעות קיצורי דרך של אפליקציות.
  • לא ניתן להתקין פעמיים באותו דפדפן.

אחרי שמתקינים אפליקציה במחשב, המשתמשים יכולים לנווט אל about:apps, ללחוץ לחיצה ימנית על PWA ולבחור באפשרות 'הפעלת האפליקציה בזמן הכניסה' אם הם רוצים שהאפליקציה תיפתח באופן אוטומטי בזמן ההפעלה.

התקנה של iOS ו-iPadOS

לא קיימת הנחיה בדפדפן להתקנת ה-PWA ב-iOS וב-iPadOS. בפלטפורמות האלה אפליקציות PWA נקראות גם אפליקציות אינטרנט במסך הבית. יש להוסיף את האפליקציות האלה באופן ידני למסך הבית דרך תפריט שזמין רק ב-Safari. מומלץ להוסיף את התג apple-touch-icon ל-HTML. כדי להגדיר את הסמל, יש לכלול את הנתיב לסמל אל קטע ה-HTML <head>, באופן הבא:

<link rel="apple-touch-icon" href="/icons/ios.png">

המידע הזה ישמש את Safari כדי ליצור את קיצור הדרך. אם לא תספקו סמל ספציפי למכשירי Apple, הסמל במסך הבית יהיה צילום מסך של ה-PWA כשהמשתמש התקין אותו.

חשוב להבין שהתקנת PWA זמינה רק אם המשתמש גולש באתר שלכם מ-Safari. דפדפנים אחרים שזמינים ב-App Store, כמו Google Chrome, Firefox, Opera או Microsoft Edge, לא יכולים להתקין PWA במסך הבית.

השלבים להוספת אפליקציות למסך הבית הם:

  1. פותחים את תפריט השיתוף, שנמצא בחלק התחתון או בחלק העליון של הדפדפן.
  2. לוחצים על הוספה למסך הבית.
  3. אשר את שם האפליקציה; השם ניתן לעריכה על ידי משתמש.
  4. לוחצים על Add. ב-iOS וב-iPadOS, סימניות לאתרים ולאפליקציות PWA נראות אותו הדבר במסך הבית.

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

אפליקציות PWA שמותקנות ב-iOS וב-iPadOS:

  • יופיעו במסך הבית, בחיפוש של Spotlight, בהצעות של Siri ובחיפוש בספריית האפליקציות.
  • לא יופיעו בתיקיות הקטגוריות של גלריית האפליקציות.
  • אין תמיכה ביכולות כמו תגים וקיצורי דרך של אפליקציות.

דרך אגב, ב-Safari נעשה שימוש בטכנולוגיה מקורית שנקראת Web Clips כדי ליצור את סמלי ה-PWA במערכת ההפעלה. אלו רק קובצי XML בפורמט רשימת הנכסים של Apple ששמורים במערכת הקבצים.

התקנה של Android

ב-Android, הודעות ההתקנה של PWA משתנות בהתאם למכשיר ולדפדפן. המשתמשים עשויים לראות:

  • וריאציות בניסוח של האפשרות בתפריט להתקנה, כמו התקנה או הוספה למסך הבית.
  • תיבות דו-שיח מפורטות להתקנה.

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

סרגל מידע קטן ותיבות דו-שיח להתקנה ב-Android.

בהתאם למכשיר ולדפדפן, ה-PWA תותקן כ-WebAPK, כקיצור דרך או כ-QuickApp.

WebAPKs

חבילת WebAPK היא חבילת Android (APK) שנוצרה על ידי ספק מהימן של המכשיר של המשתמש, בדרך כלל בענן, בשרת עיבוד נתונים של WebAPK. Google Chrome משתמש בשיטה הזו במכשירים שבהם מותקן Google Mobile Services (GMS) ובדפדפן האינטרנט של Samsung, אבל רק במכשירים מתוצרת Samsung, כמו טלפון או טאבלט מדגמי Galaxy. השילוב הזה מהווה את רוב משתמשי Android.

כשמשתמש מתקין PWA מ-Google Chrome ונעשה שימוש ב-WebAPK, שרת המטבעות 'mints' (חבילות) וחותם על APK ל-PWA. התהליך הזה לוקח זמן, אבל כשה-APK מוכן, הדפדפן יתקין את האפליקציה במצב שקט במכשיר של המשתמש. מאחר שספקים מהימנים (Play Services או Samsung) חתמו על ה-APK, הטלפון מתקין אותו בלי להשבית את האבטחה, כמו בכל אפליקציה שמקורה בחנות. אין צורך בהתקנה ממקור לא ידוע של האפליקציה.

אפליקציות PWA שהותקנו דרך WebAPK:

קיצורי דרך

חבילות WebAPK מספקות את החוויה הטובה ביותר למשתמשי Android, אבל לא תמיד אפשר ליצור אותן. במקרים שבהם אין אפשרות כזו, הדפדפנים חוזרים ליצור קיצור דרך לאתר. מאחר שבחיבורי האינטרנט של Firefox, Microsoft Edge, Opera, Brave ו-Samsung (במכשירים שאינם של Samsung) אין שרתי הטמעה מהימנים, הם ייצרו קיצורי דרך. גם Google Chrome יעשה זאת אם שירות ההנפקה לא זמין או אם ה-PWA לא עומד בדרישות ההתקנה.

אפליקציות PWA שהותקנו עם קיצורי דרך:

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

אפליקציית PWA שמותקנת באמצעות דפדפנים שונים באותו מכשיר.

QuickApps

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

כשה-PWA מותקן כאפליקציית QuickApp, המשתמשים ייהנו מחוויה דומה לזו שהייתה להם עם קיצורי הדרך, אבל עם סמל עם תג של הסמל של QuickApps (תמונה של ברק). האפליקציה תהיה זמינה גם להפעלה מ-QuickApp Center.

אפליקציות מהירות במסך הבית של Huawei או ZTE.

הצגת בקשה להתקנה

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

קטלוגים של אפליקציות וחנויות

תוכלו לפרסם את ה-PWA גם בקטלוגים של אפליקציות ובחנויות, כדי להגדיל את פוטנציאל החשיפה ולאפשר למשתמשים למצוא אותה באותו מקום שבו הם מוצאים אפליקציות אחרות. רוב הקטלוגים של האפליקציות והחנויות תומכות בטכנולוגיות שמאפשרות לפרסם חבילה שלא כוללת את אפליקציית האינטרנט כולה (כמו ה-HTML והנכסים). הטכנולוגיות האלה מאפשרות ליצור רק מרכז אפליקציות למנוע רינדור אינטרנט עצמאי שיטען את האפליקציה ויאפשר ל-Service Worker לשמור במטמון את הנכסים הנחוצים.

הקטלוגים והחנויות של האפליקציות שתומכים בפרסום PWA הם:

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

משאבים