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

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

Pete LePage

Alexey Rodionov

getInstalledRelatedApps() एपीआई क्या है?

getInstalledRelatedApps() मेथड, इंस्टॉल किए गए मिलते-जुलते ऐप्लिकेशन की सूची दिखाता है.

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

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

इस कुकी की मदद से, आपका पेज यह पता लगा सकता है कि आपका Android ऐप्लिकेशन, Universal Windows Platform (UWP) ऐप्लिकेशन या Progressive Web App (PWA) पहले से ही किसी उपयोगकर्ता के डिवाइस पर इंस्टॉल है या नहीं. अगर इंस्टॉल है, तो यह कुकी आपको उपयोगकर्ता अनुभव को पसंद के मुताबिक बनाने की सुविधा देती है.

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

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

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

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

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

अपने 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>

अपडेट करने के बाद, डिवाइस पर अपडेट किया गया ऐप्लिकेशन इंस्टॉल करें या उसे Google Play Store या Android ऐप्लिकेशन डिस्ट्रिब्यूशन के किसी अन्य प्लैटफ़ॉर्म पर पब्लिश करें.

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

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

• platform की वैल्यू play होनी चाहिए
• id Android पैकेज आईडी है

{
  "related_applications": [{
    "platform": "play",
    "id": "com.android.chrome",
  }]
}

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

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

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

आपकी वेबसाइट यह देख सकती है कि UWP का इस्तेमाल करके बनाया गया Windows ऐप्लिकेशन इंस्टॉल है या नहीं.

अपने 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 के स्कोप में होना चाहिए. यह स्कोप, वेब ऐप्लिकेशन मेनिफ़ेस्ट में तय किया जाता है.

अपने PWA के बारे में जानकारी देना

अपने पीडब्ल्यूए के बारे में जानकारी देने के लिए, पीडब्ल्यूए के वेब ऐप्लिकेशन मेनिफ़ेस्ट में related_applications एंट्री जोड़ें.

• platform की वैल्यू webapp होनी चाहिए
• url आपके पीडब्ल्यूए के वेब ऐप्लिकेशन मेनिफ़ेस्ट का पाथ है. यह पाथ, रिलेटिव पाथ भी हो सकता है
• id वेब ऐप्लिकेशन का पूरा पाथ है. यह डेस्कटॉप के लिए ज़रूरी है, लेकिन Android के लिए ज़रूरी नहीं है

{
  …
  "scope": "/",
  "start_url": "/",
  "related_applications": [{
    "platform": "webapp",
    "url": "/manifest.json",
    "id": "https://example.com"
  }],
  …
}

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

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

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

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

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

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

उस डोमेन की /.well-known/ डायरेक्ट्री में assetlinks.json फ़ाइल जोड़ें जहां 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 के बारे में बताना

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

• platform की वैल्यू webapp होनी चाहिए
• url आपके पीडब्ल्यूए के वेब ऐप्लिकेशन मेनिफ़ेस्ट का पूरा पाथ है

{
  "related_applications": [{
    "platform": "webapp",
    "url": "https://app.example.com/manifest.json",
  }]
}

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

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

क्या आपको अब भी कुछ पूछना है?

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

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

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

• https://new.crbug.com पर जाकर, गड़बड़ी की रिपोर्ट करें. इसमें ज़्यादा से ज़्यादा जानकारी शामिल करें. साथ ही, गड़बड़ी को दोहराने के लिए निर्देश दें. इसके अलावा, कॉम्पोनेंट बॉक्स में Mobile>WebAPKs डालें.

एपीआई के लिए सहायता दिखाना

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

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

मददगार लिंक

• getInstalledRelatedApps() एपीआई के बारे में सार्वजनिक तौर पर उपलब्ध जानकारी
• ड्राफ़्ट स्पेसिफ़िकेशन
• ट्रैकिंग बग
• ChromeStatus.com एंट्री
• Blink कॉम्पोनेंट: Mobile>WebAPKs

धन्यवाद

Windows ऐप्लिकेशन की टेस्टिंग से जुड़ी जानकारी देने के लिए, Microsoft के Sunggook Chue का खास तौर पर धन्यवाद. साथ ही, Chrome से जुड़ी जानकारी देने के लिए Rayan Kanso का धन्यवाद.