क्या आपका ऐप्लिकेशन इंस्टॉल है? 'इंस्टॉल किए गए मिलते-जुलते ऐप्लिकेशन का डेटा पाने वाला एपीआई' आपको इस बारे में जानकारी देगा!

Pete LePage

Alexey Rodionov

Get Installed Related Apps API (एपीआई) की मदद से, इंस्टॉल किए गए संबंधित ऐप्लिकेशन की सूची और उनके बारे में जानकारी पाई जा सकती है.

इसकी मदद से, यह देखा जा सकता है कि मौजूदा डिवाइस पर आपका प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए), Android ऐप्लिकेशन या Universal Windows Platform (यूडब्ल्यूपी) ऐप्लिकेशन इंस्टॉल है या नहीं. यह जानकारी, पीडब्ल्यूए और उससे जुड़े वेब पेज (जैसे, प्रॉडक्ट मार्केटिंग वेबसाइट) दोनों से देखी जा सकती है.

अगर ऐप्लिकेशन पहले से इंस्टॉल है, तो उपयोगकर्ता अनुभव को पसंद के मुताबिक बनाया जा सकता है.

उदाहरण के लिए:

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

Get Installed Related Apps API (एपीआई) क्या है?

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

• मौजूदा डिवाइस पर इंस्टॉल किए गए ऐप्लिकेशन,
• वेब ऐप्लिकेशन मेनिफ़ेस्ट के related_applications फ़ील्ड में तय किए गए ऐप्लिकेशन,
• ऐसे पेज के साथ पुष्टि किया गया रिश्ता रखने वाले ऐप्लिकेशन जहां navigator.getInstalledRelatedApps() तरीके को कॉल किया गया है. ज़्यादा जानकारी के लिए, अगला सेक्शन देखें.

const installedRelatedApps = await navigator.getInstalledRelatedApps?.();

console.log(installedRelatedApps) को कॉल करने पर, इस तरह का आउटपुट मिलता है:

[
  {
    platform: "webapp",
    id: "https://example.com/?utm_source=home_screen",
    url: "https://example.com/manifest.json"
  },
  {
    platform: "play",
    id: "com.example.twa",
    url: "https://play.google.com/store/apps/details?id=com.example.twa",
    version: "0.1.0"
  }
]

उदाहरण के लिए, यह देखने के लिए कि उपयोगकर्ता के डिवाइस पर कोई संबंधित ऐप्लिकेशन इंस्टॉल है या नहीं, इस एक लाइन के कोड का इस्तेमाल किया जा सकता है:

const hasInstalledRelatedApps = !!(await navigator.getInstalledRelatedApps?.())?.length;

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

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

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

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

इन प्लैटफ़ॉर्म पर उपलब्ध है:

• सिर्फ़ Android: Chrome 80 या इसके बाद वाले वर्शन

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

सबसे पहले, आपको अपने Android ऐप्लिकेशन को अपडेट करना होगा. इसके लिए, Digital Asset Links सिस्टम का इस्तेमाल करके, अपनी वेबसाइट और 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 ऐप्लिकेशन और एक से ज़्यादा वेबसाइटों के बीच पुष्टि किया गया रिश्ता तय करने का विकल्प है.

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

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

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

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

{
  ...
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.twa"
    }
  ]
  ...
}

अहम जानकारी: यह एक कलेक्शन है. इसका मतलब है कि आपके पास अपनी वेबसाइट और एक से ज़्यादा Android ऐप्लिकेशन के बीच पुष्टि किया गया रिश्ता तय करने का विकल्प है.

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

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

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

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

इन प्लैटफ़ॉर्म पर उपलब्ध है:

• सिर्फ़ Windows: Chrome 85 या इसके बाद वाले वर्शन, Edge 85 या इसके बाद वाले वर्शन

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

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

अपने ऐप्लिकेशन की मेनिफ़ेस्ट फ़ाइल AppxManifest.xml या 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 नेमस्पेस जोड़ना पड़ सकता है.

अगर आपकी वेबसाइट के एक से ज़्यादा पते हैं, तो हर पते के लिए <uap3:AppUriHandler> के अंदर एक अलग <uap3:Host Name=... /> एंट्री जोड़ें.

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

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

अहम जानकारी: यह एक कलेक्शन है. इसका मतलब है कि आपके पास अपनी वेबसाइट और एक से ज़्यादा Windows ऐप्लिकेशन के बीच पुष्टि किया गया रिश्ता तय करने का विकल्प है.

पैकेज फ़ैमिली नेम पता करने के लिए, ऐप्लिकेशन इंस्टॉल करें. इसके बाद, PowerShell में यह कमांड चलाएं और सूची में अपना ऐप्लिकेशन ढूंढें:

Get-AppxPackage | Select-Object PackageFamilyName

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

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

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

• platform की वैल्यू windows होनी चाहिए
• id की वैल्यू, आपके ऐप्लिकेशन का पैकेज फ़ैमिली नेम होती है. इसके आखिर में !App सफ़िक्स के तौर पर जोड़ा जाता है

{
  ...
  "related_applications": [
    {
      "platform": "windows",
      "id": "MyApp_9jmtgj1pbbz6e!App"
    }
  ]
  ...
}

अहम जानकारी: यह एक कलेक्शन है. इसका मतलब है कि आपके पास अपनी वेबसाइट और एक से ज़्यादा Windows ऐप्लिकेशन के बीच पुष्टि किया गया रिश्ता तय करने का विकल्प है.

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

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

यह डेमो देखें.

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

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

इन प्लैटफ़ॉर्म पर उपलब्ध है:

• Android: Chrome 84 या इसके बाद वाले वर्शन
• डेस्कटॉप (Windows, macOS, Linux, ChromeOS): Chrome 140 या इसके बाद वाले वर्शन, Edge 140 या इसके बाद वाले वर्शन

अपने पीडब्ल्यूए को उसके बारे में बताना

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

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

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

यह देखना कि आपका पीडब्ल्यूए इंस्टॉल है या नहीं

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

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

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

इन प्लैटफ़ॉर्म पर उपलब्ध है:

• सिर्फ़ Android: Chrome 84 या इसके बाद वाले वर्शन

अपने पीडब्ल्यूए को अपनी वेबसाइट के बारे में बताना

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

उस डोमेन की /.well-known/ डायरेक्ट्री में assetlinks.json फ़ाइल जोड़ें जहां पीडब्ल्यूए मौजूद है. उदाहरण के लिए, app.example.com. site प्रॉपर्टी में, उस वेब ऐप्लिकेशन मेनिफ़ेस्ट का पूरा पाथ डालें जो जांच करेगा. इसमें आपके पीडब्ल्यूए का वेब ऐप्लिकेशन मेनिफ़ेस्ट शामिल नहीं होना चाहिए.

// 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"
    }
  }
]

अहम जानकारी: यह एक कलेक्शन है. इसका मतलब है कि आपके पास अपने पीडब्ल्यूए और एक से ज़्यादा वेबसाइटों के बीच पुष्टि किया गया रिश्ता तय करने का विकल्प है.

अपनी वेबसाइट को अपने पीडब्ल्यूए के बारे में बताना

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

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

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

अहम जानकारी: यह एक कलेक्शन है. इसका मतलब है कि आपके पास अपनी वेबसाइट और एक से ज़्यादा पीडब्ल्यूए के बीच पुष्टि किया गया रिश्ता तय करने का विकल्प है.

यह देखना कि आपका पीडब्ल्यूए इंस्टॉल है या नहीं

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

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

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

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

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

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

काम के लिंक

• Get Installed Related Apps API (एपीआई) के बारे में सार्वजनिक जानकारी
• खास जानकारी का ड्राफ़्ट
• गड़बड़ी को ट्रैक करना
• ChromeStatus.com पर एंट्री
• Blink कॉम्पोनेंट: Mobile>WebAPKs

धन्यवाद

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