प्रोग्रेसिव वेब ऐप्लिकेशन: इंस्टॉल करने के लिए प्रॉम्प्ट करना और इंस्टॉल को मेज़र करना

1. आपका स्वागत है

इस लैब में, आपको इंस्टॉल किए जा सकने वाले किसी मौजूदा पीडब्ल्यूए में, ऐप्लिकेशन में इंस्टॉल करने का कस्टम बटन जोड़ने का तरीका बताया जाएगा. यह प्रोग्रेसिव वेब ऐप्लिकेशन वर्कशॉप के लिए, कंपैनियन कोडलैब की सीरीज़ का पांचवां कोडलैब है. पिछला कोडलैब टैब से टास्कबार तक था. इस सीरीज़ में तीन और कोडलैब हैं.

आपको क्या सीखने को मिलेगा

• ऐप्लिकेशन में PWA इंस्टॉल करने के लिए, पसंद के मुताबिक बटन बनाना

आपको क्या पता होना चाहिए

• JavaScript

आपको इन चीज़ों की ज़रूरत होगी

• ऐसा ब्राउज़र जो Service Workers के साथ काम करता हो

2. सेट अप करना

इस कोडलैब को पूरा करने के लिए, ज़रूरी स्टार्टर कोड को क्लोन करें या डाउनलोड करें:

Repo को क्लोन करना

ज़िप फ़ाइल डाउनलोड करें

अगर आपको रेपो को क्लोन करना है, तो पक्का करें कि आप pwa04--prompt-measure-install ब्रांच पर हों. ZIP फ़ाइल में उस ब्रांच का कोड भी होता है.

इस कोडबेस के लिए, Node.js 14 या उसके बाद का वर्शन ज़रूरी है. कोड उपलब्ध होने के बाद, कोड के फ़ोल्डर में कमांड लाइन से npm ci चलाएं. इससे, आपको ज़रूरी सभी डिपेंडेंसी इंस्टॉल करने में मदद मिलेगी. इसके बाद, कोडलैब के लिए डेवलपमेंट सर्वर शुरू करने के लिए, npm start चलाएं.

सोर्स कोड की README.md फ़ाइल में, डिस्ट्रिब्यूट की गई सभी फ़ाइलों के बारे में जानकारी दी गई है. इसके अलावा, यहां कुछ ऐसी मुख्य फ़ाइलें दी गई हैं जिन पर आपको इस कोडलैब के दौरान काम करना होगा:

मुख्य फ़ाइलें

• js/main.js - मुख्य ऐप्लिकेशन की JavaScript फ़ाइल

3. 'इंस्टॉल करें' बटन सेट अप करना

ऐप्लिकेशन इंस्टॉल करने के लिए प्रॉम्प्ट जोड़ने और इंस्टॉल इवेंट कैप्चर करने से पहले, कुछ सेटअप करना ज़रूरी है. सबसे पहले, एक फ़ाइल js/lib/install.js बनाएं और उसमें यह कोड जोड़ें:

export class Install {
  /**
   * @param {DOMElement} trigger - Triggering element
   */
  constructor(trigger) {
    this._prompt;
    this._trigger = trigger;
  }

  /**
   * Toggle visibility of install button
   * @param {string} action
   */
  toggleInstallButton(action = 'hide') {
    if (action === 'hide') {
      this._trigger.style.display = 'none';
    } else {
      this._trigger.style.display = 'block';
    }
  }
}

इसके बाद, js/main.js इवेंट के सबसे नीचे मौजूद DOMContentLoaded में, यह कोड जोड़ें:

// Set up install prompt
const { Install } = await import('./lib/install.js');
new Install(document.querySelector('#install'));

जानकारी

यह कोड, Install क्लास को सेट अप करता है. इसका इस्तेमाल अगले चरण में किया जाएगा. साथ ही, इसे चालू ऐप्लिकेशन से अटैच करता है.

4. Install Prompt Listeners जोड़ना

'इंस्टॉल करें' बटन ट्रिगर का इस्तेमाल करके, PWA को इंस्टॉल करने के लिए ट्रिगर करने के लिए, आपको इंस्टॉल करने का अनुरोध कैप्चर करना होगा. इसे इंस्टॉल करने के बाद, आपको कैप्चर किए गए इंस्टॉल प्रॉम्प्ट को रीसेट करना होगा. इसके लिए, js/lib/install.js में Install क्लास के constructor में, यहां दिए गए काम करने के लिए कोड लिखें:

ऐप्लिकेशन इंस्टॉल करने का प्रॉम्प्ट कैप्चर करना

• window पर beforeinstallprompt इवेंट के लिए सुनें.
• इवेंट को ट्रिगर होने से रोकना
• प्रॉम्प्ट को कैप्चर करना
• 'इंस्टॉल करें' बटन ट्रिगर दिखाएं

इंस्टॉल करने पर प्रॉम्प्ट को रीसेट करना

• window पर appinstalled इवेंट के लिए सुनें.
• कैप्चर किए गए प्रॉम्प्ट को रीसेट करें
• 'इंस्टॉल करें' बटन के ट्रिगर को छिपाना

5. ऐप्लिकेशन में मौजूद बटन से इंस्टॉल ट्रिगर करना

प्रॉम्प्ट कैप्चर होने के बाद, PWA के 'इंस्टॉल करें' बटन को इसे ट्रिगर करना होगा. इसके लिए, js/lib/install.js में Install क्लास में यह जोड़ें:

• async इंस्टॉल करने को ट्रिगर करने का एक तरीका है.
  • यह कैप्चर किए गए प्रॉम्प्ट का इस्तेमाल करके, इंस्टॉल करने का अनुरोध करता है
  • await उपयोगकर्ता की पसंद के हिसाब से प्रॉम्प्ट
  • प्रॉम्प्ट को रीसेट करना
  • अगर उपयोगकर्ता ने इंस्टॉल करने के लिए प्रॉम्प्ट स्वीकार कर लिया है, तो इंस्टॉल बटन छिपाएं
• क्लास के constructor में, इंस्टॉल बटन में click इवेंट लिसनर जोड़ें. इससे इंस्टॉलेशन ट्रिगर कॉल होता है.

6. बधाई हो!

आपने अभी-अभी यह सीखा है कि ऐप्लिकेशन में मौजूद इंस्टॉल बटन से, PWA को इंस्टॉल करने की प्रोसेस कैसे शुरू की जाती है.

इस सीरीज़ का अगला कोडलैब, अपने PWA को बेहतर बनाना है