इस पेज का अनुवाद Cloud Translation API से किया गया है.

प्रोग्रेसिव वेब ऐप्लिकेशन: टैब से टास्कबार तक

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

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

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

सर्विस वर्कर को मैन्युअल तरीके से लिखना
किसी मौजूदा वेब ऐप्लिकेशन में सर्विस वर्कर जोड़ना
संसाधनों को ऑफ़लाइन उपलब्ध कराने के लिए, सर्विस वर्कर और Cache Storage API का इस्तेमाल करना

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

बेसिक एचटीएमएल और JavaScript

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

ऐसा ब्राउज़र जो PWA इंस्टॉल करने की सुविधा के साथ काम करता हो

2. सेट अप करना

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

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

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

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

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

index.html - मुख्य ऐप्लिकेशन का एचटीएमएल

3. वेब ऐप्लिकेशन मेनिफ़ेस्ट बनाना

वेब ऐप्लिकेशन की मेनिफ़ेस्ट फ़ाइलें, आपके PWA के बारे में बताती हैं. इससे सर्विस वर्कर के साथ मिलकर ब्राउज़र को यह पता चलता है कि आपके वेब ऐप्लिकेशन को इंस्टॉल किया जा सकता है. साथ ही, यह भी पता चलता है कि इसे उस डिवाइस पर कैसे दिखाया जाए जिस पर इसे इंस्टॉल किया जाएगा. हालांकि, सबसे पहले इसे बनाना होगा. अपने वेब ऐप्लिकेशन के public फ़ोल्डर में manifest.json नाम की फ़ाइल जोड़ें और उसमें यह कोड जोड़ें:

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

iOS डिवाइसों के लिए, Apple टच आइकॉन शामिल करना न भूलें. index.html में मौजूद <head> में, <title> टैग के ठीक बाद, कोड की यह लाइन जोड़ें

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

जानकारी

इस मेनिफ़ेस्ट में ज़रूरी, सुझाए गए, और प्रमोशनल फ़ील्ड शामिल हैं. इसलिए, इसमें कई तरह की जानकारी मौजूद है. सबसे पहले, ज़रूरी फ़ील्ड. इनमें PWA का नाम, स्टार्ट यूआरएल, डिसप्ले मोड, और आइकॉन तय किए जाते हैं. ध्यान दें कि आखिरी आइकॉन, मास्क किया जा सकने वाला आइकॉन है. इससे डिवाइस के यूज़र इंटरफ़ेस (यूआई) के आधार पर, कई आइकॉन दिखाए जा सकते हैं. इसके बाद, थीम और बैकग्राउंड के रंग के लिए सुझाए गए फ़ील्ड होते हैं. आखिर में, प्रमोशन वाले फ़ील्ड, ब्यौरा, और वे कैटगरी दी गई हैं जिनमें यह PWA शामिल है. जब इस मेनिफ़ेस्ट को किसी पीडब्ल्यूए से अटैच किया जाता है, तब ये फ़ील्ड यह कंट्रोल करते हैं कि हमारे पीडब्ल्यूए का इंस्टॉल किया गया ऐप्लिकेशन कैसे दिखेगा और उसे कैसे मैनेज किया जाएगा.

4. PWA से मेनिफ़ेस्ट अटैच करना

मेनिफ़ेस्ट फ़ाइल बनाने के बाद, इसे अटैच करना ज़रूरी है, ताकि इसे पीडब्ल्यूए से जोड़ा जा सके. इसके लिए, index.html खोलें और <head> में <title> टैग के ठीक नीचे यह कोड जोड़ें:

<link rel="manifest" href="/manifest.json" />

इस्तेमाल की जा रही बिल्ड टूल, public डायरेक्ट्री में मौजूद सभी फ़ाइलों को इस तरह से दिखाएगा जैसे वे प्रोजेक्ट के रूट में मौजूद हों. साथ ही, यह पक्का करेगा कि प्रोडक्शन के लिए साइट बनाते समय, उन्हें बिना किसी बदलाव के ट्रांसफ़र किया जाए. पक्का करें कि public डायरेक्ट्री में मौजूद फ़ाइल के यूआरएल को अपने सर्वर रूट की तरह इस्तेमाल किया गया हो. जैसे, हमने यहां किया है.

जानकारी

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

5. शॉर्टकट जोड़ना

अपने PWA को किसी डिवाइस के साथ बेहतर तरीके से इंटिग्रेट करने का एक शानदार तरीका यह है कि अपने ऐप्लिकेशन में किसी खास सुविधा के लिए, कॉन्टेक्स्ट मेन्यू के शॉर्टकट उपलब्ध कराए जाएं. PWA में नाइट मोड टॉगल करने की सुविधा से, mode क्वेरी पैरामीटर को night या day पर सेट करके मोड चुना जा सकता है. manifest.json में दो शॉर्टकट सेट अप करें. ये शॉर्टकट ये काम करते हों:

इस कुकी का इस्तेमाल, PWA को night या day मोड में शुरू करने के लिए किया जाता है
आइकॉन के लिए /images/logo.svg का इस्तेमाल 150x150 साइज़ में करता है

6. बधाई हो!

आपने अभी-अभी वेब ऐप्लिकेशन मेनिफ़ेस्ट फ़ाइल बनाने, उसे वेब पेज से अटैच करने, और इंस्टॉल होने पर ऐप्लिकेशन के शॉर्टकट जोड़ने का तरीका सीखा है.

इस सीरीज़ का अगला कोडलैब, प्रॉम्प्ट करना और इंस्टॉल को मेज़र करना है