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

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

פיט לה פייג'

מהו ה-API של getInstalledSharedApps() ?

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

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

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

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

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

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

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

הוספת מידע לאפליקציה ל-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 עם הדומיין. הקפידו לכלול את התווים החסרים.

<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 על האתר

תצטרכו לעדכן את האפליקציה ל-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 ומציינים את שם משפחת החבילות של האפליקציה. צריך לשמור את הקובץ הזה בתיקיית השורש של השרת או בספרייה /.well-known/. שם משפחת החבילות מופיע בקטע PackPackage (אריזה) בתכנון של קובץ המניפסט של האפליקציה.

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

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

כאן אפשר לספר ל-PWA על עצמה

מוסיפים את רשומת related_applications למניפסט של אפליקציית האינטרנט של PWA, צריכים לספר ל-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.

כאן אפשר לספר ל-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 מותקן.

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

קריאה ל-getInstalled relatedApps()

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

• נשמח לדעת איך בכוונתך להשתמש ב-API בשרשור של WICG Discourse.
• שלח ציוץ אל @ChromiumDev באמצעות ה-hashtag #getInstalledRelatedApps וספר לנו איפה אתם משתמשים בו ואיך אתם משתמשים בו.

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

• הודעת הסבר ציבורית בנושא getInstalledRelatedApps() API
• טיוטת המפרט
• באג במעקב
• רשומת ChromeStatus.com
• רכיב הבהוב: Mobile>WebAPKs

תודה

תודה מיוחדת ל-Sungg השתמש בצ'ו ב-Microsoft ועזרה בפרטים לבדיקת אפליקציות של Windows, ולראיין קנסו על העזרה בפרטים לגבי Chrome.