पता लगाना

यह पता लगाया जा सकता है कि उपयोगकर्ता, ब्राउज़र में आपके 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 में क्वेरी पैरामीटर भी जोड़ा जा सकता है. इसे आंकड़ों की मदद से कैप्चर किया जा सकता है. इससे यह पता लगाया जा सकता है कि आपके पीडब्ल्यूए का इस्तेमाल कब, किस तरह, और कितना इस्तेमाल किया जा रहा है.

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

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

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

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

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

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

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

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

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

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

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

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

ट्रांसफ़र का पता लगाना

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

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 एक ही हो, लेकिन उपयोगकर्ता के इंस्टॉल किए गए हर PWA आइकॉन का खुद का स्टोरेज होगा. इसमें Safari के टैब और अन्य आइकॉन से नहीं जोड़ा जाएगा. जब कोई उपयोगकर्ता इंस्टॉल किया गया आइकन खोलता है, तो Safari के साथ कोई मेमोरी शेयर नहीं की जाती है. अगर आपके PWA में लॉगिन करने की ज़रूरत है, तो उपयोगकर्ता को फिर से लॉग इन करना होगा. अगर ऐप्लिकेशन को होम स्क्रीन पर कई बार जोड़ा गया था, तो PWA के हर इंस्टेंस के लिए, उपयोगकर्ता का एक अलग सेशन होता है.

मिलते-जुलते ऐप्लिकेशन

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

संसाधन

• क्या आपका ऐप्लिकेशन इंस्टॉल है? getInstalledRelatedApps() आपको बताता है!
• MDN: मिलते-जुलते ऐप्लिकेशन
• एमडीएन: Appइंस्टॉल किया गया इवेंट
• Apple: स्मार्ट ऐप्लिकेशन बैनर की मदद से ऐप्लिकेशन का प्रमोशन करना