पहले, ऐप्लिकेशन इंस्टॉल करने की सुविधा सिर्फ़ प्लैटफ़ॉर्म के हिसाब से उपलब्ध थी. आज के आधुनिक वेब ऐप्लिकेशन, इंस्टॉल किए जा सकने वाले ऐसे अनुभव देते हैं जो प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन के इंटिग्रेशन और भरोसेमंद होने के लेवल के बराबर होते हैं.
ऐसा करने के लिए, ये तरीके अपनाएं:
- ब्राउज़र से PWA इंस्टॉल करना.
- ऐप्लिकेशन स्टोर से PWA इंस्टॉल करना.
डिस्ट्रिब्यूशन के अलग-अलग चैनल होने से, ज़्यादा से ज़्यादा उपयोगकर्ताओं तक पहुंचा जा सकता है. हालांकि, अपने PWA के इंस्टॉलेशन का प्रमोशन करने के लिए सही स्ट्रेटजी चुनना मुश्किल हो सकता है.
इस गाइड में, इंस्टॉलेशन रेट बढ़ाने और प्लैटफ़ॉर्म के बीच होने वाली प्रतिस्पर्धा और कैनिबलाइज़ेशन से बचने के लिए, इंस्टॉलेशन के अलग-अलग विकल्पों को जोड़ने के सबसे सही तरीके बताए गए हैं. इंस्टॉल करने के लिए उपलब्ध विकल्पों में, ब्राउज़र और App Store, दोनों से इंस्टॉल किए गए PWA शामिल हैं. साथ ही, इसमें प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन भी शामिल हैं.
अपने वेब ऐप्लिकेशन को इंस्टॉल किया जा सकने वाला क्यों बनाएं?
इंस्टॉल किए गए प्रगतिशील वेब ऐप्लिकेशन, ब्राउज़र टैब के बजाय स्टैंडअलोन विंडो में चलते हैं. इन्हें उपयोगकर्ता की होम स्क्रीन, डॉक, टास्कबार या शेल्फ़ से लॉन्च किया जा सकता है. उन्हें किसी डिवाइस पर खोजा जा सकता है और ऐप्लिकेशन स्विचर की मदद से उनके बीच स्विच किया जा सकता है. ऐसा करने से, उन्हें उस डिवाइस के हिस्से जैसा महसूस होता है जिस पर वे इंस्टॉल किए गए हैं.
हालांकि, इंस्टॉल किए जा सकने वाले वेब ऐप्लिकेशन और प्लैटफ़ॉर्म के हिसाब से बने ऐप्लिकेशन, दोनों का होना उपयोगकर्ताओं के लिए भ्रम की स्थिति पैदा कर सकता है. कुछ उपयोगकर्ताओं के लिए, प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन सबसे सही विकल्प हो सकते हैं. हालांकि, कुछ लोगों के लिए इनमें कुछ समस्याएं हो सकती हैं:
- स्टोरेज की सीमाएं: नया ऐप्लिकेशन इंस्टॉल करने का मतलब हो सकता है कि ज़रूरी कॉन्टेंट हटाकर, अन्य लोगों को मिटाना या स्टोरेज खाली करना. इससे खास तौर पर, कम क्षमता वाले डिवाइसों का इस्तेमाल करने वाले लोगों को नुकसान पहुंचता है.
- उपलब्ध बैंडविड्थ: ऐप्लिकेशन डाउनलोड करना महंगा और धीमा हो सकता है. यह धीमा इंटरनेट और महंगे डेटा प्लान का इस्तेमाल करने वाले उपयोगकर्ताओं के लिए और भी ज़्यादा धीमा हो सकता है.
- समस्या: किसी ऐप्लिकेशन को डाउनलोड करने के लिए, वेबसाइट से बाहर निकलकर स्टोर में जाने से, अतिरिक्त समस्याओं का सामना करना पड़ता है. साथ ही, उपयोगकर्ता की ऐसी कार्रवाई में देरी होती है जिसे सीधे वेब पर पूरा किया जा सकता है.
- अपडेट साइकल: प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन में बदलाव करने के लिए, ऐप्लिकेशन की समीक्षा की प्रक्रिया पूरी करनी पड़ सकती है. इससे बदलावों और एक्सपेरिमेंट की रफ़्तार धीमी हो सकती है. उदाहरण के लिए, A/B टेस्ट.
कुछ मामलों में, अलग-अलग प्लैटफ़ॉर्म के हिसाब से आपके ऐप्लिकेशन को डाउनलोड न करने वाले उपयोगकर्ताओं का प्रतिशत ज़्यादा हो सकता है. उदाहरण के लिए: ऐसे लोग जिन्हें लगता है कि वे ऐप्लिकेशन का अक्सर इस्तेमाल नहीं करेंगे या जो कई मेगाबाइट स्टोरेज या डेटा खर्च करने को सही न बता पा रहे हों. इस सेगमेंट का साइज़ कई तरीकों से तय किया जा सकता है. उदाहरण के लिए, "सिर्फ़ मोबाइल वेब" उपयोगकर्ताओं के प्रतिशत को ट्रैक करने के लिए, Analytics सेटअप का इस्तेमाल करके.
अगर इस सेगमेंट का साइज़ सोच-समझकर बनाया जा सकता है, तो यह इस बात का अच्छा संकेत है कि आपको अपने ऐप्लिकेशन को इंस्टॉल करने के अन्य तरीके उपलब्ध कराने होंगे.
ब्राउज़र से अपने PWA को इंस्टॉल करने का प्रमोशन करना
अगर आपके पास अच्छी क्वालिटी का पीडब्ल्यूए है, तो आपको प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन पर, उसे इंस्टॉल करने का प्रमोशन करना चाहिए. उदाहरण के लिए, जब प्लैटफ़ॉर्म के हिसाब से काम करने वाले ऐप्लिकेशन में आपके पीडब्ल्यूए की सुविधाएं मौजूद न हों या उसे काफ़ी समय से अपडेट न किया गया हो. अगर किसी प्लैटफ़ॉर्म के लिए बने ऐप्लिकेशन को ChromeOS जैसी बड़ी स्क्रीन के लिए ऑप्टिमाइज़ नहीं किया गया है, तो आपके लिए अपने पीडब्ल्यूए को इंस्टॉल करने का प्रमोशन करना भी फ़ायदेमंद हो सकता है.
कुछ ऐप्लिकेशन के लिए, प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन इंस्टॉल करने की संख्या बढ़ाना, कारोबार के मॉडल का एक अहम हिस्सा होता है. ऐसे में, प्लैटफ़ॉर्म के हिसाब से अपने ऐप्लिकेशन को इंस्टॉल करने का प्रमोशन करना, कारोबार के लिहाज़ से सही होता है. हालांकि, कुछ उपयोगकर्ताओं को वेब पर रहना ज़्यादा पसंद हो सकता है. अगर उस सेगमेंट की पहचान की जा सकती है, तो सिर्फ़ उसे PWA प्रॉम्प्ट दिखाया जा सकता है. इसे हम "फ़ॉलबैक के तौर पर PWA" कहते हैं.
मुख्य तौर पर, इंस्टॉल किए जा सकने वाले पीडब्ल्यूए का इस्तेमाल
जब PWA, इंस्टॉल करने से जुड़ी ज़रूरी शर्तें पूरी करता है, तो ज़्यादातर ब्राउज़र यह बताते हैं कि पीडब्ल्यूए को इंस्टॉल किया जा सकता है. उदाहरण के लिए, डेस्कटॉप पर Chrome, पता बार में इंस्टॉल करने लायक आइकॉन दिखाता है. वहीं, मोबाइल पर यह एक छोटा-सा जानकारी वाला बार दिखाता है:
हालांकि, यह कुछ अनुभवों के लिए काफ़ी हो सकता है, लेकिन अगर आपका लक्ष्य अपने पीडब्ल्यूए को इंस्टॉल करना है, तो हमारा सुझाव है कि आप BeforeInstallPromptEvent को ध्यान से पढ़ें. साथ ही, अपने पीडब्ल्यूए को इंस्टॉल करने का प्रमोशन करने के लिए पैटर्न अपनाएं.
अपने PWA को प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन इंस्टॉल करने की दर को नुकसान पहुंचने से रोकें
कुछ मामलों में, आपके पास अपने पीडब्ल्यूए पर प्लैटफ़ॉर्म के हिसाब से बने ऐप्लिकेशन को इंस्टॉल करने का प्रमोशन करने का विकल्प है. हालांकि, हमारा सुझाव है कि आप उपयोगकर्ताओं को ऐसा तरीका उपलब्ध कराएं जिससे वे आपके पीडब्ल्यूए इंस्टॉल कर सकें. इस फ़ॉलबैक विकल्प की मदद से, ऐसे उपयोगकर्ताओं को आपके प्लैटफ़ॉर्म के हिसाब से बने ऐप्लिकेशन को इंस्टॉल किए बिना, उससे मिलता-जुलता अनुभव मिल सकता है जो इंस्टॉल किया गया है. ऐसा उन उपयोगकर्ताओं के लिए किया जा सकता है जो आपके ऐप्लिकेशन को इंस्टॉल नहीं कर सकते या नहीं करना चाहते.
इस रणनीति को लागू करने का पहला चरण, उपयोगकर्ता को अपने PWA के लिए इंस्टॉल प्रमोशन कब दिखाना है, यह तय करना है.
उदाहरण के लिए: PWA उपयोगकर्ता वह है जिसने प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन इंस्टॉल करने का अनुरोध देखा है, लेकिन प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन इंस्टॉल नहीं किया है. वह साइट पर कम से कम पांच बार वापस आया है या ऐप्लिकेशन के बैनर पर क्लिक किया है, लेकिन वेबसाइट का इस्तेमाल करना जारी रखा है.
फिर, अनुमान को नीचे दिए गए तरीके से लागू किया जा सकता है:
- प्लैटफ़ॉर्म के हिसाब से, ऐप्लिकेशन इंस्टॉल करने का बढ़ावा देने वाला बैनर दिखाएं.
- अगर कोई उपयोगकर्ता बैनर को खारिज करता है, तो उस जानकारी (उदाहरण के लिए,
document.cookie = "app-install-banner=dismissed") के साथ कुकी सेट करें. - साइट पर उपयोगकर्ताओं की विज़िट की संख्या ट्रैक करने के लिए दूसरी कुकी का इस्तेमाल करें (जैसे,
document.cookie = "user-visits=1"). - किसी उपयोगकर्ता को "PWA उपयोगकर्ता" माना जाएगा या नहीं, यह तय करने के लिए
isPWAUser()जैसा एक ऐसा फ़ंक्शन लिखें जोgetInstalledRelatedApps()API के साथ, कुकी में पहले से सेव की गई जानकारी का इस्तेमाल करता हो. - जब उपयोगकर्ता कोई अहम कार्रवाई करता है, तो
isPWAUser()को कॉल करें. अगर फ़ंक्शन 'सही' दिखाता है और PWA इंस्टॉल करने का अनुरोध पहले सेव किया गया था, तो आपके पास PWA इंस्टॉल बटन दिखाने का विकल्प है.
ऐप स्टोर की मदद से, PWA को इंस्टॉल करने का प्रमोशन करना
ऐप स्टोर के लिए ऐप्लिकेशन, अलग-अलग टेक्नोलॉजी का इस्तेमाल करके बनाए जा सकते हैं. इनमें पीडब्ल्यूए की तकनीकें भी शामिल हैं. पीडब्ल्यूए को नेटिव एनवायरमेंट में ब्लेंड करने में, उन टेक्नोलॉजी की खास जानकारी देखी जा सकती है जिनका इस्तेमाल उस काम के लिए किया जा सकता है.
इस सेक्शन में, हम स्टोर में मौजूद ऐप्लिकेशन को दो ग्रुप में बांटेंगे:
- प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन: ये ऐप्लिकेशन, ज़्यादातर प्लैटफ़ॉर्म के हिसाब से बने कोड से बनाए जाते हैं. इनका साइज़, प्लैटफ़ॉर्म पर निर्भर करता है. हालांकि, आम तौर पर ये Android पर 10 एमबी और iOS पर 30 एमबी से ज़्यादा के होते हैं. अगर आपके पास कोई PWA नहीं है या प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन में ज़्यादा सुविधाएं हैं, तो हो सकता है कि आप अपने प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन का प्रमोशन करना चाहें.
- लाइटवेट ऐप्लिकेशन: इन ऐप्लिकेशन को किसी प्लैटफ़ॉर्म के लिए खास कोड की मदद से भी बनाया जा सकता है. हालांकि, आम तौर पर इन्हें वेब टेक्नोलॉजी की मदद से बनाया जाता है, जो प्लैटफ़ॉर्म के हिसाब से खास रैपर में पैकेज होता है. स्टोर में पूरे PWA भी अपलोड किए जा सकते हैं. (इस बारे में इस लेख में बाद में बताया गया है.) कुछ कंपनियां, इन ऐप्लिकेशन को "लाइट" वर्शन के तौर पर उपलब्ध कराती हैं. वहीं, कुछ कंपनियां अपने मुख्य ऐप्लिकेशन के लिए भी इस तरीके का इस्तेमाल करती हैं.
कम स्टोरेज वाले ऐप्लिकेशन का प्रमोशन करना
Google Play की एक स्टडी के मुताबिक, APK के साइज़ में हर 6 एमबी की बढ़ोतरी होने पर, इंस्टॉल कन्वर्ज़न रेट 1% कम हो जाता है. इसका मतलब है कि 10 एमबी के ऐप्लिकेशन के डाउनलोड पूरा होने की दर 100 एमबी वाले ऐप्लिकेशन के डाउनलोड से 30% ज़्यादा हो सकती है!
इस समस्या को हल करने के लिए, कुछ कंपनियां अपने PWA का इस्तेमाल कर रही हैं. इससे वे Play Store पर अपने ऐप्लिकेशन का हल्का वर्शन उपलब्ध करा पा रही हैं. इसके लिए, वे भरोसेमंद वेब गतिविधियों (टीडब्ल्यूए) का इस्तेमाल कर रही हैं. 'टीडब्ल्यूए' आपके PWA को कॉम्पोनेंट जैसे वेबव्यू में रैप करता है. इससे ऐप्लिकेशन का साइज़ आम तौर पर कुछ ही मेगाबाइट होता है.
भारत की सबसे बड़ी होटल बुकिंग कंपनियों में से एक Oyo ने अपने ऐप्लिकेशन का लाइट वर्शन बनाया और TWA का इस्तेमाल करके, इसे Play Store पर उपलब्ध कराया. जब यह लेख लिखा गया था, तब Oyo ऐप्लिकेशन सिर्फ़ 850 केबी का था. यह उनके Android ऐप्लिकेशन का साइज़ सिर्फ़ 7% था. साथ ही, एक बार इंस्टॉल होने के बाद, यह उनके Android ऐप्लिकेशन से अलग नहीं किया जा सकता:
Oyo ने अपने ऐप्लिकेशन के फ़्लैगशिप और "लाइट", दोनों वर्शन को स्टोर में उपलब्ध रखा, ताकि उपयोगकर्ता अपनी पसंद के हिसाब से कोई भी वर्शन डाउनलोड कर सकें.
वेब पर बेहतर अनुभव देना
आम तौर पर, महंगे फ़ोन इस्तेमाल करने वाले लोगों की तुलना में, कम कीमत वाले डिवाइस इस्तेमाल करने वाले लोग ऐप्लिकेशन के लाइटवेट वर्शन डाउनलोड करना पसंद करते हैं. इसलिए, अगर किसी व्यक्ति के डिवाइस की पहचान करना मुमकिन है, तो प्लैटफ़ॉर्म के लिए खास तौर पर भारी वर्शन वाले ऐप्लिकेशन के बड़े वर्शन के बजाय, ऐप्लिकेशन इंस्टॉल करने के लिए लाइटवेट बैनर को प्राथमिकता दी जा सकती है.
वेब पर, डिवाइस के सिग्नल हासिल किए जा सकते हैं और उन्हें डिवाइस की कैटगरी (जैसे, "ज़्यादा", "मध्यम" या "कम") के हिसाब से मैप किया जा सकता है. JavaScript एपीआई या क्लाइंट हिंट का इस्तेमाल करके, इस जानकारी को अलग-अलग तरीकों से पाया जा सकता है.
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
}
नतीजा
उपयोगकर्ता की होम स्क्रीन पर आइकन की क्षमता होना, एप्लिकेशन की सबसे आकर्षक सुविधाओं में से एक है. ऐप्लिकेशन स्टोर से इंस्टॉल किए जाने वाले ऐप्लिकेशन के लिए ही, पहले ऐसा किया जा सकता था. इसलिए, कंपनियां यह सोच सकती हैं कि ऐप्लिकेशन स्टोर से इंस्टॉल करने का बैनर दिखाने से ही, उपयोगकर्ताओं को अपने ऐप्लिकेशन इंस्टॉल करने के लिए मना लिया जा सकता है. फ़िलहाल, उपयोगकर्ताओं को ऐप्लिकेशन इंस्टॉल करने की अनुमति देने के लिए कई विकल्प हैं. इनमें, स्टोर में ऐप्लिकेशन को आसानी से इस्तेमाल करने का अनुभव देना शामिल है. इसके अलावा, लोगों को सीधे वेबसाइट से ऐसा करने के लिए कहकर, होम स्क्रीन पर पीडब्ल्यूए जोड़ने की सुविधा भी दी जा सकती है.