हमने पहली बार 'होम स्क्रीन पर जोड़ें' बैनर को लॉन्च किया है. इसलिए, हम प्रोग्रेसिव वेब ऐप्लिकेशन को ज़्यादा बेहतर तरीके से लेबल करने और उपयोगकर्ताओं के उन्हें इंस्टॉल करने के तरीके को आसान बनाने पर काम कर रहे हैं. आखिर में, हम सभी प्लैटफ़ॉर्म पर खोज वाली पट्टी में 'इंस्टॉल करें' बटन उपलब्ध कराएंगे. Chrome 68 में, हम इस लक्ष्य को पूरा करने के लिए बदलाव कर रहे हैं.
क्या बदलाव होने वाले हैं?
Android पर Chrome 68 से (जुलाई 2018 में, Chrome अब होम स्क्रीन पर जोड़ें) बैनर नहीं दिखाएगा. अगर साइट होम स्क्रीन पर जोड़ें विकल्प को पूरा करती है, तो Chrome मिनी-इन्फ़ोबार दिखाएगा. इसके बाद, अगर उपयोगकर्ता,
मिनी-इन्फ़ोबार पर क्लिक करता है या आपने उपयोगकर्ता के जेस्चर से
beforeinstallprompt इवेंट में prompt() को कॉल किया है, तो Chrome, होम स्क्रीन पर एक मोडल ऐड डायलॉग दिखाएगा.
A2HS बैनर Chrome 67 और इससे पहले के वर्शन
जब साइट, होम स्क्रीन पर जोड़ें की ज़रूरी शर्तें पूरी करती है, तब यह अपने-आप दिखता है. साथ ही, जब साइट beforeinstallprompt इवेंट के दौरान preventDefault() को कॉल नहीं करती है
या
beforeinstallprompt इवेंट के लिए prompt() को कॉल करने पर दिखाया जाता है.
मिनी-इन्फ़ोबार Chrome 68 और इसके बाद के वर्शन
अगर किसी उपयोगकर्ता ने उसे खारिज कर दिया है, तो उसे काफ़ी समय (~3 महीने) होने तक नहीं दिखाया जाएगा.
इस बात से कोई फ़र्क़ नहीं पड़ता कि preventDefault() को beforeinstallprompt इवेंट में कॉल किया गया था या नहीं.
खोज वाली पट्टी की मदद से इंस्टॉल करने का बटन शुरू करने पर, Chrome के आने वाले वर्शन में इस यूज़र इंटरफ़ेस (यूआई) को हटा दिया जाएगा.
A2HS डायलॉग
Chrome 68 और उसके बाद के वर्शन में beforeinstallprompt इवेंट में, उपयोगकर्ता के हाथ के जेस्चर से prompt() को कॉल करके दिखाया जाता है.
या
यह तब दिखता है, जब कोई उपयोगकर्ता Chrome 68 और उसके बाद के वर्शन में, मिनी-इन्फ़ोबार पर टैप करता है.
या
यह तब दिखाया जाता है, जब उपयोगकर्ता Chrome के सभी वर्शन में Chrome मेन्यू में जाकर, 'होम स्क्रीन पर जोड़ें' पर क्लिक करता है.
मिनी-इन्फ़ोबार
मिनी-इन्फ़ोबार, Chrome यूज़र इंटरफ़ेस (यूआई) का एक कॉम्पोनेंट है. इसे साइट कंट्रोल नहीं कर सकती. हालांकि, उपयोगकर्ता इसे आसानी से खारिज कर सकता है. उपयोगकर्ता के खारिज करने के बाद, यह तब तक दोबारा नहीं दिखेगा, जब तक कि काफ़ी समय बीत नहीं जाता (फ़िलहाल, तीन महीने). मिनी-इन्फ़ोबार तब दिखेगा, जब कोई साइट होम स्क्रीन पर जोड़ें की ज़रूरी शर्तें पूरी करेगी. भले ही, आपने beforeinstallprompt इवेंट में preventDefault() किया है या नहीं.
उपयोगकर्ता को पेज लोड (अनुमति के अनुरोधों के लिए एंटी-पैटर्न) के बारे में बताने के बजाय, यह बताएं कि आपके ऐप्लिकेशन को कुछ यूज़र इंटरफ़ेस (यूआई) के साथ इंस्टॉल किया जा सकता है. इसके बाद, मॉडल इंस्टॉल करने का अनुरोध दिखेगा. उदाहरण के लिए, इस डेस्कटॉप PWA को उपयोगकर्ता की प्रोफ़ाइल के नाम के ठीक ऊपर 'ऐप्लिकेशन इंस्टॉल करें' बटन दिखता है.
उपयोगकर्ता के जेस्चर में अपने ऐप्लिकेशन को इंस्टॉल करने की सूचना देने से, उपयोगकर्ता के लिए कम स्पैम वाला कॉन्टेंट लगता है और उनके 'रद्द करें' के बजाय 'जोड़ें' पर क्लिक करने की संभावना बढ़ जाती है. आपके ऐप्लिकेशन में 'इंस्टॉल करें' बटन शामिल करने का मतलब यह है कि भले ही उपयोगकर्ता आज आपके ऐप्लिकेशन को इंस्टॉल न करने का विकल्प चुनें, फिर भी बटन वहां मौजूद रहेगा कल या जब वह इंस्टॉल करने के लिए तैयार होगा.
beforeinstallprompt इवेंट के लिए सुना जा रहा है
अगर आपकी साइट
होम स्क्रीन में जोड़ें की शर्तों को पूरा करती है, तो
Chrome beforeinstallprompt इवेंट को ट्रिगर करेगा, इवेंट का रेफ़रंस सेव करेगा, और आपका यूज़र इंटरफ़ेस अपडेट करेगा. इससे यह बताया जाएगा कि उपयोगकर्ता, आपकी होम स्क्रीन पर आपका ऐप्लिकेशन जोड़ सकता है.
let installPromptEvent;
window.addEventListener('beforeinstallprompt', event => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
अगर ऐप्लिकेशन पहले से इंस्टॉल है, तो beforeinstallprompt इवेंट ट्रिगर नहीं होगा (होम स्क्रीन में जोड़ें की शर्त देखें).
हालांकि, अगर उपयोगकर्ता बाद में ऐप्लिकेशन को अनइंस्टॉल करता है, तो हर पेज नेविगेशन पर beforeinstallprompt इवेंट फिर से चालू हो जाएगा.
prompt() के साथ डायलॉग दिखाया जा रहा है
होम स्क्रीन में जोड़ें डायलॉग दिखाने के लिए, उपयोगकर्ता जेस्चर से सेव किए गए इवेंट पर prompt() को कॉल करें. Chrome, मोडल डायलॉग दिखाएगा. इसमें लोगों से
आपके ऐप्लिकेशन को उनकी होम स्क्रीन पर जोड़ने के लिए कहा जाएगा. इसके बाद, beforeinstallprompt इवेंट के लिए
userChoice प्रॉपर्टी से मिला प्रॉमिस सुनें. प्रॉम्प्ट दिखने और उपयोगकर्ता के जवाब देने के बाद, यह प्रॉमिस outcome प्रॉपर्टी के साथ ऑब्जेक्ट दिखाता है.
btnInstall.addEventListener('click', () => {
// Update the install UI to remove the install button
document.querySelector('#install-button').disabled = true;
// Show the modal add to home screen dialog
installPromptEvent.prompt();
// Wait for the user to respond to the prompt
installPromptEvent.userChoice.then(choice => {
if (choice.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
// Clear the saved prompt since it can't be used again
installPromptEvent = null;
});
});
आपके पास स्थगित इवेंट पर prompt() को सिर्फ़ एक बार कॉल करने का विकल्प है. अगर उपयोगकर्ता, डायलॉग में 'रद्द करें' पर क्लिक करता है, तो आपको अगले पेज नेविगेशन पर beforeinstallprompt इवेंट के ट्रिगर होने तक इंतज़ार करना होगा. परंपरागत अनुमति के
अनुरोधों के उलट, 'रद्द करें' पर क्लिक करने से, prompt() पर आने वाले आने वाले कॉल ब्लॉक नहीं होंगे. ऐसा इसलिए है, क्योंकि
इस कॉल को उपयोगकर्ता के जेस्चर की मदद से ही कॉल किया जाना चाहिए.
जानकारी पाने के दूसरे तरीके
ज़्यादा जानकारी के लिए ऐप्लिकेशन इंस्टॉल बैनर देखें. इसमें ये शामिल हैं:
beforeinstallpromptइवेंट के बारे में जानकारी- होम स्क्रीन पर जोड़ने के अनुरोध पर, उपयोगकर्ता के जवाब को ट्रैक करना
- ऐप्लिकेशन इंस्टॉल किए जाने के बाद ट्रैक किया जा रहा है
- यह तय करना कि आपका ऐप्लिकेशन, इंस्टॉल किए गए ऐप्लिकेशन के तौर पर चल रहा है या नहीं