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