क्या आपका ऐप्लिकेशन इंस्टॉल किया गया है? getInstalledRelatedApps() आपको इसकी जानकारी देगा!

getInstalledRelatedApps() तरीके की मदद से आपकी वेबसाइट, यह देख सकती है कि उपयोगकर्ता के डिवाइस पर आपका iOS/Android/डेस्कटॉप ऐप्लिकेशन या PWA इंस्टॉल है या नहीं.

पीट लीपेज

get InstalledRelatedApps() API क्या है?

getInstalledRelatedApps() का इस्तेमाल करने वाली वेबसाइट, जो यह पता लगाती है कि उसका Android ऐप्लिकेशन पहले से इंस्टॉल है या नहीं.

getInstalledRelatedApps() की मदद से, आपका पेज यह देख सकता है कि उपयोगकर्ता के डिवाइस पर आपका मोबाइल या डेस्कटॉप ऐप्लिकेशन है या नहीं. कुछ मामलों में, यह भी देखा जा सकता है कि उपयोगकर्ता के डिवाइस पर प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) पहले से इंस्टॉल है या नहीं. साथ ही, उपयोगकर्ता अनुभव को अपनी पसंद के मुताबिक बनाने की सुविधा देता है.

उदाहरण के लिए, अगर आपका ऐप्लिकेशन पहले से इंस्टॉल है:

  • उपयोगकर्ता को प्रॉडक्ट के मार्केटिंग पेज से, सीधे अपने ऐप्लिकेशन पर रीडायरेक्ट करना.
  • डुप्लीकेट सूचनाओं को रोकने के लिए, दूसरे ऐप्लिकेशन में सूचनाओं जैसी कुछ सुविधाओं को एक ही जगह पर उपलब्ध कराना.
  • अगर आपका अन्य ऐप्लिकेशन पहले से इंस्टॉल है, तो अपने PWA को इंस्टॉल करने का प्रमोशन न करें.

getInstalledRelatedApps() एपीआई का इस्तेमाल करने के लिए, आपको ऐप्लिकेशन को अपनी साइट के बारे में बताना होगा. इसके बाद, साइट को ऐप्लिकेशन के बारे में बताना होगा. दोनों के बीच संबंध तय करने के बाद, यह देखा जा सकता है कि ऐप्लिकेशन इंस्टॉल किया गया है या नहीं.

साथ काम करने वाले ऐसे ऐप्लिकेशन टाइप जिन्हें देखा जा सकता है

ऐप्लिकेशन का प्रकार यहां से चेक किया जा सकता है
Android ऐप्लिकेशन सिर्फ़ Android के लिए
Chrome 80 या उसके बाद के वर्शन
Windows (UWP) ऐप्लिकेशन सिर्फ़ Windows के लिए
Chrome 85 या उसके बाद वाला वर्शन
Edge 85 या उसके बाद का वर्शन
प्रोग्रेसिव वेब ऐप्लिकेशन
एक ही स्कोप या अलग स्कोप में इंस्टॉल किया गया. 		सिर्फ़ Android के लिए
Chrome 84 या उसके बाद के वर्शन

यह देखना कि आपका Android ऐप्लिकेशन इंस्टॉल है या नहीं

आपकी वेबसाइट जांच सकती है कि आपका Android ऐप्लिकेशन इंस्टॉल है या नहीं.

इन डिवाइसों पर काम करता है

Android: Chrome 80 या उसके बाद वाला वर्शन

अपने Android ऐप्लिकेशन को अपनी वेबसाइट के बारे में बताना

सबसे पहले, डिजिटल ऐसेट लिंक सिस्टम का इस्तेमाल करके, अपनी वेबसाइट और Android ऐप्लिकेशन के बीच संबंध को समझने के लिए, Android ऐप्लिकेशन को अपडेट करना होगा. इससे यह पक्का होता है कि आपका Android ऐप्लिकेशन इंस्टॉल है या नहीं, सिर्फ़ आपकी वेबसाइट ही इसकी जांच कर सकती है.

अपने Android ऐप्लिकेशन के AndroidManifest.xml में, 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 Store पर पब्लिश करें.

अपनी वेबसाइट को Android ऐप्लिकेशन के बारे में बताना

इसके बाद, अपने पेज पर एक वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़कर अपनी वेबसाइट को अपने Android ऐप्लिकेशन के बारे में बताएं. मेनिफ़ेस्ट में related_applications प्रॉपर्टी शामिल होनी चाहिए, यह एक ऐसा कलेक्शन है जो आपके ऐप्लिकेशन के बारे में जानकारी देता है. इसमें platform और id भी शामिल हैं.

  • platform, play होनी चाहिए
  • id, आपके Android ऐप्लिकेशन के लिए Google Play ऐप्लिकेशन आईडी है
{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

यह देखना कि आपका ऐप्लिकेशन इंस्टॉल किया गया है या नहीं

आखिर में, navigator.getInstalledRelatedApps() को कॉल करके देखें कि आपका Android ऐप्लिकेशन इंस्टॉल हुआ है या नहीं.

डेमो आज़माएं

देखें कि आपका Windows (UWP) ऐप्लिकेशन इंस्टॉल है या नहीं

आपकी वेबसाइट यह जांच कर सकती है कि आपका Windows ऐप्लिकेशन (यूडब्ल्यूपी का इस्तेमाल करके बनाया गया) इंस्टॉल है या नहीं.

इन डिवाइसों पर काम करता है

Windows: Chrome 85 या उसके बाद वाला वर्शन, Edge 85 या उसके बाद का वर्शन

Windows ऐप्लिकेशन को अपनी वेबसाइट के बारे में बताना

यूआरआई हैंडलर का इस्तेमाल करके अपनी वेबसाइट और Windows ऐप्लिकेशन के बीच संबंध तय करने के लिए, आपको अपना Windows ऐप्लिकेशन अपडेट करना होगा. इससे यह पक्का होता है कि आपका Windows ऐप्लिकेशन इंस्टॉल है या नहीं, इसकी जांच सिर्फ़ आपकी वेबसाइट कर सकती है.

अपने ऐप्लिकेशन की मेनिफ़ेस्ट फ़ाइल Package.appxmanifest में, Windows.appUriHandler एक्सटेंशन रजिस्ट्रेशन जोड़ें. उदाहरण के लिए, अगर आपकी वेबसाइट का पता 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>

ध्यान दें, आपको अपने <Package> एट्रिब्यूट में uap3 नेमस्पेस जोड़ना पड़ सकता है.

इसके बाद, windows-app-web-link नाम की एक JSON फ़ाइल (.json फ़ाइल एक्सटेंशन के बिना) बनाएं और अपने ऐप्लिकेशन के पैकेज के फ़ैमिली नाम की जानकारी दें. उस फ़ाइल को अपने सर्वर रूट या /.well-known/ डायरेक्ट्री में रखें. ऐप्लिकेशन मेनिफ़ेस्ट डिज़ाइनर के पैकेजिंग सेक्शन में, पैकेज फ़ैमिली का नाम मिलेगा.

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

यूआरआई हैंडलर को सेट अप करने के बारे में पूरी जानकारी पाने के लिए, ऐप्लिकेशन यूआरआई हैंडलर का इस्तेमाल करने वाली वेबसाइटों के लिए ऐप्लिकेशन चालू करें देखें.

अपनी वेबसाइट को Windows ऐप्लिकेशन के बारे में बताना

इसके बाद, अपने पेज पर वेब ऐप्लिकेशन मेनिफ़ेस्ट जोड़कर, अपनी वेबसाइट को Windows ऐप्लिकेशन के बारे में बताएं. मेनिफ़ेस्ट में related_applications प्रॉपर्टी शामिल होनी चाहिए, यह एक ऐसा कलेक्शन है जो आपके ऐप्लिकेशन के बारे में जानकारी देता है. इसमें platform और id भी शामिल हैं.

  • platform, windows होनी चाहिए
  • id आपके ऐप्लिकेशन के पैकेज फ़ैमिली का नाम है, जो आपकी Package.appxmanifest फ़ाइल में <Application> Id वैल्यू से जुड़ा होता है.
{
  "related_applications": [{
    "platform": "windows",
    "id": "MyApp_9jmtgj1pbbz6e!App",
  }]
}

यह देखना कि आपका ऐप्लिकेशन इंस्टॉल किया गया है या नहीं

आखिर में, navigator.getInstalledRelatedApps() को कॉल करके देखें कि आपका Windows ऐप्लिकेशन इंस्टॉल है या नहीं.

देखें कि आपका प्रोग्रेसिव वेब ऐप्लिकेशन पहले से इंस्टॉल है या नहीं (दायरे में)

आपका 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 इंस्टॉल है या नहीं

आखिर में, अपने PWA के स्कोप से ही navigator.getInstalledRelatedApps() को कॉल करके देखें कि यह इंस्टॉल किया गया है या नहीं. अगर getInstalledRelatedApps() को आपके PWA के दायरे से बाहर कॉल किया जाता है, तो यह 'गलत' दिखेगा. विवरण के लिए अगला अनुभाग देखें.

डेमो आज़माएं

देखें कि आपका प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल है या नहीं (जो दायरे से बाहर है)

आपकी वेबसाइट यह देख सकती है कि आपका PWA इंस्टॉल है या नहीं, भले ही पेज आपके PWA के दायरे के बाहर हो. उदाहरण के लिए, /landing/ से दिखाया गया लैंडिंग पेज यह देख सकता है कि /pwa/ से दिखाया गया PWA इंस्टॉल है या नहीं. इसके अलावा, यह भी देखा जा सकता है कि आपका लैंडिंग पेज www.example.com से दिखाया जाता है या नहीं और PWA को app.example.com से दिखाया जाता है या नहीं.

इन डिवाइसों पर काम करता है

Android: Chrome 84 या उसके बाद वाला वर्शन

अपने PWA को अपनी वेबसाइट के बारे में बताना

सबसे पहले, आपको उस सर्वर पर डिजिटल एसेट लिंक जोड़ने होंगे जहां से आपके PWA को दिखाया जाता है. यह आपकी वेबसाइट और आपके PWA के बीच संबंध को तय करने में मदद करेगा. साथ ही, यह पक्का करेगा कि सिर्फ़ आपकी वेबसाइट यह देख सकती है कि आपका PWA इंस्टॉल है या नहीं.

जिस डोमेन में PWA मौजूद है उसकी /.well-known/ डायरेक्ट्री में assetlinks.json फ़ाइल जोड़ें, जैसे कि 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 इंस्टॉल हुआ है या नहीं.

डेमो आज़माएं

get InstalledRelatedApps() को कॉल किया जा रहा है

navigator.getInstalledRelatedApps() को कॉल करने से, एक प्रॉमिस मिलता है. यह प्रॉमिस, उपयोगकर्ता के डिवाइस पर इंस्टॉल किए गए आपके ऐप्लिकेशन की कैटगरी के हिसाब से तय होता है.

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

साइटों को अपने ऐप्लिकेशन के बहुत बड़े सेट का टेस्ट करने से रोकने के लिए, सिर्फ़ वेब ऐप्लिकेशन मेनिफ़ेस्ट में बताए गए पहले तीन ऐप्लिकेशन को ही ध्यान में रखा जाएगा.

अन्य दमदार वेब एपीआई की तरह, getInstalledRelatedApps() एपीआई भी सिर्फ़ एचटीटीपीएस पर इस्तेमाल किए जाने पर उपलब्ध है.

क्या अब भी आपके कुछ सवाल हैं?

क्या अब भी आपके कुछ सवाल हैं? StackOverflow पर मौजूद getInstalledRelatedApps टैग देखें और देखें कि किसी दूसरे व्यक्ति के पास इससे मिलते-जुलते सवाल तो नहीं हैं. अगर ऐसा नहीं है, तो वहां अपना सवाल पूछें और उसे progressive-web-apps टैग के साथ टैग करना न भूलें. हमारी टीम अक्सर उस टैग पर नज़र रखती है और आपके सवालों के जवाब देने की कोशिश करती है.

सुझाव/राय दें या शिकायत करें

क्या आपको Chrome को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने का तरीका खास जानकारी से अलग है?

  • https://new.crbug.com पर जाकर गड़बड़ी की शिकायत करें. ज़्यादा से ज़्यादा जानकारी दें, गड़बड़ी को ठीक करने के लिए आसान निर्देश दें, और कॉम्पोनेंट बॉक्स में Mobile>WebAPKs डालें. Glitch की मदद से, तेज़ी से और आसानी से तैयार किए गए तरीकों को शेयर किया जा सकता है.

एपीआई के साथ काम करता है

क्या आपको getInstalledRelatedApps() API का इस्तेमाल करना है? आपकी सार्वजनिक सहायता से, Chrome टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, अन्य ब्राउज़र वेंडर को पता चलता है कि उनकी मदद करना कितना ज़रूरी है.

  • WICG चर्चा थ्रेड पर बताएं कि आपको एपीआई का इस्तेमाल कैसे करना है.
  • हैशटैग #getInstalledRelatedApps इस्तेमाल करके @ChromiumDev को एक ट्वीट भेजें और हमें बताएं कि उसका इस्तेमाल कहां और कैसे किया जा रहा है.

मददगार लिंक

धन्यवाद

Windows ऐप्लिकेशन की टेस्टिंग में मदद करने के लिए, Microsoft के संगुक चुए को और Chrome की जानकारी से जुड़ी मदद पाने के लिए, रायन कांसो को खास धन्यवाद.