האם האפליקציה שלך מותקנת? תקבל הודעה מ-getInstalledRelatedApps() !

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

Pete LePage

מהו ה-API getInstalled relatedApps() ?

אתר שמשתמש ב-getInstalledRelatedApps() כדי לקבוע אם האפליקציה ל-Android כבר מותקנת.

getInstalledRelatedApps() מאפשר לדף שלך יש לבדוק אם שלכם באפליקציה לנייד או למחשב, או במקרים מסוימים אם אפליקציית האינטרנט (PWA) כבר מותקנת במכשיר של המשתמש, ומאפשרת לכם: להתאים אישית את חוויית המשתמש, אם כך.

לדוגמה, אם האפליקציה שלכם כבר מותקנת:

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

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

סוגים נתמכים של אפליקציות שאפשר לבדוק

סוג האפליקציה ניתן לבדוק מ-
באפליקציה ל-Android Android בלבד
Chrome 80 ואילך
אפליקציית Windows (UWP) Windows בלבד
Chrome 85 ואילך
Edge מגרסה 85 ואילך
Progressive Web App
מותקנות באותו היקף או היקף שונה. 		Android בלבד
Chrome 84 ואילך

איך בודקים אם האפליקציה ל-Android מותקנת

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

נתמך ב:

Android: Chrome 80 ואילך

איך לספר לאפליקציה ל-Android על האתר

קודם כול צריך לעדכן את האפליקציה ל-Android כדי להגדיר את הקשר בין האתר שלכם לבין אפליקציית Android באמצעות מערכת Digital Asset Links כך אפשר להבטיח שרק האתר יכול לבדוק אם האפליקציה ל-Android מותקנת.

בAndroidManifest.xml של האפליקציה ל-Android, צריך להוסיף asset_statements ערך:

<manifest>
  <application>
   …
    <meta-data android:name="asset_statements" android:resource="@string/asset_statements" />
   …
  </application>
</manifest>

לאחר מכן, ב-strings.xml, מוסיפים את דוח הנכסים הבא, ומעדכנים את site עם הדומיין שלך. חשוב לכלול את תווי בריחה (escape).

<string name="asset_statements">
  [{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
      \"namespace\": \"web\",
      \"site\": \"https://example.com\"
    }
  }]
</string>

בסיום התהליך, מפרסמים את האפליקציה המעודכנת ל-Android בחנות Play.

איך לספר לאתר על האפליקציה ל-Android

בשלב הבא, צריך לספר לאתר על האפליקציה ל-Android באמצעות הוספת מניפסט של אפליקציית אינטרנט לדף. על המניפסט כוללים את המאפיין related_applications, מערך שמספק את הפרטים על האפליקציה שלך, כולל platform ו-id.

  • platform חייב להיות play
  • id הוא מזהה האפליקציה של Google Play לאפליקציה ל-Android
{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

בודקים אם האפליקציה מותקנת

לסיום, צריך להתקשר אל navigator.getInstalledRelatedApps() כדי לבדוק אם אפליקציה ל-Android מותקנת.

כדאי לנסות את ההדגמה

בדיקה אם אפליקציית Windows (UWP) מותקנת

האתר יכול לבדוק אם האפליקציה שלכם ל-Windows (שנוצרה באמצעות UWP) מותקנת.

נתמך ב:

Windows: Chrome 85 ואילך, Edge בגרסה 85 ואילך

איך שולחים לאפליקציית Windows מידע על האתר שלכם

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

יש להוסיף את רישום התוסף Windows.appUriHandler למניפסט של האפליקציה קובץ Package.appxmanifest. לדוגמה, אם כתובת האתר שלך היא example.com צריך להוסיף את הרשומה הבאה למניפסט של האפליקציה:

<Applications>
  <Application Id="App" ... >
      ...
      <Extensions>
         <uap3:Extension Category="windows.appUriHandler">
          <uap3:AppUriHandler>
            <uap3:Host Name="example.com" />
          </uap3:AppUriHandler>
        </uap3:Extension>
      </Extensions>
  </Application>
</Applications>

לתשומת ליבך, יכול להיות שיהיה עליך להוסיף את מרחב השמות uap3 אל מאפיין <Package>.

לאחר מכן, יוצרים קובץ JSON (ללא סיומת הקובץ .json) בשם windows-app-web-link ולציין את שם משפחת החבילה של האפליקציה. מקום את הקובץ הזה ברמה הבסיסית (root) של השרת או בספרייה /.well-known/. שלך שם המשפחה של החבילה מופיע בקטע 'אריזה' בקובץ המניפסט של האפליקציה מעצב אומנותי.

[{
  "packageFamilyName": "MyApp_9jmtgj1pbbz6e",
  "paths": [ "*" ]
}]

עבור אל הפעלת אפליקציות לאתרים המשתמשים ב-URI של אפליקציות את הפרטים המלאים על הגדרת handlers של URI.

איך לעדכן את האתר על האפליקציה ל-Windows

בשלב הבא, מעדכנים את האתר על האפליקציה ל-Windows באמצעות הוספת מניפסט של אפליקציית אינטרנט לדף. על המניפסט כוללים את המאפיין related_applications, מערך שמספק את הפרטים על האפליקציה שלך, כולל platform ו-id.

  • platform חייב להיות windows
  • id הוא שם המשפחה של חבילת האפליקציה שלך, שמצורף אליו <Application> Id בקובץ Package.appxmanifest.
{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App",
  }]
}

בודקים אם האפליקציה מותקנת

לסיום, צריך להתקשר אל navigator.getInstalledRelatedApps() כדי לבדוק אם האפליקציה של Windows מותקנת.

בדיקה אם Progressive Web App כבר מותקנת (בהיקף)

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

נתמך ב:

Android: Chrome 84 ואילך

איך לספר לאפליקציית ה-PWA את עצמה

אפשר לספר לאפליקציית ה-PWA על עצמה באמצעות הוספה של רשומת related_applications מניפסט של אפליקציית אינטרנט ל-PWA.

  • platform חייב להיות webapp
  • url הוא הנתיב המלא לקובץ המניפסט של אפליקציית האינטרנט של ה-PWA
{
  …
  "scope": "/",
  "start_url": "/",
  "related_applications": [{
    "platform": "webapp",
    "url": "https://example.com/manifest.json",
  }],
  …
}

איך בודקים אם ה-PWA מותקנת

לסיום, קוראים אל navigator.getInstalledRelatedApps() מתוך היקף ה-PWA כדי לבדוק אם היא מותקנת. אם המיקום הקריאה אל getInstalledRelatedApps() מחוץ להיקף ה-PWA, היא הפונקציה מחזירה False. למידע נוסף, עיין בקטע הבא.

כדאי לנסות את ההדגמה

בדיקה אם Progressive Web App מותקנת (לא במסגרת ההיקף)

האתר שלכם יכול לבדוק אם ה-PWA מותקנת, גם אם הדף מחוץ ל- היקף ה-PWA. לדוגמה, דף הנחיתה שמוצג מתוך /landing/ יכול לבדוק אם ה-PWA שמוצגת דרך /pwa/ מותקנת, או אם דף הנחיתה מוצג מ-www.example.com וה-PWA מוצגת מ app.example.com

נתמך ב:

Android: Chrome 84 ואילך

איך לספר ל-PWA על האתר

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

מוסיפים קובץ assetlinks.json לספרייה /.well-known/ של הדומיין שבו נמצאת ה-PWA, לדוגמה app.example.com. בתוך site לנכס, לספק את הנתיב המלא לקובץ המניפסט של אפליקציית האינטרנט שיניב הבדיקה (לא קובץ המניפסט של אפליקציית האינטרנט של ה-PWA).

// Served from https://app.example.com/.well-known/assetlinks.json
[
  {
    "relation": ["delegate_permission/common.query_webapk"],
    "target": {
      "namespace": "web",
      "site": "https://www.example.com/manifest.json"
    }
  }
]

איך לספר לאתר על PWA

בשלב הבא צריך לספר לאתר על אפליקציית ה-PWA: הוספת מניפסט של אפליקציית אינטרנט לדף. על המניפסט כוללים את המאפיין related_applications, מערך שמספק את הפרטים של ה-PWA, כולל platform ו-url.

  • platform חייב להיות webapp
  • url הוא הנתיב המלא לקובץ המניפסט של אפליקציית האינטרנט של ה-PWA
{
  "related_applications": [{
    "platform": "webapp",
    "url": "https://app.example.com/manifest.json",
  }]
}

איך בודקים אם ה-PWA מותקנת

לסיום, צריך להתקשר אל navigator.getInstalledRelatedApps() כדי לבדוק אם PWA מותקנת.

כדאי לנסות את ההדגמה

קריאה ל-getInstalledRelatedApps()

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

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

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

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

עדיין יש לכם שאלות?

עדיין יש לכם שאלות? בודקים את התג getInstalledRelatedApps ב-StackOverflow כדי לבדוק אם לעוד מישהו יש שאלות דומות. אם לא, צריך לשאול את שאלה שם, ולהקפיד לתייג אותה progressive-web-apps. הצוות שלנו עוקב בקביעות ומנסה לענות על השאלות שלכם.

משוב

מצאת באג בהטמעה של Chrome? או שההטמעה שונה מהמפרט?

  • דווחו על באג בכתובת https://new.crbug.com. כלול כמה שיותר לפרט ככל האפשר, לספק הוראות פשוטות לשחזור הבאג, מזינים Mobile>WebAPKs בתיבה רכיבים. תקלה הוא מעולה לשיתוף תגובות מהירות וקלות.

הצגת תמיכה ב-API

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

קישורים שימושיים

תודה

תודה מיוחדת ל-Sunggok Chue ב-Microsoft על העזרה בפרטים לבדיקת אפליקציות Windows, ו-Rayan Kanso לקבלת עזרה עם הפרטים ב-Chrome.