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

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

Pete LePage

getInstalledRelatedApps() API क्या है?

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

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

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

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

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

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

अपडेट होने के बाद, Play Store पर अपना अपडेट किया गया Android ऐप्लिकेशन पब्लिश करें.

अपनी वेबसाइट को अपने 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 ऐप्लिकेशन (UWP का इस्तेमाल करके बनाया गया) इंस्टॉल है या नहीं.

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

आपके ऐप्लिकेशन के बीच संबंध तय करने के लिए, आपको Windows ऐप्लिकेशन को अपडेट करना होगा यूआरआई हैंडलर का इस्तेमाल करने वाली वेबसाइट और Windows ऐप्लिकेशन. यह यह पक्का करता है कि सिर्फ़ आपकी वेबसाइट यह देख सके कि आपका 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 और अपने ऐप्लिकेशन के पैकेज का फ़ैमिली नाम दें. जगह वह फ़ाइल या तो आपके सर्वर रूट पर या /.well-known/ डायरेक्ट्री में मौजूद होती है. आपने लोगों तक पहुंचाया मुफ़्त में ऐप्लिकेशन मेनिफ़ेस्ट के पैकेजिंग सेक्शन में जाकर पैकेज फ़ैमिली का नाम देख सकते हैं डिज़ाइनर.

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

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

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

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

• platform की वैल्यू windows होनी चाहिए
• id, आपके ऐप्लिकेशन के पैकेज फ़ैमिली का नाम है, जिसे <Application> Id के साथ जोड़ा गया है मान आपकी Package.appxmanifest फ़ाइल में.

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

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

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

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

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

अपने PWA को उसके बारे में बताएं

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

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

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

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

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

डेमो आज़माएं

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

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

अपने 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 इंस्टॉल हो गया है.

डेमो आज़माएं

getInstalledRelatedApps() को कॉल करना

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

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

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

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

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

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

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

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

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

यह एपीआई काम करता है

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

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

मददगार लिंक

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

धन्यवाद

सही जानकारी देने में मदद करने के लिए, Microsoft के सुंगगुक चु को खास धन्यवाद और Chrome की जानकारी के लिए, Rayan Kanso का इस्तेमाल करें.