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

Pete LePage

Alexey Rodionov

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

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

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

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

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

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 ऐप्लिकेशन का वर्शन नंबर पाने के लिए, इस एक लाइन के कोड का इस्तेमाल किया जा सकता है:

const installedRelatedAndroidAppVersion = (await navigator.getInstalledRelatedApps?.())?.find(app => app.id === 'com.example.twa')?.version;

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

देखें कि आपका 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>

अपडेट पूरा होने के बाद, अपडेट किए गए ऐप्लिकेशन को डिवाइस पर इंस्टॉल करें. इसके अलावा, इसे 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 के लिए: 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 या इसके बाद का वर्शन
• डेस्कटॉप (Windows, macOS, Linux, ChromeOS): Chrome 140 या इसके बाद का वर्शन, Edge 140 या इसके बाद का वर्शन

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

अपने PWA के बारे में जानकारी देने के लिए, PWA के वेब ऐप्लिकेशन मेनिफ़ेस्ट में 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"
  }],
  …
}

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

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

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

आपकी वेबसाइट यह पता लगा सकती है कि आपका 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 आपके पीडब्ल्यूए के वेब ऐप्लिकेशन मेनिफ़ेस्ट का पूरा पाथ है

{
  "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 डालें.

काम के लिंक

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

धन्यवाद

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