पब्लिश करने की तारीख: 14 फ़रवरी, 2020
कई ब्राउज़र, आपको अपने प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए) को सीधे तौर पर यूज़र इंटरफ़ेस में इंस्टॉल करने की सुविधा देते हैं. साथ ही, इसके इंस्टॉलेशन का प्रमोशन करने की भी अनुमति देते हैं. इंस्टॉल करने की सुविधा (पहले इसे होम स्क्रीन पर जोड़ें कहा जाता था) की मदद से, लोग आपके PWA को अपने मोबाइल या डेस्कटॉप डिवाइस पर जोड़ सकते हैं. किसी PWA को इंस्टॉल करने पर, वह उपयोगकर्ता के लॉन्चर में जुड़ जाता है. इससे वह किसी भी अन्य इंस्टॉल किए गए ऐप्लिकेशन की तरह काम कर सकता है.
ब्राउज़र से इंस्टॉल करने की सुविधा के अलावा, आपके पास सीधे अपने ऐप्लिकेशन में इंस्टॉल करने की कस्टम सुविधा देने का विकल्प होता है.
ऐप्लिकेशन इंस्टॉल करने का प्रमोशन करने से पहले, यह सोचें कि उपयोगकर्ता आम तौर पर आपके PWA का इस्तेमाल कैसे करते हैं. उदाहरण के लिए, अगर उपयोगकर्ताओं का कोई ऐसा ग्रुप है जो आपके PWA का इस्तेमाल एक हफ़्ते में कई बार करता है, तो इन उपयोगकर्ताओं को फ़ोन की होम स्क्रीन या डेस्कटॉप ऑपरेटिंग सिस्टम के स्टार्ट मेन्यू से ऐप्लिकेशन लॉन्च करने की सुविधा से फ़ायदा मिल सकता है. कुछ प्रॉडक्टिविटी और मनोरंजन ऐप्लिकेशन को भी, ब्राउज़र टूलबार हटाने से मिली अतिरिक्त स्क्रीन स्पेस का फ़ायदा मिलता है. ऐसा standalone, minimal-ui या window-control-overlay मोड में इंस्टॉल किए गए ऐप्लिकेशन की विंडो में होता है.
ज़रूरी शर्तें
शुरू करने से पहले, पक्का करें कि आपका PWA, इंस्टॉल करने की ज़रूरी शर्तों को पूरा करता हो. आम तौर पर, इनमें वेब ऐप्लिकेशन मेनिफ़ेस्ट होना शामिल है.
ऐप्लिकेशन इंस्टॉल करने का प्रमोशन करना
यह दिखाने के लिए कि आपका प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल किया जा सकता है और ऐप्लिकेशन में इंस्टॉल करने का कस्टम फ़्लो उपलब्ध कराने के लिए:
beforeinstallpromptइवेंट के लिए सुनें.beforeinstallpromptइवेंट को सेव करें, ताकि बाद में इंस्टॉल फ़्लो को ट्रिगर किया जा सके.- उपयोगकर्ता को सूचना दें कि आपका पीडब्ल्यूए इंस्टॉल किया जा सकता है. साथ ही, ऐप्लिकेशन में ही इंस्टॉल करने की प्रोसेस शुरू करने के लिए, बटन या कोई अन्य एलिमेंट उपलब्ध कराएं.
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 इवेंट (deferredPrompt वैरिएबल में सेव किया गया) पर prompt() कॉल करें. यह उपयोगकर्ता को एक मोडल इंस्टॉल डायलॉग दिखाता है. इसमें उनसे यह पुष्टि करने के लिए कहा जाता है कि क्या उन्हें आपका 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 प्रॉपर्टी के ठीक होने के तुरंत बाद होता है.
यह कुकी, यह पता लगाने के लिए सेट की जाती है कि PWA इंस्टॉल हो गया है
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');
});
इस कुकी से यह पता चलता है कि PWA को कैसे लॉन्च किया गया था
सीएसएस display-mode मीडिया क्वेरी से पता चलता है कि PWA को कैसे लॉन्च किया गया था. इसे ब्राउज़र टैब में लॉन्च किया गया था या इंस्टॉल किए गए PWA के तौर पर लॉन्च किया गया था. इससे, ऐप्लिकेशन को लॉन्च करने के तरीके के आधार पर अलग-अलग स्टाइल लागू की जा सकती हैं. उदाहरण के लिए, इसे इस तरह कॉन्फ़िगर किया जा सकता है कि इंस्टॉल किए गए PWA के तौर पर लॉन्च होने पर, इंस्टॉल बटन हमेशा छिपा रहे और 'वापस जाएं' बटन दिखे.
ट्रैक करें कि PWA कैसे लॉन्च किया गया था
यह ट्रैक करने के लिए कि उपयोगकर्ता आपके PWA को कैसे लॉन्च करते हैं, matchMedia() का इस्तेमाल करके display-mode मीडिया क्वेरी की जांच करें.
function getPWADisplayMode() {
if (document.referrer.startsWith('android-app://'))
return 'twa';
if (window.matchMedia('(display-mode: browser)').matches)
return 'browser';
if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone)
return 'standalone';
if (window.matchMedia('(display-mode: minimal-ui)').matches)
return 'minimal-ui';
if (window.matchMedia('(display-mode: fullscreen)').matches)
return 'fullscreen';
if (window.matchMedia('(display-mode: window-controls-overlay)').matches)
return 'window-controls-overlay';
return 'unknown';
}
डिसप्ले मोड में बदलाव होने पर ट्रैक करता है
यह ट्रैक करने के लिए कि उपयोगकर्ता browser और अन्य डिसप्ले मोड के बीच स्विच करता है या नहीं, display-mode मीडिया क्वेरी में होने वाले बदलावों को सुनें.
// Replace "standalone" with the display mode used in your manifest
window.matchMedia('(display-mode: standalone)').addEventListener('change', () => {
// Log display mode change to analytics
console.log('DISPLAY_MODE_CHANGED', getPWADisplayMode());
});
मौजूदा डिसप्ले मोड के आधार पर यूज़र इंटरफ़ेस (यूआई) को अपडेट करें
इंस्टॉल किए गए PWA के तौर पर लॉन्च किए जाने पर, PWA के लिए अलग बैकग्राउंड कलर लागू करने के लिए, शर्त के साथ सीएसएस का इस्तेमाल करें:
@media all and (display-mode: standalone) {
body {
background-color: yellow;
}
}
अपने ऐप्लिकेशन का आइकॉन और नाम अपडेट करना
अगर आपको अपने ऐप्लिकेशन का नाम अपडेट करना है या नए आइकॉन देने हैं, तो क्या होगा? Chrome, वेब ऐप्लिकेशन मेनिफ़ेस्ट के अपडेट को कैसे मैनेज करता है लेख पढ़ें. इससे आपको यह पता चलेगा कि Chrome में ये बदलाव कब और कैसे दिखते हैं.