यह मॉडर्न प्रोग्रेसिव वेब ऐप्लिकेशन डेवलपमेंट के हर पहलू के बारे में जानकारी देता है.
इस कोर्स में, प्रोग्रेसिव वेब ऐप्लिकेशन डेवलपमेंट की बुनियादी बातों को आसानी से समझने में आसान तरीके से समझाया गया है. नीचे दिए गए मॉड्यूल में, आपको जानकारी मिलेगी कि प्रोग्रेसिव वेब ऐप्लिकेशन क्या है, इसे कैसे बनाया जाता है या अपने मौजूदा वेब कॉन्टेंट को कैसे अपग्रेड किया जाता है, और ऑफ़लाइन और इंस्टॉल किए जा सकने वाले ऐप्लिकेशन में सभी चीज़ों को जोड़ने का तरीका बताया जाएगा. मॉड्यूल पर जाने के लिए मेन्यू पैनल का इस्तेमाल करें. (यह मेन्यू डेस्कटॉप पर बाईं ओर या मोबाइल पर हैमबर्गर मेन्यू के पीछे होता है.)
इसमें आपको वेब ऐप्लिकेशन मेनिफ़ेस्ट, सर्विस वर्कर, ऐप्लिकेशन को ध्यान में रखकर डिज़ाइन करने, दूसरे टूल का इस्तेमाल करके अपने PWA को टेस्ट और डीबग करने के तरीके जैसी PWA की बुनियादी बातें पता चलेंगी. इन बुनियादी चीज़ों के बारे में जानने के बाद, आपको प्लैटफ़ॉर्म और ऑपरेटिंग सिस्टम के साथ इंटिग्रेशन, PWA को इंस्टॉल करने और इस्तेमाल करने के अनुभव को बेहतर बनाने के बारे में जानकारी मिलेगी. साथ ही, आपको ऑफ़लाइन अनुभव देने का तरीका भी पता चलेगा.
हर मॉड्यूल में इंटरैक्टिव डेमो और खुद आकलन करने की सुविधा शामिल है, ताकि आप अपनी समझ को परख सकें. प्रोग्रेसिव वेब ऐप्लिकेशन बनाने की बुनियादी बातों को समझने के लिए, कोड के साथ गेम खेलते समय अपने मोबाइल फ़ोन, टैबलेट या लैपटॉप पर डेमो की जांच की जा सकती है और उसे आज़माया जा सकता है.
यह कोर्स बिगिनर और ऐडवांस लेवल के वेब डेवलपर, दोनों के लिए बनाया गया है. PWA को ऊपर से नीचे तक के बारे में समझने के लिए, सीरीज़ को शुरू से आखिर तक देखा जा सकता है. इसके अलावा, इसे चुनिंदा विषयों के रेफ़रंस के तौर पर भी इस्तेमाल किया जा सकता है. वेब डेवलपमेंट के लिए नए लोगों को आगे बढ़ने के लिए आपको एचटीएमएल, सीएसएस, और JavaScript के आधार पर तैयार होना होगा. एमडीएन पर सीएसएस के बारे में जानें. साथ ही, एचटीएमएल और JavaScript के कोर्स देखें.
यहां बताया गया है कि आपको क्या जानकारी मिलेगी:
शुरू करना
अगर आपको प्रोग्रेसिव वेब ऐप्लिकेशन बनाना है, तो आप सोच रहे होंगे कि कहां से शुरू किया जाए, नए सिरे से शुरू किए बिना वेबसाइट को PWA में अपग्रेड किया जा सकता है या नहीं या प्लैटफ़ॉर्म के हिसाब से बने ऐप्लिकेशन से PWA में कैसे स्विच किया जा सकता है. इस लेख से, आपको इन सवालों के जवाब पाने में मदद मिलेगी.
बुनियादी जानकारी
सभी प्रोग्रेसिव वेब ऐप्लिकेशन, अपनी मूल और मॉडर्न वेबसाइट हैं. इसलिए, यह ज़रूरी है कि आपकी वेबसाइट के पास रिस्पॉन्सिव डिज़ाइन, मोबाइल, सबसे पहले, मूल डिज़ाइन, और वेब परफ़ॉर्मेंस के मामले में एक मज़बूत आधार हो.
ऐप्लिकेशन डिज़ाइन
प्रोग्रेसिव वेब ऐप्लिकेशन और क्लासिक वेबसाइटों और वेब ऐप्लिकेशन के बीच के मुख्य अंतरों में से एक है, उन्हें इंस्टॉल करना. इससे प्लैटफ़ॉर्म और ऑपरेटिंग सिस्टम में एक जैसा अनुभव मिलता है. इंस्टॉल करने की सुविधा, नई सुविधाएं और ज़िम्मेदारी देती है, क्योंकि हमारे पास अपने कॉन्टेंट के लिए ब्राउज़र का यूज़र इंटरफ़ेस नहीं होता.
ऐसेट और डेटा
प्रोग्रेसिव वेब ऐप्लिकेशन ऐसी वेबसाइट होती है जिसकी सभी ऐसेट वेब पर बिलकुल समान होती हैं. हालांकि, इसमें नए टूल उपलब्ध हैं. इनकी मदद से, वे ऐसेट ऑनलाइन होने पर तेज़ी से लोड हो सकती हैं और ऑफ़लाइन उपलब्ध हो जाती हैं.
सर्विस वर्कर
सर्विस वर्कर, PWA का बुनियादी हिस्सा हैं. इन डिवाइसों में तेज़ी से लोड होने की सुविधा (चाहे नेटवर्क कुछ भी हो), ऑफ़लाइन ऐक्सेस, पुश नोटिफ़िकेशन, और अन्य सुविधाएं मिलती हैं.
कैश मेमोरी में सेव करना
डिवाइस पर एसेट डाउनलोड करने, सेव करने, मिटाने या अपडेट करने के लिए, कैश मेमोरी एपीआई का इस्तेमाल किया जा सकता है. इसके बाद, इन ऐसेट को नेटवर्क अनुरोध के बिना ही डिवाइस पर इस्तेमाल किया जा सकता है.
दिखाया जा रहा है
सर्विस वर्कर के फ़ेच इवेंट का इस्तेमाल करके, नेटवर्क अनुरोधों को रोका जा सकता है और अलग-अलग तकनीकों का इस्तेमाल करके रिस्पॉन्स दिया जा सकता है.
वर्कबॉक्स
वर्कबॉक्स, मॉड्यूल का एक सेट है जो रूटिंग और कैशिंग जैसे सामान्य सर्विस वर्कर इंटरैक्शन को आसान बनाता है. हर मॉड्यूल सर्विस वर्कर डेवलपमेंट के एक खास पहलू के बारे में बताता है. Workbox का मकसद, सर्विस वर्कर के इस्तेमाल को जितना हो सके उतना आसान बनाना है. साथ ही, ऐप्लिकेशन की जटिल शर्तों को पूरा करने की सुविधा देना है.
ऑफ़लाइन डेटा
ऑफ़लाइन अनुभव को बेहतर बनाने के लिए, आपको स्टोरेज मैनेजमेंट लागू करना होगा. IndexedDB, कैश, स्टोरेज मैनेजर, परसिस्टेंट स्टोरेज, और कॉन्टेंट इंडेक्स जैसे टूल मददगार हो सकते हैं.
इंस्टॉल करना
इंस्टॉल किए गए ऐप्लिकेशन आसानी से ऐक्सेस किए जा सकते हैं. साथ ही, इनसे ओएस के साथ ज़्यादा बेहतर इंटिग्रेशन का फ़ायदा भी मिल सकता है. अपने PWA को इंस्टॉल करने का तरीका जानें और उसके फ़ायदे पाएं.
वेब ऐप्लिकेशन मेनिफ़ेस्ट
वेब ऐप्लिकेशन मेनिफ़ेस्ट एक JSON फ़ाइल है. इससे तय होता है कि PWA को इंस्टॉल किए गए ऐप्लिकेशन के तौर पर कैसे माना जाना चाहिए. इसमें ऑपरेटिंग सिस्टम के रंग-रूप, और उसके बुनियादी व्यवहार की जानकारी भी शामिल है.
इंस्टॉल करने का अनुरोध
PWA इंस्टॉल करने की ज़रूरी शर्तों को पूरा करने वाली साइटों के लिए, ब्राउज़र एक इवेंट ट्रिगर करता है. इस इवेंट में, उपयोगकर्ता से ऐप्लिकेशन इंस्टॉल करने का अनुरोध किया जाता है. अच्छी बात यह है कि इस इवेंट का इस्तेमाल करके, प्रॉम्प्ट को अपनी पसंद के मुताबिक बनाया जा सकता है. साथ ही, लोगों को ऐप्लिकेशन इंस्टॉल करने का न्योता भी भेजा जा सकता है.
अपना
हो सकता है कि आपके PWA को अपडेट करने की ज़रूरत हो. इस चैप्टर में आपको ऐसे टूल मिलते हैं जिनसे आपके PWA के अलग-अलग हिस्सों को ऐसेट से लेकर मेटाडेटा तक अपडेट किया जा सकता है.
बेहतर बनाना
आपके उपयोगकर्ता को अच्छा अनुभव मिलने की उम्मीद हो. इस चैप्टर में, आपको स्प्लैश स्क्रीन, ऐप्लिकेशन शॉर्टकट, और सेशन के काम करने के तरीके की मदद से, अपने PWA को बेहतर बनाने का तरीका बताया जाएगा.
पहचान करना
उपयोगकर्ता आपके ऐप्लिकेशन से कैसे इंटरैक्ट करते हैं, इसकी पहचान करने से उपयोगकर्ता अनुभव को पसंद के मुताबिक बनाने और उसे बेहतर बनाने में मदद मिलती है. उदाहरण के लिए, यह देखा जा सकता है कि आपका ऐप्लिकेशन उपयोगकर्ता के डिवाइस पर पहले से इंस्टॉल है या नहीं. साथ ही, ब्राउज़र से नेविगेशन को स्टैंडअलोन ऐप्लिकेशन पर ट्रांसफ़र करने जैसी सुविधाओं को लागू किया जा सकता है.
ओएस इंटिग्रेशन
आपका PWA अब ब्राउज़र के बाहर काम करता है. इस चैप्टर में बताया गया है कि उपयोगकर्ताओं के आपके ऐप्लिकेशन को इंस्टॉल करने के बाद, उन्हें ऑपरेटिंग सिस्टम के साथ कैसे इंटिग्रेट किया जा सकता है.
विंडो मैनेजमेंट
ब्राउज़र के बाहर मौजूद PWA अपनी विंडो को खुद मैनेज करता है. इस चैप्टर में, ऑपरेटिंग सिस्टम में विंडो को मैनेज करने के लिए, एपीआई और सुविधाओं के बारे में बताया गया है.
एक्सपेरिमेंट के तौर पर उपलब्ध सुविधाएं
ऐसी कुछ PWA सुविधाएं हैं जिन पर अभी काम चल रहा है. इन्हें डेवलप किया जा सकता है. इस चैप्टर में, आपको Fugu प्रोजेक्ट के बारे में जानकारी मिलेगी. साथ ही, यह भी बताया जाएगा कि ऑरिजिन ट्रायल के लिए साइन अप कैसे करना है और प्रयोग वाले एपीआई इस्तेमाल करने का तरीका क्या है.
टूल और डीबग
हम आपके प्रोग्रेसिव वेब ऐप्लिकेशन को डेवलप करने, डीबग करने, और टेस्ट करने के लिए उपलब्ध टूल को एक्सप्लोर करेंगे.
स्ट्रक्चर
PWA बनाते समय आपको कुछ फ़ैसले लेने होते हैं. जैसे, एक पेज का ऐप्लिकेशन बनाना है या कई पेजों वाला ऐप्लिकेशन बनाना है और आपको इसे अपने डोमेन के रूट में होस्ट करना है या फ़ोल्डर में.
जटिलता मैनेज करना
किसी वेब ऐप्लिकेशन को आसान बनाना बहुत ही मुश्किल हो सकता है. इस मॉड्यूल में, आपको पता चलेगा कि वेब एपीआई, थ्रेडिंग के साथ कैसे काम करते हैं. साथ ही, आपको यह भी पता चलेगा कि स्टेट मैनेजमेंट जैसे सामान्य PWA पैटर्न के लिए इसका इस्तेमाल कैसे किया जा सकता है.
क्षमताएं
PWA का इस्तेमाल, सिर्फ़ स्क्रीन पर नहीं किया जा सकता. यह चैप्टर हार्डवेयर, सेंसर, और प्लैटफ़ॉर्म के इस्तेमाल के मामले में PWA की मौजूदा सुविधाओं के बारे में है.
निष्कर्ष
अगले चरण और संसाधन.
तो क्या आप PWA सीखने के लिए तैयार हैं?