זיהוי

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

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

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

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

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

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

window.addEventListener('DOMContentLoaded', () => {
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', getPWADisplayMode());
});

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

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

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

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

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

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

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

בפרק Installation Prompt מוסבר איך לזהות אם הודעת ההתקנה זמינה ואילו אפשרויות הבחירה מוצגות למשתמש.

אזהרה: האירוע appinstalled זמין רק בדפדפנים מבוססי Chromium, והוא חלק מתוכנית אינקובטור למפרט המניפסט

העברת סשנים

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

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

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

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

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

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

איתור ההעברה

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

window.addEventListener('DOMContentLoaded', () => {
  // Replace "standalone" with the display mode used in your manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', () => {
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
    });
});

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

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

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

תמיכה בדפדפנים

• x
• x
• x
• x

מקור

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

הערה: השימוש ב-prefer_related_applications: true עם אפליקציה מועדפת של webapp בלבד לא משפיע על אופן ההצעה וההתקנה של ה-PWA.

מודעות באנר חכמות של אפליקציות של 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: קידום אפליקציות באמצעות מודעות באנר חכמות לאפליקציות