השיטה getInstalledRelatedApps()
מאפשרת לאתר שלך לבדוק אם
אפליקציה ל-iOS/Android/למחשב או ל-PWA מותקנות במכשיר של משתמש.
מהו ה-API getInstalled relatedApps() ?
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 לתעדף תכונות ולהציג
לספקי דפדפנים עד כמה זה קריטי לתמוך בהם.
- תוכלו לשתף את האופן שבו אתם מתכננים להשתמש ב-API בשרשור השיחה של WICG.
- שליחת ציוץ אל @ChromiumDev בעזרת hashtag
#getInstalledRelatedApps
וספר לנו איפה אתה משתמש בו ובאיזה אופן.
קישורים שימושיים
- הודעת הסבר ציבורית לגבי
getInstalledRelatedApps()
API - טיוטת מפרט
- באג במעקב
- רשומה של ChromeStatus.com
- רכיב Blink:
Mobile>WebAPKs
תודה
תודה מיוחדת ל-Sunggok Chue ב-Microsoft על העזרה בפרטים לבדיקת אפליקציות Windows, ו-Rayan Kanso לקבלת עזרה עם הפרטים ב-Chrome.