ऐसा हो सकता है कि उपयोगकर्ताओं को PWA इंस्टॉल करने की प्रोसेस के बारे में जानकारी न हो. डेवलपर के तौर पर, आपको यह समझ आ जाएगा कि उपयोगकर्ता को ऐप्लिकेशन इंस्टॉल करने का न्योता कब भेजना है. डिफ़ॉल्ट ब्राउज़र इंस्टॉल करने के प्रॉम्प्ट को बेहतर भी बनाया जा सकता है. आइए, देखते हैं कि कौनसे टूल उपलब्ध हैं.
इंस्टॉल करने के डायलॉग बॉक्स को बेहतर बनाया जा रहा है
जब PWA इंस्टॉल करने की ज़रूरी शर्तें पूरी कर लेते हैं, तो ब्राउज़र, इंस्टॉल करने के डिफ़ॉल्ट अनुरोध दिखाते हैं. प्रॉम्प्ट बनाने के लिए, ब्राउज़र आपके वेब ऐप्लिकेशन मेनिफ़ेस्ट से name और icons प्रॉपर्टी का इस्तेमाल करता है.
कुछ ब्राउज़र मेनिफ़ेस्ट में मौजूद प्रमोशन फ़ील्ड का इस्तेमाल करके, इंस्टॉल करने के अनुरोध को बेहतर बनाते हैं. इनमें description, categories, और screenshots शामिल हैं. उदाहरण के लिए, अगर Android पर Chrome का इस्तेमाल करते समय आपका PWA, description और screenshots फ़ील्ड के लिए वैल्यू देता है, तो इंस्टॉल करने का डायलॉग बॉक्स, होम स्क्रीन पर जोड़ें जानकारी के छोटे से बार से बड़े और ज़्यादा जानकारी वाले डायलॉग बॉक्स में बदल जाता है. यह बिलकुल वैसा ही होता है जैसा ऐप स्टोर से इंस्टॉल करने के अनुरोध में होता है.
प्रचार फ़ील्ड को काम करते हुए देखें:
beforeinstallprompt इवेंट
ब्राउज़र के इंस्टॉल करने के अनुरोध, उपयोगकर्ताओं से आपका PWA इंस्टॉल करवाने का पहला चरण है. अपने ऐप्लिकेशन को इंस्टॉल करने का अनुभव लागू करने के लिए, आपके ऐप्लिकेशन को अब भी इंस्टॉल करने से जुड़ी ज़रूरी शर्तें पास करनी होंगी: जब ब्राउज़र को पता चलेगा कि आपका ऐप्लिकेशन इंस्टॉल किया जा सकता है, तब वह beforeinstallprompt इवेंट को ट्रिगर करता है. उपयोगकर्ता के अनुभव को पसंद के मुताबिक बनाने के लिए, आपको यह इवेंट हैंडलर लागू करना होगा. यहां तरीका देखें:
beforeinstallpromptइवेंट सुनें.- इसे सेव करें (आपको बाद में इसकी ज़रूरत होगी).
- इसे अपने यूज़र इंटरफ़ेस (यूआई) से ट्रिगर करें.
नीचे दिए गए कोड में, beforeinstallprompt इवेंट को कैप्चर करने और बाद में पसंद के मुताबिक इस्तेमाल करने के लिए, इवेंट लिसनर का उदाहरण दिया गया है.
// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevents the default mini-infobar or install dialog from appearing on mobile
e.preventDefault();
// Save the event because you'll need to trigger it later.
deferredPrompt = e;
// Show your customized install prompt for your PWA
// Your own UI doesn't have to be a single element, you
// can have buttons in different locations, or wait to prompt
// as part of a critical journey.
showInAppInstallPromotion();
});
इसके बाद, अगर उपयोगकर्ता आपकी पसंद के मुताबिक बनाए गए 'इंस्टॉल करें' बटन पर क्लिक करता है, तो पहले से सेव किए गए deferredPrompt का इस्तेमाल करें और इसकी prompt() तरीके को कॉल करें. ऐसा इसलिए, क्योंकि उपयोगकर्ता को अब भी आपका ऐप्लिकेशन इंस्टॉल करने के लिए ब्राउज़र की प्रोसेस को पूरा करना होगा. आपने जो किया, उसके लिए इवेंट को तब तक टाला गया, जब तक कि आपने उपयोगकर्ता को सही संदर्भ नहीं दिया, ताकि वह उन्हें पीडब्ल्यूए इंस्टॉल करने के लिए बढ़ावा दे सके.
इवेंट कैप्चर करने से, आपको उपयोगकर्ताओं को सूचना और इंसेंटिव देने का मौका मिलता है, ताकि वे आपका ऐप्लिकेशन इंस्टॉल कर सकें. साथ ही, जब आपको पता हो कि ऐप्लिकेशन इंस्टॉल करने वाले लोगों की ज़्यादा दिलचस्पी है, तब ऐप्लिकेशन इंस्टॉल करने का प्रॉम्प्ट भी चुना जा सकता है.
इवेंट तब ट्रिगर नहीं होगा, जब:
- उपयोगकर्ता ने मौजूदा पीडब्ल्यूए को पहले ही इंस्टॉल कर लिया है. यह सिर्फ़ डेस्कटॉप और Android पर WebAPK के लिए मान्य है.
- ऐप्लिकेशन, पीडब्ल्यूए इंस्टॉल करने से जुड़ी ज़रूरी शर्तें पूरी नहीं करता.
- मौजूदा डिवाइस पर अन्य वजहों से PWA को इंस्टॉल नहीं किया जा सकता. उदाहरण के लिए, ऐसा डिवाइस जो कीऑस्क मोड में है या बिना अनुमतियों के है.
प्रॉम्प्ट करने की सबसे अच्छी जगह
अनुरोध कहां दिखाया जाए, यह आपके ऐप्लिकेशन के साथ-साथ इस बात पर निर्भर करता है कि आपके उपयोगकर्ता आपकी सामग्री और सेवाओं का इस्तेमाल कब करते हैं. beforeinstallprompt कैप्चर करके, उपयोगकर्ताओं को ऐप्लिकेशन का इस्तेमाल जारी रखने की वजहों के बारे में बताया जा सकता है. साथ ही, यह भी बताया जा सकता है कि इसे इंस्टॉल करने पर उन्हें क्या फ़ायदे मिलेंगे.
आप अपने ऐप्लिकेशन में कहीं भी इंस्टॉल करने के संकेत दिखाने का विकल्प चुन सकते हैं. कुछ सामान्य पैटर्न ये हैं: साइड मेन्यू में, उपयोगकर्ता की किसी ज़रूरी यात्रा के बाद, जैसे कि ऑर्डर पूरा करना या साइन-अप पेज के बाद. इस बारे में ज़्यादा जानने के लिए, पीडब्ल्यूए इंस्टॉलेशन का प्रमोशन करने के पैटर्न देखें.
आंकड़े इकट्ठा करना
आंकड़ों का इस्तेमाल करके, यह बेहतर तरीके से समझा जा सकता है कि आपके प्रॉम्प्ट कब और कहां दिखाने हैं. आपके पास beforeinstallprompt इवेंट के लिए, userChoice प्रॉपर्टी का इस्तेमाल करने का विकल्प है; userChoice एक प्रॉमिस है, जो उपयोगकर्ता की कार्रवाई से हल हो जाएगा.
// Gather the data from your custom install UI event listener
installButton.addEventListener('click', async () => {
// deferredPrompt is a global variable we've been using in the sample to capture the `beforeinstallevent`
deferredPrompt.prompt();
// Find out whether the user confirmed the installation or not
const { outcome } = await deferredPrompt.userChoice;
// The deferredPrompt can only be used once.
deferredPrompt = null;
// Act on the user's choice
if (outcome === 'accepted') {
console.log('User accepted the install prompt.');
} else if (outcome === 'dismissed') {
console.log('User dismissed the install prompt');
}
});
इसे चलाकर देखें
Chromium ब्राउज़र (डेस्कटॉप या Android) पर, यहां दिए गए सैंपल को आज़माएं.
फ़ॉलबैक
अगर ब्राउज़र beforeinstallprompt के साथ काम नहीं करता है या इवेंट ट्रिगर नहीं होता है, तो ब्राउज़र इंस्टॉल करने के अनुरोध को ट्रिगर करने का कोई और तरीका नहीं है. हालांकि, ऐसे प्लैटफ़ॉर्म पर उपयोगकर्ता को ये निर्देश दिखाए जा सकते हैं जो मैन्युअल तरीके से पीडब्ल्यूए इंस्टॉल करने की अनुमति देते हैं, जैसे कि iOS.
आपको इन निर्देशों को सिर्फ़ ब्राउज़र मोड में रेंडर करना चाहिए; डिसप्ले के दूसरे विकल्पों, जैसे कि standalone या fullscreen का मतलब है कि उपयोगकर्ता ने पहले से ही ऐप्लिकेशन इंस्टॉल कर लिया है.
एलिमेंट को सिर्फ़ ब्राउज़र मोड में रेंडर करने के लिए, display-mode मीडिया क्वेरी का इस्तेमाल करें:
#installInstructions {
display: none
}
@media (display-mode: browser) {
#installInstructions {
display: block
}
}
कोडलैब (कोड बनाना सीखना)
लाइब्रेरी
कस्टम इंस्टॉल प्रॉम्प्ट रेंडर करने में मदद पाने के लिए, ये लाइब्रेरी देखें:
- पीडब्ल्यूए बिल्डर
- प्रतिक्रिया के लिए पीडब्ल्यूए इंस्टॉलर का अनुरोध
- PWA इंस्टॉल की प्रतिक्रिया देना
- Vue PWA इंस्टॉल
- होम स्क्रीन पर जोड़ें