हमने 'होम स्क्रीन पर जोड़ें' बैनर को पहली बार लॉन्च करने के बाद से, प्रोग्रेसिव वेब ऐप्लिकेशन को ज़्यादा साफ़ तौर पर लेबल करने पर काम किया है. साथ ही, हमने उपयोगकर्ताओं के लिए इन्हें इंस्टॉल करने की प्रोसेस को आसान बनाने पर भी काम किया है. हमारा लक्ष्य, सभी प्लैटफ़ॉर्म पर मौजूद ओम्निबॉक्स में 'इंस्टॉल करें' बटन उपलब्ध कराना है. Chrome 68 में, हम इस लक्ष्य को पूरा करने के लिए बदलाव कर रहे हैं.
क्या बदलाव होने वाले हैं?
Android पर Chrome 68 (जुलाई 2018 में स्टेबल वर्शन) से, Chrome अब होम स्क्रीन पर जोड़ने का बैनर नहीं दिखाएगा. अगर साइट, होम स्क्रीन पर जोड़ने की ज़रूरी शर्तों को पूरा करती है, तो Chrome मिनी-इन्फ़ोबार दिखाएगा. इसके बाद, अगर उपयोगकर्ता मिनी-जानकारी वाले बार पर क्लिक करता है या उपयोगकर्ता के जेस्चर के दौरान, beforeinstallprompt इवेंट पर prompt() कॉल करता है, तो Chrome, होम स्क्रीन पर जोड़ने के लिए एक डायलॉग बॉक्स दिखाएगा.
A2HS बैनर Chrome 67 और इससे पहले के वर्शन
साइट के 'होम स्क्रीन में जोड़ें' सुविधा से जुड़ी ज़रूरी शर्तें पूरी करने पर, यह अपने-आप दिखता है. साथ ही, साइट preventDefault() इवेंट पर preventDefault() को कॉल नहीं करती हैbeforeinstallprompt
या
beforeinstallprompt इवेंट में prompt() को कॉल करके दिखाया गया.
मिनी-जानकारी वाला बार Chrome 68 और उसके बाद के वर्शन
अगर किसी उपयोगकर्ता ने इसे खारिज कर दिया है, तो यह तब तक नहीं दिखेगा, जब तक कि काफ़ी समय (~3 महीने) न बीत जाए.
preventDefault() इवेंट में preventDefault() को कॉल किया गया था या नहीं, इससे कोई फ़र्क़ नहीं पड़ता.beforeinstallprompt
Chrome के आने वाले वर्शन में, इस यूज़र इंटरफ़ेस (यूआई) को हटा दिया जाएगा. ऐसा तब होगा, जब खोज वाली पट्टी में इंस्टॉल बटन जोड़ दिया जाएगा.
A2HS डायलॉग
Chrome 68 और इसके बाद के वर्शन में, beforeinstallprompt इवेंट पर उपयोगकर्ता के जेस्चर के दौरान prompt() को कॉल करके दिखाया जाता है.
या
यह सूचना तब दिखती है, जब कोई उपयोगकर्ता Chrome 68 और इसके बाद के वर्शन में मिनी-जानकारी वाले बार पर टैप करता है.
या
यह कुकी, Chrome के सभी वर्शन में तब दिखती है, जब उपयोगकर्ता Chrome मेन्यू में जाकर 'होम स्क्रीन पर जोड़ें' पर क्लिक करता है.
मिनी-जानकारी वाला बार
मिनी-जानकारी वाला यह बार, Chrome के यूज़र इंटरफ़ेस (यूआई) का एक कॉम्पोनेंट है. इसे साइट कंट्रोल नहीं कर सकती. हालांकि, उपयोगकर्ता इसे आसानी से खारिज कर सकता है. अगर उपयोगकर्ता इस सूचना को खारिज कर देता है, तो यह सूचना तब तक दोबारा नहीं दिखेगी, जब तक कि कुछ समय न बीत जाए. फ़िलहाल, यह समय तीन महीने है. मिनी-जानकारी वाला बार तब दिखेगा, जब साइट होम स्क्रीन पर जोड़ने की ज़रूरी शर्तें पूरी करती हो. भले ही, आपने beforeinstallprompt इवेंट पर preventDefault() किया हो या नहीं.
पेज लोड होने पर उपयोगकर्ता को सूचना दिखाने के बजाय (अनुमति के अनुरोधों के लिए एंटी-पैटर्न), कुछ यूज़र इंटरफ़ेस (यूआई) के साथ यह दिखाया जा सकता है कि आपका ऐप्लिकेशन इंस्टॉल किया जा सकता है. इसके बाद, इंस्टॉल करने का अनुरोध दिखाने वाला मोडल दिखेगा. उदाहरण के लिए, यह डेस्कटॉप पीडब्ल्यूए, उपयोगकर्ता की प्रोफ़ाइल के नाम के ठीक ऊपर ‘ऐप्लिकेशन इंस्टॉल करें’ बटन जोड़ता है.
उपयोगकर्ता के जेस्चर पर ऐप्लिकेशन इंस्टॉल करने का अनुरोध करने से, उसे कम स्पैम जैसा लगता है. इससे इस बात की संभावना बढ़ जाती है कि वह ‘रद्द करें’ के बजाय ‘जोड़ें’ पर क्लिक करेगा. अपने ऐप्लिकेशन में 'इंस्टॉल करें' बटन शामिल करने का मतलब है कि अगर उपयोगकर्ता आज आपका ऐप्लिकेशन इंस्टॉल नहीं करता है, तो भी यह बटन कल या जब भी वह इंस्टॉल करने के लिए तैयार होगा, तब दिखेगा.
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इवेंट के बारे में जानकारी- यह कुकी, 'होम स्क्रीन पर जोड़ें' प्रॉम्प्ट पर उपयोगकर्ता की प्रतिक्रिया को ट्रैक करती है
- यह कुकी ट्रैक करती है कि ऐप्लिकेशन इंस्टॉल किया गया है या नहीं
- यह पता लगाना कि आपका ऐप्लिकेशन, इंस्टॉल किए गए ऐप्लिकेशन के तौर पर चल रहा है या नहीं