पता लगाना

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

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

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

डिसप्ले मोड का पता लगाना

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

function getPWADisplayMode() {
  if (document.referrer.startsWith('android-app://'))
    return 'twa';
  if (window.matchMedia('(display-mode: browser)').matches)
    return 'browser';
  if (window.matchMedia('(display-mode: standalone)').matches)
    return 'standalone';
  if (window.matchMedia('(display-mode: minimal-ui)').matches)
    return 'minimal-ui';
  if (window.matchMedia('(display-mode: fullscreen)').matches)
    return 'fullscreen';
  if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
    return 'window-controls-overlay';

  return 'unknown';
}

window.addEventListener('DOMContentLoaded', () => {
  // Log launch display mode to analytics
  console.log('DISPLAY_MODE_LAUNCH:', getPWADisplayMode());
});

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

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

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

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

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 the display mode used in your manifest
  window.matchMedia('(display-mode: standalone)')
    .addEventListener('change', () => {
      // Log display mode change to analytics
      console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
    });
});

iOS और iPadOS डिवाइसों के स्टोरेज को अलग-अलग रखना

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

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

  • Chrome: यह सुविधा काम नहीं करती.
  • Edge: यह सुविधा काम नहीं करती.
  • Firefox: यह सुविधा काम नहीं करती.
  • Safari: यह सुविधा काम नहीं करती.

सोर्स

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

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

{
  ...
  "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() का इस्तेमाल करके कोई पीडब्ल्यूए पहले से इंस्टॉल है या नहीं, मेनिफ़ेस्ट 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 फ़ाइल सेट करनी होगी. साथ ही, इस लेख में बताए गए तरीके से, अन्य दायरों की अनुमति देनी होगी.

संसाधन