कई ब्राउज़र आपको इंस्टॉलेशन को चालू करने और उसका प्रमोशन करने की सुविधा देते हैं आपके प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए) का इस्तेमाल किया जा सकता है. इंस्टॉलेशन (इसे पहले कभी-कभी होम स्क्रीन पर जोड़ें) की मदद से उपयोगकर्ता इंस्टॉल कर सकते हैं आपके PWA को उनके मोबाइल या डेस्कटॉप डिवाइस पर इस्तेमाल किया जा सकता है. PWA इंस्टॉल करने से, यह उपयोगकर्ता के लॉन्चर चालू करें, ताकि यह इंस्टॉल किए गए किसी भी अन्य ऐप्लिकेशन की तरह चल सके.
ब्राउज़र से मिले इंस्टॉल करने के अनुभव के अलावा, ऐप्लिकेशन में, अपनी पसंद के मुताबिक इंस्टॉल फ़्लो उपलब्ध कराया जा सकता है.
इंस्टॉलेशन को बढ़ावा देने से पहले, इस बात का ध्यान रखें कि लोग आम तौर पर
अपने PWA का इस्तेमाल करें. उदाहरण के लिए, अगर ऐसे उपयोगकर्ता हैं जो आपके कई PWA का इस्तेमाल करते हैं
हफ़्ते में कई बार, इन उपयोगकर्ताओं को ज़्यादा आसानी से इस्तेमाल की जा सकने वाली
फ़ोन की होम स्क्रीन से या डेस्कटॉप के स्टार्ट मेन्यू से अपना ऐप्लिकेशन लॉन्च करना
ऑपरेटिंग सिस्टम. प्रॉडक्टिविटी और मनोरंजन वाले कुछ ऐप्लिकेशन से भी फ़ायदा मिलता है
Chrome ब्राउज़र के टूलबार को हटाकर,
इंस्टॉल किए गए standalone या minimal-ui मोड में विंडो.
ज़रूरी शर्तें
शुरू करने से पहले, पक्का करें कि आपका पीडब्ल्यूए इंस्टॉल करने से जुड़ी ज़रूरी शर्तों को पूरा करना होगा, जो आम तौर पर जिनमें वेब ऐप्लिकेशन मेनिफ़ेस्ट शामिल हो.
इंस्टॉलेशन को बढ़ावा दें
यह दिखाने के लिए कि आपका प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल किया जा सकता है और इन-ऐप्लिकेशन इंस्टॉल फ़्लो:
beforeinstallpromptइवेंट सुनें.beforeinstallpromptइवेंट को सेव करें, ताकि यह इंस्टॉल फ़्लो को ट्रिगर कर सके बाद में.- उपयोगकर्ता को सूचना दें कि आपका PWA इंस्टॉल किया जा सकता है. साथ ही, कोई बटन या अन्य जानकारी उपलब्ध कराएं एलिमेंट का इस्तेमाल करें.
beforeinstallprompt इवेंट सुनें
अगर आपका प्रोग्रेसिव वेब ऐप्लिकेशन ज़रूरी इंस्टॉलेशन की ज़रूरी शर्तें पूरी करता है, तो
ब्राउज़र beforeinstallprompt इवेंट ट्रिगर करता है. इवेंट के रेफ़रंस को सेव करें,
और अपना यूज़र इंटरफ़ेस अपडेट करके यह बताएं कि उपयोगकर्ता आपका PWA इंस्टॉल कर सकता है.
// Initialize deferredPrompt for use later to show browser install prompt.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI notify the user they can install the PWA
showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
इन-ऐप्लिकेशन इंस्टॉल करने का तरीका
इन-ऐप्लिकेशन इंस्टॉलेशन की सुविधा देने के लिए, कोई बटन या अन्य इंटरफ़ेस एलिमेंट उपलब्ध कराएं
जिस पर क्लिक या टैप करके, लोग आपका ऐप्लिकेशन इंस्टॉल कर सकते हैं. जब एलिमेंट पर क्लिक किया जाता है या
टैप किया गया, सेव किए गए beforeinstallprompt इवेंट (इस डेटा में सेव किया गया) में prompt() को कॉल करें
deferredPrompt वैरिएबल). यह उपयोगकर्ता को मॉडल इंस्टॉल करने के लिए डायलॉग बॉक्स दिखाता है.
ताकि यह पुष्टि की जा सके कि वे आपका PWA इंस्टॉल करना चाहते हैं.
buttonInstall.addEventListener('click', async () => {
// Hide the app provided install promotion
hideInstallPromotion();
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
const { outcome } = await deferredPrompt.userChoice;
// Optionally, send analytics event with outcome of user choice
console.log(`User response to the install prompt: ${outcome}`);
// We've used the prompt and can't use it again, throw it away
deferredPrompt = null;
});
userChoice प्रॉपर्टी एक ऐसा प्रॉमिस है जो उपयोगकर्ता की पसंद के मुताबिक तय होता है.
टाले गए इवेंट पर prompt() को सिर्फ़ एक बार कॉल किया जा सकता है. अगर उपयोगकर्ता
इसे खारिज कर देता है, तो आपको beforeinstallprompt इवेंट होने तक इंतज़ार करना होगा
आम तौर पर, userChoice प्रॉपर्टी के तुरंत बाद फिर से ट्रिगर होता है
का समाधान हो गया है.
पता लगाएं कि पीडब्ल्यूए इंस्टॉल कब हुआ
userChoice प्रॉपर्टी का इस्तेमाल करके, यह पता लगाया जा सकता है कि उपयोगकर्ता ने इंस्टॉल किया या नहीं
यूज़र इंटरफ़ेस में ही आपका ऐप्लिकेशन डाउनलोड किया जाता है. हालांकि, अगर उपयोगकर्ता आपका PWA इंस्टॉल करता है
तो userChoice से मदद नहीं मिलेगी.
इसके बजाय, आपको appinstalled इवेंट को सुनना चाहिए, जो जब भी ट्रिगर होता है
आपका PWA इंस्टॉल हो गया है. इससे कोई फ़र्क़ नहीं पड़ता कि उसे इंस्टॉल करने के लिए कौनसा तरीका इस्तेमाल किया गया है.
window.addEventListener('appinstalled', () => {
// Hide the app-provided install promotion
hideInstallPromotion();
// Clear the deferredPrompt so it can be garbage collected
deferredPrompt = null;
// Optionally, send analytics event to indicate successful install
console.log('PWA was installed');
});
पता लगाएं कि पीडब्ल्यूए कैसे लॉन्च किया गया था
सीएसएस display-mode की मीडिया क्वेरी से पता चलता है कि पीडब्ल्यूए को कैसे लॉन्च किया गया था.
ब्राउज़र टैब या इंस्टॉल किए गए PWA के तौर पर दिखेगा. इससे अलग-अलग सोर्स से,
स्टाइल के हिसाब से तय किया जाता है. उदाहरण के लिए, आप इसे कॉन्फ़िगर कर सकते हैं
ताकि 'इंस्टॉल करें' बटन को हमेशा छिपाएं और 'वापस जाएं' बटन उपलब्ध कराएं.
PWA इंस्टॉल हो गया है.
ट्रैक करें कि पीडब्ल्यूए को कैसे लॉन्च किया गया था
यह ट्रैक करने के लिए कि उपयोगकर्ता आपके पीडब्ल्यूए को कैसे लॉन्च करते हैं, matchMedia() का इस्तेमाल करके
display-mode मीडिया क्वेरी. फ़िलहाल, iOS पर Safari पर यह सुविधा काम नहीं करती है. इसलिए, आपको
इसके बजाय navigator.standalone को चेक करें, जिससे यह पता चलता है कि क्या बूलियन
ब्राउज़र स्टैंडअलोन मोड में चल रहा है.
function getPWADisplayMode() {
const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
if (document.referrer.startsWith('android-app://')) {
return 'twa';
} else if (navigator.standalone || isStandalone) {
return 'standalone';
}
return 'browser';
}
डिसप्ले मोड में बदलाव होने पर ट्रैक करें
उपयोगकर्ता ने standalone और browser tab के बीच बदलाव किया है या नहीं, यह ट्रैक करने के लिए इसे सुनें
display-mode मीडिया क्वेरी में किए गए बदलाव.
window.matchMedia('(display-mode: standalone)').addEventListener('change', (evt) => {
let displayMode = 'browser';
if (evt.matches) {
displayMode = 'standalone';
}
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', displayMode);
});
मौजूदा डिसप्ले मोड के आधार पर यूज़र इंटरफ़ेस (यूआई) अपडेट करें
इंस्टॉल किए गए ऐप्लिकेशन के तौर पर लॉन्च किए जाने पर, PWA के लिए अलग बैकग्राउंड का रंग लागू करने के लिए PWA में, शर्तों के साथ सीएसएस का इस्तेमाल करें:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
अपने ऐप्लिकेशन का आइकॉन और नाम अपडेट करना
अगर आपको अपने ऐप्लिकेशन का नाम अपडेट करना है या नए आइकॉन उपलब्ध कराने हैं, तो क्या करना होगा? जानें कि Chrome, वेब ऐप्लिकेशन मेनिफ़ेस्ट के अपडेट को कैसे मैनेज करता है ताकि यह देखा जा सके कि वे बदलाव Chrome में कब और कैसे दिखते हैं.