जब से हमने 'होम स्क्रीन पर जोड़ें' बैनर को लॉन्च किया है, तब से हम प्रगतिशील वेब ऐप्लिकेशन को ज़्यादा साफ़ तौर पर लेबल करने और उपयोगकर्ताओं के लिए उन्हें इंस्टॉल करने के तरीके को आसान बनाने पर काम कर रहे हैं. हमारा मकसद सभी प्लैटफ़ॉर्म पर, ऑम्नीबॉक्स में इंस्टॉल बटन उपलब्ध कराना है. 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() किया है या नहीं.
पेज लोड होने पर उपयोगकर्ता को अनुमति मांगने के बजाय (अनुमति के अनुरोधों के लिए एंटी-पैटर्न), किसी यूज़र इंटरफ़ेस (यूआई) की मदद से, उपयोगकर्ता को यह बताया जा सकता है कि आपका ऐप्लिकेशन इंस्टॉल किया जा सकता है. इसके बाद, उपयोगकर्ता को इंस्टॉल करने के लिए मॉडल प्रॉम्प्ट दिखेगा. उदाहरण के लिए, यह डेस्कटॉप पीडब्ल्यूए, उपयोगकर्ता की प्रोफ़ाइल के नाम के ठीक ऊपर 'ऐप्लिकेशन इंस्टॉल करें' बटन जोड़ता है.
उपयोगकर्ता के जेस्चर पर आपके ऐप्लिकेशन को इंस्टॉल करने का अनुरोध करने से, उपयोगकर्ता को स्पैम का कम एहसास होता है. साथ ही, इस बात की संभावना बढ़ जाती है कि वह 'रद्द करें' के बजाय 'जोड़ें' पर क्लिक करेगा. अपने ऐप्लिकेशन में 'इंस्टॉल करें' बटन जोड़ने का मतलब है कि भले ही उपयोगकर्ता आज आपका ऐप्लिकेशन इंस्टॉल न करे, फिर भी बटन कल या जब भी वह इंस्टॉल करने के लिए तैयार होगा, तब भी मौजूद रहेगा.
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इवेंट की जानकारी- होम स्क्रीन पर जोड़ने के प्रॉम्प्ट के लिए उपयोगकर्ता के जवाब को ट्रैक करना
- यह ट्रैक करना कि ऐप्लिकेशन इंस्टॉल हुआ है या नहीं
- यह पता लगाना कि आपका ऐप्लिकेशन, इंस्टॉल किए गए ऐप्लिकेशन के तौर पर चल रहा है या नहीं