השיטה getInstalledRelatedApps()
מאפשרת לאתר לבדוק אם האפליקציה ל-iOS או ל-Android או למחשב, או ה-PWA מותקנים במכשיר של משתמש.
מהו ה-API של getInstalledSharedApps() ?
getInstalledRelatedApps()
מאפשר לדף שלך לבדוק אם האפליקציה למחשב לנייד או למחשב, או במקרים מסוימים, אם ה-Progressive Web App (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
עם הדומיין. הקפידו לכלול את התווים החסרים.
<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
ומציינים את שם משפחת החבילות של האפליקציה. צריך לשמור את הקובץ הזה בתיקיית השורש של השרת או בספרייה /.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, כפי שמוגדר במסגרת ההיקף במניפסט של אפליקציית האינטרנט.
Android: Chrome 84 ואילך
כאן אפשר לספר ל-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
.
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 מותקן.
כדאי לנסות את ההדגמה
קריאה ל-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.