זיהוי

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

הניווט עובר בין כרטיסייה בדפדפן לחלון PWA.

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

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

ב-Chrome ב-Android מוצגת אפשרות בתפריט לפתיחת ניווט חדש בחלון PWA.

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

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

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

מתבצע זיהוי של ההעברה

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

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 יהיה למשתמש סשן שונה.

תמיכה בדפדפן

  • x
  • 79
  • x
  • x

מקור

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

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

  • chrome_web_store: חנות האינטרנט של Google Chrome.
  • play: אפליקציות ב-Google Play (Android ו-ChromeOS).
  • chromeos_play: הפעלה ב-ChromeOS.
  • webapp: אפליקציות אינטרנט.
  • windows: Microsoft Store (Windows 10 ו-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 כדי להזמין את המשתמשים להתקין את האפליקציה (בקישור שלמעלה) או להעביר את הניווט אם הוא כבר מותקן.

השיטה 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/, לתת הרשאה להיקף האחר, כפי שמתואר במאמר הזה.

משאבים