इंस्टॉल करने की रणनीति तय करने का तरीका

डेमियन रेंज़ुली

पीट लीपेज

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

इसे अलग-अलग तरीकों से हासिल किया जा सकता है:

• ब्राउज़र से PWA इंस्टॉल करना.
• ऐप स्टोर से PWA इंस्टॉल करना.

अलग-अलग डिस्ट्रिब्यूशन चैनल बनाना, ज़्यादा से ज़्यादा उपयोगकर्ताओं तक पहुंचने का एक बेहतरीन तरीका है. हालांकि, अपने PWA को इंस्टॉल करने का प्रमोशन करने के लिए, सही रणनीति चुनना मुश्किल हो सकता है.

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

अपने वेब ऐप्लिकेशन को इंस्टॉल करने लायक क्यों बनाना है?

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

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

• स्टोरेज से जुड़ी पाबंदियां: नया ऐप्लिकेशन इंस्टॉल करने का मतलब है कि काम का कॉन्टेंट हटाकर, अन्य लोगों को मिटाना या स्टोरेज में जगह खाली करना. खास तौर पर, इससे कम सुविधाओं वाले डिवाइसों का इस्तेमाल करने वालों को नुकसान होता है.
• उपलब्ध बैंडविथ: किसी ऐप्लिकेशन को डाउनलोड करना काफ़ी महंगा और धीमी प्रक्रिया हो सकता है. इतना ही नहीं, धीमे कनेक्शन और महंगे डेटा प्लान का इस्तेमाल करने वाले उपयोगकर्ताओं के लिए यह और भी ज़रूरी हो सकता है.
• फ़्रिक्शन: किसी वेबसाइट को छोड़ने और ऐप्लिकेशन डाउनलोड करने के लिए स्टोर पर जाने से, उस पर ज़्यादा रुकावट आती है. साथ ही, उपयोगकर्ता को उस कार्रवाई में देरी होती है जो सीधे वेब पर की जा सकती है.
• अपडेट साइकल: प्लैटफ़ॉर्म के हिसाब से अलग-अलग ऐप्लिकेशन में बदलाव करने के लिए, ऐप्लिकेशन की समीक्षा की प्रक्रिया पूरी करनी पड़ सकती है. इससे बदलावों और एक्सपेरिमेंट (उदाहरण के लिए, A/B टेस्ट) की प्रोसेस धीमी हो सकती है.

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

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

ब्राउज़र का इस्तेमाल करके, PWA को इंस्टॉल करने का प्रमोशन करना

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

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

इंस्टॉल किए जा सकने वाले मुख्य अनुभव के तौर पर PWA

जब PWA इंस्टॉल करने की ज़रूरी शर्तें पूरी कर लेता है, तो ज़्यादातर ब्राउज़र इस बात का संकेत देते हैं कि PWA को इंस्टॉल किया जा सकता है. उदाहरण के लिए, डेस्कटॉप Chrome, पता बार में इंस्टॉल किया जा सकने वाला एक आइकॉन दिखाता है. साथ ही, मोबाइल पर यह मिनी-इन्फ़ोबार दिखाता है:

हालांकि, कुछ सुविधाओं के लिए यह काफ़ी हो सकता है, लेकिन अगर आपका लक्ष्य अपने PWA को इंस्टॉल करना है, तो हमारा सुझाव है कि आप BeforeInstallPromptEvent पर ध्यान दें और अपने PWA को इंस्टॉल करने के लिए, पैटर्न का पालन करें.

अलग-अलग प्लैटफ़ॉर्म के हिसाब से, ऐप्लिकेशन इंस्टॉल करने की दर को अपने PWA को खराब करने से रोकें

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

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

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

इसके बाद, अनुमान को इस तरह से लागू किया जा सकता है:

1. प्लैटफ़ॉर्म के हिसाब से, ऐप्लिकेशन इंस्टॉल करने का बैनर दिखाएं.
2. अगर कोई उपयोगकर्ता बैनर को खारिज करता है, तो उस जानकारी के साथ कुकी सेट करें (जैसे, document.cookie = "app-install-banner=dismissed").
3. साइट पर उपयोगकर्ता विज़िट की संख्या ट्रैक करने के लिए किसी अन्य कुकी का इस्तेमाल करें (उदाहरण, document.cookie = "user-visits=1").
4. किसी उपयोगकर्ता को "PWA उपयोगकर्ता" माना जाए या नहीं, यह तय करने के लिए isPWAUser() जैसा कोई फ़ंक्शन लिखें. यह फ़ंक्शन getInstalledRelatedApps() एपीआई के साथ, कुकी में पहले से सेव की गई जानकारी का इस्तेमाल करता है.
5. जब उपयोगकर्ता कोई काम की कार्रवाई करता है, तो isPWAUser() को कॉल करें. अगर फ़ंक्शन सही दिखाता है और PWA इंस्टॉल करने के अनुरोध को पहले से सेव किया गया था, तो PWA का इंस्टॉल करने का बटन दिखाया जा सकता है.

किसी ऐप स्टोर के ज़रिए, अपने PWA को इंस्टॉल करने का प्रमोशन करना

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

इस सेक्शन में, हम स्टोर में मौजूद ऐप्लिकेशन को दो ग्रुप में बांट देंगे:

• प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन: ये ऐप्लिकेशन, ज़्यादातर प्लैटफ़ॉर्म के कोड का इस्तेमाल करके बनाए जाते हैं. उनका साइज़, प्लैटफ़ॉर्म के हिसाब से अलग-अलग होता है. हालांकि, आम तौर पर Android पर इनका साइज़ 10 एमबी और iOS पर 30 एमबी से ज़्यादा होता है. अगर आपके पास PWA नहीं है या प्लैटफ़ॉर्म के हिसाब से बनाया गया ऐप्लिकेशन, ज़्यादा सुविधाओं का सेट देता है, तो आपको अपने प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन का प्रमोशन करना चाहिए.
• लाइटवेट ऐप्लिकेशन: इन ऐप्लिकेशन को प्लैटफ़ॉर्म के हिसाब से खास कोड के साथ भी बनाया जा सकता है. हालांकि, आम तौर पर ये ऐप्लिकेशन, वेब टेक्नोलॉजी की मदद से बनाए जाते हैं. साथ ही, इन्हें प्लैटफ़ॉर्म के हिसाब से रैपर में बनाया जाता है. सभी PWA को स्टोर पर भी अपलोड किया जा सकता है. (इस लेख में इस पर बाद में बात की गई है.) कुछ कंपनियां इन्हें "लाइट" अनुभव देने का विकल्प चुनती हैं. साथ ही, कुछ कंपनियों ने भी अपने फ़्लैगशिप (मुख्य) ऐप्लिकेशन के लिए भी इसी तरीके का इस्तेमाल किया है.

कम वज़न वाले ऐप्लिकेशन का प्रमोशन करना

Google Play की एक स्टडी के मुताबिक, APK के साइज़ में हर 6 एमबी की बढ़ोतरी होने पर, इंस्टॉल कन्वर्ज़न रेट 1% तक कम हो जाता है. इसका मतलब है कि 10 एमबी वाले किसी ऐप्लिकेशन के डाउनलोड होने की दर करीब 100 एमबी वाले ऐप्लिकेशन से 30% ज़्यादा हो सकती है!

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

Oyo, भारत की सबसे बड़ी हॉस्पिटैलिटी कंपनियों में से एक है. इसने अपने ऐप्लिकेशन का लाइट वर्शन बनाया और टीडब्ल्यूए का इस्तेमाल करके, Play Store में उस ऐप्लिकेशन को उपलब्ध कराया. इस लेख को लिखे जाने के समय, Oyo ऐप्लिकेशन का साइज़ सिर्फ़ 850 केबी था और यह उनके Android ऐप्लिकेशन का सिर्फ़ 7% था. इंस्टॉल हो जाने के बाद, यह ऐप्लिकेशन अपने Android ऐप्लिकेशन से अलग नहीं किया जा सकता:

Oyo ने स्टोर में ऐप्लिकेशन के फ़्लैगशिप और "लाइट", दोनों वर्शन बनाए रखे. इससे, उपयोगकर्ताओं को ऐप्लिकेशन इस्तेमाल करने का विकल्प मिला.

वेब का अच्छा अनुभव देना

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

वेब पर, डिवाइस सिग्नल पाए जा सकते हैं और उन्हें करीब-करीब डिवाइस की कैटगरी (जैसे कि "ज़्यादा", "मध्य" या "कम") से मैप किया जा सकता है. JavaScript API या क्लाइंट संकेतों का इस्तेमाल करके, आप यह जानकारी अलग-अलग तरीकों से पा सकते हैं.

JavaScript का इस्तेमाल करना

navigator.hardwareConcurrency, navigator.deviceMemory, और navigator.connection जैसी JavaScript प्रॉपर्टी का इस्तेमाल करके, डिवाइस के सीपीयू, मेमोरी, और नेटवर्क की स्थिति के बारे में जानकारी पाई जा सकती है. उदाहरण के लिए:

const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';`

क्लाइंट के संकेतों का इस्तेमाल करना

क्लाइंट के संकेतों की मदद से, डिवाइस के सिग्नल का अनुमान, एचटीटीपी अनुरोध के हेडर में भी लगाया जा सकता है. यहां बताया गया है कि क्लाइंट संकेतों के साथ डिवाइस की मेमोरी के लिए पिछला कोड कैसे लागू किया जा सकता है:

सबसे पहले, ब्राउज़र को बताएं कि आपको पहले पक्ष के किसी अनुरोध के लिए, एचटीटीपी रिस्पॉन्स के हेडर में डिवाइस की मेमोरी से जुड़े संकेत पाने हैं.

HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Device-Memory

इसके बाद, आपको एचटीटीपी अनुरोधों के अनुरोध हेडर में Device-Memory की जानकारी मिलेगी:

GET /main.js HTTP/1.1
Device-Memory: 0.5

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

app.get('/route', (req, res) => {
  // Determine device category

 const deviceCategory = req.get('Device-Memory') < 1 ? 'lite' : 'full';

  // Set cookie
  res.setCookie('Device-Category', deviceCategory);
  …
});

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

if (isDeviceMidOrLowEnd()) {
   // show "Lite app" install banner or PWA A2HS prompt
} else {
  // show "Core app" install banner
}

नतीजा

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