पता लगाना

यह पता लगाया जा सकता है कि उपयोगकर्ता, ब्राउज़र में या स्टैंडअलोन मोड में आपके PWA का इस्तेमाल कर रहा है. Chromium का इस्तेमाल करने वाले ब्राउज़र (Android और डेस्कटॉप) पर, इन इवेंट का भी पता लगाया जा सकता है:

  • इंस्टॉल करने के न्योते वाले डायलॉग बॉक्स की स्थिति और उसका नतीजा.
  • इंस्टॉल हो गया है.
  • ब्राउज़र से PWA विंडो पर नेविगेशन ट्रांसफ़र करना.
  • PWA इंस्टॉल होने की स्थिति.
  • किसी ऐप स्टोर से इंस्टॉल किया गया मिलता-जुलता ऐप्लिकेशन.

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

डिसप्ले मोड का पता लगाया जा रहा है

यह ट्रैक करने के लिए कि उपयोगकर्ता आपका PWA कैसे लॉन्च करते हैं, matchMedia() का इस्तेमाल करके display-mode की मीडिया क्वेरी की जांच की जा सकती है.

window.addEventListener('DOMContentLoaded', () => {
  let displayMode = 'browser tab';
  if (window.matchMedia('(display-mode: standalone)').matches) {
    displayMode = 'standalone';
  }
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', displayMode);
});

अगर इस उदाहरण का इस्तेमाल किया जाता है, तो अपने वेब ऐप्लिकेशन मेनिफ़ेस्ट से डिसप्ले मोड का मिलान करना न भूलें, जैसे कि standalone, minimal-ui या fullscreen. कॉमा लगाकर अलग की गई शर्तों का इस्तेमाल करके, मीडिया क्वेरी स्ट्रिंग में एक से ज़्यादा क्वेरी का मिलान भी किया जा सकता है.

आपके पास मेनिफ़ेस्ट के start_url में क्वेरी पैरामीटर जोड़ने का विकल्प भी होता है. इसे आंकड़ों की मदद से कैप्चर किया जा सकता है. इसकी मदद से, यह ट्रैक किया जा सकता है कि आपके PWA का इस्तेमाल कब, किस तरह, और कितना किया जा रहा है.

ऐप्लिकेशन इंस्टॉल करने की प्रक्रिया

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

window.addEventListener('appinstalled', () => {
  // If visible, hide the install promotion
  hideInAppInstallPromotion();
  // Log install to analytics
  console.log('INSTALL: Success');
});

याद रखें कि WebAPK वाले Android डिवाइसों पर इवेंट तब ट्रिगर होता है, जब उपयोगकर्ता डायलॉग स्वीकार करता है, न कि WebAPK के मिंट होने और इंस्टॉल होने के बाद. ऐप्लिकेशन को पूरी तरह से इंस्टॉल होने में कुछ सेकंड की देरी हो सकती है.

इंस्टॉलेशन प्रॉम्प्ट चैप्टर में यह पता लगाने का तरीका बताया गया है कि इंस्टॉलेशन प्रॉम्प्ट उपलब्ध है या नहीं. साथ ही, यह भी बताया गया है कि उपयोगकर्ता कौनसा विकल्प चुनता है.

सेशन ट्रांसफ़र करना

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

ब्राउज़र टैब और PWA विंडो के बीच नेविगेशन ट्रांसफ़र.

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

नीचे दी गई इमेज में, Android ऐप्लिकेशन के पहले से इंस्टॉल होने के दौरान, मेन्यू आइटम को देखा जा सकता है.

Android पर Chrome, PWA विंडो में नया नेविगेशन खोलने के लिए मेन्यू आइटम दिखाता है.

इंस्टॉल करने के बाद ट्रांसफ़र करें

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

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

ट्रांसफ़र का पता लगाया जा रहा है

ब्राउज़र और विंडो के बीच ट्रांसफ़र का पता लगाने के लिए, मीडिया क्वेरी का इस्तेमाल किया जा सकता है:

window.addEventListener('DOMContentLoaded', () => {
  // replace standalone with your display used in manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', (evt) => {
      let displayMode = 'browser';
      if (evt.matches) {
        displayMode = 'standalone';
      }
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', displayMode);
    });
});

iOS और iPadOS के लिए स्टोरेज आइसोलेशन

iOS और iPadOS पर, ब्राउज़र और इंस्टॉल किए गए आइकॉन के बीच, नेविगेशन या यूआरएल ट्रांसफ़र नहीं होता है. उपयोगकर्ता की ओर से इंस्टॉल किए जाने वाले हर PWA आइकॉन के पास, Safari के टैब और अन्य आइकॉन से अलग, अपना स्टोरेज होगा. भले ही, यह एक ही PWA हो. जब कोई उपयोगकर्ता इंस्टॉल किया गया आइकॉन खोलता है, तो Safari के साथ कोई स्टोरेज शेयर नहीं किया जाता. अगर आपके PWA को लॉगिन करने की ज़रूरत है, तो उपयोगकर्ता को फिर से लॉग इन करना होगा. अगर ऐप्लिकेशन को होम स्क्रीन पर कई बार जोड़ा गया था, तो हर PWA इंस्टेंस के लिए, उपयोगकर्ता का सेशन अलग होगा.

ब्राउज़र सहायता

  • x
  • 79
  • x
  • x

सोर्स

वेबसाइट, मेनिफ़ेस्ट के ज़रिए किसी ऐप्लिकेशन के साथ संबंध की जानकारी देती है. ऐसा करने के लिए, वेब ऐप्लिकेशन मेनिफ़ेस्ट स्पेसिफ़िकेशन के related_applications सदस्य का इस्तेमाल करें. related_applications कुंजी, ऑब्जेक्ट का एक कलेक्शन है जो मिलते-जुलते हर ऐप्लिकेशन को दिखाता है. हर एंट्री में platform, url, और एक वैकल्पिक id शामिल होता है.

इन प्लैटफ़ॉर्म की वैल्यू को इस्तेमाल किया जा सकता है:

  • chrome_web_store: Google Chrome वेब स्टोर.
  • play: Google Play के ऐप्लिकेशन (Android और ChromeOS).
  • chromeos_play: ChromeOS Play.
  • webapp: वेब ऐप्लिकेशन.
  • windows: Microsoft Store (Windows 10 और 11).
  • f-droid: एफ़-ड्रोइड.
  • amazon: Amazon AppStore (FireOS).

जब उपयोगकर्ता कोई ऐप्लिकेशन इंस्टॉल करता है, तब उसे मिलते-जुलते ऐप्लिकेशन पर रीडायरेक्ट किया जा सकता है. इसके लिए, आपको मेनिफ़ेस्ट में prefer_related_applications फ़ील्ड को true पर सेट करना होगा. इस सेटअप के साथ काम करने वाले ब्राउज़र पर, इंस्टॉल फ़्लो से PWA इंस्टॉल नहीं होगा. इसके बजाय, वे url या id से स्टोर इंस्टॉलेशन को ट्रिगर करते हैं, जिसे आपने related_applications एंट्री में बताया है.

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

{
  ...
  "related_applications:" [
     {
       "platform": "play",
       "url": "https://play.google.com/..."
     }
  ],
  "prefer_related_applications": true
}

Apple के स्मार्ट ऐप्लिकेशन बैनर

Safari, related_applications सदस्य के साथ काम नहीं करता है, लेकिन यह App Store में ऐप्लिकेशन के लिए स्मार्ट ऐप्लिकेशन बैनर ऑफ़र करता है. इसलिए, अगर आपको App Store में पब्लिश किए गए किसी PWA या अन्य ऐप्लिकेशन का प्रमोशन करना है, तो उपयोगकर्ता को ऐप्लिकेशन इंस्टॉल करने का न्योता देने के लिए, अपने PWA के एचटीएमएल में मेटा टैग शामिल करें (अभी दिया गया लिंक देखें) या अगर पहले से इंस्टॉल किया गया है, तो नेविगेशन को ट्रांसफ़र किया जा सकता है.

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

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

BubbleWrap या PWA Builder जैसे टूल, जो आपको अपने PWA को ऐप स्टोर पर पब्लिश करने की सुविधा देते हैं. इनमें ज़रूरी मेटाडेटा पहले से ही जोड़ा जाता है, ताकि आपकी वेबसाइट getInstalledRelatedApps() का तुरंत इस्तेमाल कर सके. यह पता लगाने के लिए कि getInstalledRelatedApps() का इस्तेमाल करके PWA पहले से इंस्टॉल है या नहीं, अपने मेनिफ़ेस्ट के यूआरएल के साथ मेनिफ़ेस्ट related_applications फ़ील्ड में webapp की जानकारी दें:

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

getInstalledRelatedApps(), ऐप्लिकेशन ऑब्जेक्ट का अरे दिखाता है. अगर कलेक्शन खाली है, तो उससे जुड़ा ऐप्लिकेशन इंस्टॉल नहीं हुआ है.

const relatedApps = await navigator.getInstalledRelatedApps();
const PWAisInstalled = relatedApps.length > 0;

PWA के दायरे के बाहर से इंस्टॉल किए जाने का पता लगाएं

Android 89 पर Chrome की मदद से, यह पता लगाया जा सकता है कि PWA इंस्टॉल है या नहीं. ऐसा PWA के दायरे के बाहर भी किया जा सकता है. आपके PWA को /.well-known/ फ़ोल्डर में एक JSON फ़ाइल सेट करनी होगी, ताकि दूसरे स्कोप की अनुमति दी जा सके, जैसा कि इस लेख में बताया गया है.

रिसॉर्स