זיהוי

אפשר לזהות אם המשתמש משתמש ב-PWA בדפדפן או במצב עצמאי. בדפדפנים המבוססים על Chromium (Android ומחשב) אפשר גם לזהות את האירועים הבאים:

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

אפשר להשתמש בנתונים האלה לניתוח נתונים, להבין את העדפות המשתמשים ולהתאים אישית את חוויית השימוש. כדי לתעד את האירועים האלה, אפשר להשתמש בכלים כמו שאילתות מדיה, אירועים מ-window או באמצעות ממשקי ה-API עם היכולות שזמינים שמפורטים כאן.

זיהוי מצב התצוגה

כדי לעקוב אחרי האופן שבו המשתמשים מפעילים את PWA, אפשר להשתמש ב-matchMedia() כדי לבדוק את שאילתת המדיה display-mode.

window.addEventListener('DOMContentLoaded', () => {
  let displayMode = 'browser tab';
  if (window.matchMedia('(display-mode: standalone)').matches) {
    displayMode = 'standalone';
  }
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', displayMode);
});

אם משתמשים בדוגמה הזו, חשוב להתאים את מצב התצוגה מהמניפסט של אפליקציית האינטרנט, לדוגמה: standalone, minimal-ui או fullscreen. אפשר גם להתאים מספר שאילתות במחרוזת שאילתת המדיה באמצעות תנאים מופרדים בפסיקים.

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

התקנת האפליקציה

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

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

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

פרק הנחיית ההתקנה מסביר איך לזהות אם בקשת ההתקנה זמינה ואיזו בחירה המשתמש בוחר.

העברת סשנים

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

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

בתמונה הבאה אפשר לראות את האפשרות בתפריט ב-Android כשהאפליקציה כבר מותקנת.

העברה לאחר ההתקנה

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

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

איתור ההעברה

כדי לזהות את ההעברה בין הדפדפן והחלון, אפשר להשתמש בשאילתת מדיה:

window.addEventListener('DOMContentLoaded', () => {
  // replace standalone with your display used in manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', (evt) => {
      let displayMode = 'browser';
      if (evt.matches) {
        displayMode = 'standalone';
      }
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', displayMode);
    });
});

בידוד האחסון של iOS ו-iPadOS

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

אפליקציות קשורות

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

ערכי הפלטפורמה האפשריים:

• chrome_web_store: חנות האינטרנט של Google Chrome.
• play: אפליקציות מ-Google Play (Android ו-ChromeOS).
• chromeos_play: ChromeOS Play.
• webapp: אפליקציות אינטרנט.
• windows: Microsoft Store (Windows 10 ו-Windows 11).
• f-droid: F-droid.
• amazon: Amazon AppStore (FireOS).

יש לי העדפה לאפליקציה קשורה

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

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

{
  ...
  "related_applications:" [
     {
       "platform": "play",
       "url": "https://play.google.com/..."
     }
  ],
  "prefer_related_applications": true
}

מודעות באנר לאפליקציות חכמות של Apple

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

מתבצע זיהוי של אפליקציות מותקנות קשורות

ה-method getInstalledRelatedApps() מאפשרת לאתר לבדוק אם האפליקציה ל-iOS או ל-Android/למחשב או ל-PWA מותקנת במכשיר של המשתמש.

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

באמצעות כלים כמו BubbleWrap או PWA Builder, שמאפשרים לפרסם את ה-PWA בחנויות אפליקציות, כבר מוסיפים את המטא-נתונים הנדרשים כדי שאפשר יהיה להשתמש ב-getInstalledRelatedApps() באתר באופן מיידי. כדי לזהות אם כבר מותקנת אפליקציית PWA באמצעות getInstalledRelatedApps(), צריך להגדיר את webapp בשדה המניפסט related_applications עם כתובת ה-URL של המניפסט:

...
"related_applications": [{
   "platform": "webapp",
   "url": "https://example.com/manifest.json",
}],
...

getInstalledRelatedApps() מחזירה מערך של אובייקטים של האפליקציה. אם המערך ריק, האפליקציה הקשורה לא מותקנת.

const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;

זיהוי התקנה מחוץ להיקף ה-PWA

ב-Chrome ב-Android 89, אפשר לזהות אם PWA מותקנת, גם מחוץ להיקף ההרשאות של ה-PWA. אפליקציית ה-PWA חייבת להגדיר קובץ JSON בתיקייה /.well-known/, וכך לתת הרשאה להיקף האחר, כמו שמתואר במאמר הזה.

משאבים

• האם האפליקציה שלכם מותקנת? אפשר לקבל מידע לגבי getInstalledrelatedApps() !
• MDN: אפליקציות קשורות
• MDN: אירוע מסוג AppInstalled
• Apple: קידום אפליקציות באמצעות מודעות באנר חכמות לקידום אפליקציות