प्रोग्रेसिव वेब ऐप्लिकेशन एक वेबसाइट होती है. इसकी सभी ऐसेट, वेब जैसी ही होती हैं. हालांकि, इसमें नए टूल का इस्तेमाल किया गया है, जिनकी मदद से इन ऐसेट के ऑनलाइन होने पर तेज़ी से लोड किया जा सकता है और ऑफ़लाइन होने पर इस्तेमाल किया जा सकता है.
ऐप्लिकेशन के कॉम्पोनेंट
ऐप्लिकेशन डेवलप करने में आम तौर पर कई एसेट और संसाधन शामिल होते हैं. इनमें लॉजिक और कोड (कंपोज़ किए गए या नहीं) से लेकर स्क्रीन डिज़ाइन, इमेज, लोगो, और फ़ॉन्ट जैसे यूज़र इंटरफ़ेस एलिमेंट तक शामिल होते हैं.
प्रोग्रेसिव वेब ऐप्लिकेशन एक वेबसाइट होती है, इसलिए इसकी सभी ऐसेट, वेब पर एक जैसी होती हैं:
- कॉन्टेंट और शुरुआती पेज रेंडरिंग के लिए एचटीएमएल.
- लॉजिक के लिए JavaScript, जिसमें WebAssembly मॉड्यूल (कंपाइल किया गया कोड) चलाने और हार्डवेयर के हिसाब से 2D और 3D ग्राफ़िक को रेंडर करने की सुविधा शामिल है.
- लेआउट, स्टाइलिंग, और ऐनिमेशन के लिए सीएसएस.
- PNG, JPEG, WebP, और SVG जैसे वेब फ़ॉर्मैट में मौजूद इमेज.
- वेब फ़ॉर्मैट में वीडियो, जैसे कि MPEG-4 और WebM.
- वेब फ़ॉन्ट.
- JSON या अन्य फ़ॉर्मैट में डेटा.
डिफ़ॉल्ट रूप से, वेबसाइटें, नेटवर्क पर ऐसेट डाउनलोड करती हैं. ये ऐसेट एचटीएमएल से शुरू करके, बाकी रिसॉर्स के हिसाब से डाउनलोड की जाती हैं.
तेज़ी से लोड होने और ऑफ़लाइन उपलब्ध रहने के लिए उन संसाधनों को मैनेज करना, वेब के लिए एक चुनौती थी. मौजूदा समय में, PWA उन सुविधाओं का ही इस्तेमाल करते हैं जो पहले सिर्फ़ प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन के साथ जोड़ी जाती थीं.
प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन बनाम PWA
प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन इंस्टॉल करने पर, आम तौर पर एक ऐसा पैकेज डाउनलोड होता है जिसमें ऐप्लिकेशन की सभी एसेट शामिल होती हैं: कोड, इमेज, फ़ॉन्ट, वीडियो वगैरह. इसलिए, ये सभी संसाधन आपके डिवाइस के स्टोरेज से, ऐप्लिकेशन के ऑफ़लाइन होने पर भी उपलब्ध होंगे.
वहीं दूसरी ओर, जब ज़रूरत हो, तब एसेट डाउनलोड करने के लिए क्लासिक वेबसाइट को इंटरनेट की ज़रूरत होती है. अगर आप ऑफ़लाइन हैं, तो आपको ब्राउज़र से गड़बड़ी का मैसेज दिखेगा. ऐसा इसलिए होगा, क्योंकि कोई ऐसेट क्लाइंट-साइड मौजूद नहीं है.
PWA का तरीका, प्लैटफ़ॉर्म के हिसाब से इस्तेमाल होने वाले ऐप्लिकेशन की तरह कुछ या सभी ऐसेट को क्लाइंट-साइड पर उपलब्ध कराकर, वेब के पारंपरिक अनुभव को बेहतर बनाता है. इसलिए, जब कोई PWA खोला जाता है, तो शुरुआती रेंडरिंग, किसी प्लैटफ़ॉर्म ऐप्लिकेशन की तरह ही तुरंत हो सकती है. इसकी वजह यह है कि ऐसेट, नेटवर्क के बिना भी उपलब्ध होती हैं.
कैश मेमोरी और स्टोरेज
वेब की शुरुआत से ही, डेवलपर के पास किसी संसाधन को कैश मेमोरी में सेव करने का पूरा कंट्रोल नहीं था. ब्राउज़र, एचटीटीपी कैश मेमोरी पर काम करता है. यह अलग-अलग नीतियों के मुताबिक संसाधनों को कैश मेमोरी में सेव कर सकता है और नहीं भी उपलब्ध करा सकता है. Web Storage और IndexedDB जैसे स्टोरेज के अन्य विकल्पों को, आसान डेटा और ऑब्जेक्ट को सेव करने के लिए बनाया गया था.
PWA को अपने कॉन्टेंट के लिए, सिर्फ़ उन नीतियों पर भरोसा करने की ज़रूरत नहीं है. इसके बजाय, हमारे पास ऐसे समाधान हैं जिनसे यह बेहतर तरीके से कंट्रोल किया जा सकता है कि संसाधनों को कब और कैसे कैश मेमोरी में सेव करना है. साथ ही, उन्हें स्थानीय तौर पर कब और कैसे डिलीवर करना है: कैश स्टोरेज एपीआई. वेब पर क्लाइंट-साइड स्टोरेज के लिए कुछ सुविधाएं उपलब्ध हैं:
- वेब स्टोरेज: इसमें
localStorageऔरsessionStorageशामिल हैं. ये एपीआई, आसान कुंजी/वैल्यू स्ट्रिंग पेयर को स्टोर करते हैं. वेब स्टोरेज सीमित होता है और इसमें सिंक्रोनस एपीआई होता है. इसलिए, जहां तक हो सके, इससे बचना चाहिए. - IndexedDB: यह एसिंक्रोनस एपीआई वाला ऑब्जेक्ट-आधारित डेटाबेस (No-SQL) है. यह वेब परफ़ॉर्मेंस के लिए अच्छा होता है. IndexedDB, स्ट्रक्चर्ड और बाइनरी डेटा क्लाइंट-साइड को स्टोर कर सकता है. आम तौर पर, इसका इस्तेमाल डेटा को स्टोर करने के लिए किया जाता है. जैसे, डेटा को सेव करने के लिए या एपीआई अनुरोध के तौर पर भेजने के लिए. डेटा को तुरंत स्थानीय तौर पर सेव करना और बाद में उसे सर्वर से सिंक करना भी मददगार होता है. IndexedDB API का इस्तेमाल, डेटाबेस से इंटरैक्ट करने के लिए किया जाता है.
- कैश मेमोरी: यह एचटीटीपी अनुरोध और रिस्पॉन्स पेयर का एक ऐसा कलेक्शन होता है जिसका इस्तेमाल संसाधनों को उनके एचटीटीपी हेडर के साथ सेव और वापस पाने के लिए किया जा सकता है. ठीक उसी तरह, जैसे वे सर्वर से डिलीवर किए जाते हैं. कैश मेमोरी एपीआई आपको नेटवर्क के अनुरोधों को सेव करने, वापस पाने, अपडेट करने, और मिटाने की सुविधा देता है. जैसे, अपनी एसेट के लिए, ऑफ़लाइन होने पर भी.
सर्विस वर्कर की ज़रूरत
PWA अपनी ऐसेट को कैश स्टोरेज और IndexedDB में सेव कर सकता है. लेकिन, हम आपके उपयोगकर्ताओं को तेज़ और ऑफ़लाइन अनुभव देने के लिए, उन ऐसेट का इस्तेमाल कैसे कर सकते हैं. जवाब? सर्विस वर्कर.
सर्विस वर्कर की मदद से, नेटवर्क पर जाए बिना एसेट इस्तेमाल की जा सकती हैं, किसी उपयोगकर्ता को सूचनाएं भेजी जा सकती हैं, अपने PWA आइकॉन पर बैज जोड़ा जा सकता है, बैकग्राउंड में कॉन्टेंट अपडेट किया जा सकता है, और अपने पूरे PWA को ऑफ़लाइन भी काम किया जा सकता है. अगले चैप्टर में, सर्विस वर्कर के बारे में ज़्यादा जानें.
ऑफ़लाइन होने पर भी इस्तेमाल के लिए तैयार
उपयोगकर्ता उम्मीद करते हैं कि आपका ऐप्लिकेशन तेज़ और हमेशा तैयार रहने वाला अनुभव देगा. इसका मतलब है कि आपका ऐप्लिकेशन ऑफ़लाइन काम करना चाहिए.
ऑफ़लाइन होने के लिए तैयार होने का मतलब यह नहीं है कि आपकी सारी सामग्री या सेवाएं इंटरनेट के बिना भी उपलब्ध होनी चाहिए. हालांकि, उपयोगकर्ता के ऑफ़लाइन होने पर, उसे कम से कम एक सामान्य अनुभव होना चाहिए. जैसे, जारी रखने के लिए कोई ऐसा पेज जो आपको इंटरनेट से कनेक्ट करने के लिए कहता है. इससे ब्राउज़र की सामान्य गड़बड़ी के बजाय, उपयोगकर्ता को आपके ऐप्लिकेशन के अनुभव में बने रहने से बेहतर उपयोगकर्ता अनुभव मिलेगा. कुछ ब्राउज़र में PWA इंस्टॉल करने की ज़रूरी शर्तों को पूरा करने के लिए, यह सुविधा ज़रूरी है. कैश मेमोरी में सेव किए गए कॉन्टेंट के साथ, अपने PWA का यूज़र इंटरफ़ेस दिखाना बेहतर होता है. उपयोगकर्ताओं को अपने PWA का इस्तेमाल जारी रखने और सर्वर के ऑनलाइन होने पर, उन्हें सिंक करने की सुविधा देना, ऑफ़लाइन काम करने का सबसे बेहतरीन तरीका है.
अपने ऐप्लिकेशन को ऑफ़लाइन उपलब्ध कराने के लिए, आपको अपने ऑफ़लाइन अनुभव के लिए ज़रूरी एसेट को कैश मेमोरी में सेव करना होगा और बाद में अपने सर्विस वर्कर को उन्हें उपलब्ध कराना होगा. ऑफ़लाइन एसेट की ज़रूरत होने से पहले उन्हें अपने कैश मेमोरी में जोड़ना न भूलें. यह एक ऐसा खास मामला है जिसमें अनुरोध किए जाने पर उन्हें कैश मेमोरी में सेव नहीं किया जा सकता.
अक्सर इस्तेमाल की जाने वाली कैश मेमोरी के तरीके
आपके PWA में, सभी फ़ैसले आपके पास होते हैं. आपके पास अपनी ज़रूरतों के हिसाब से ऐसेट को कैश मेमोरी में सेव करने या इंस्टॉल करने का सबसे अच्छा तरीका चुनने का विकल्प होता है. ये रहे कुछ फ़ैसले:
- प्रीकैशिंग: वे ऐसेट चुनें जिन्हें आपको पहली बार लोड होने पर इंस्टॉल करना है. उनमें एचटीएमएल और कम से कम ऐसेट शामिल होनी चाहिए, ताकि ऐप्लिकेशन रेंडर हो सके. प्रीकैश मेमोरी का इस्तेमाल करते समय, ध्यान रखें कि डिवाइस के स्पेस और नेटवर्क का इस्तेमाल किया जा रहा हो. एसेट डाउनलोड करते समय और उन्हें कैश मेमोरी में सेव करते समय, सावधानी और ज़िम्मेदारी का इस्तेमाल करें.
- ज़रूरत के हिसाब से कैश मेमोरी: एसेट का अनुरोध किए जाने पर, उन्हें कैश मेमोरी में जोड़ने के लिए इस्तेमाल किया जाता है. आम तौर पर, ये ऐसी ऐसेट होती हैं जो आपके ऐप्लिकेशन वर्शन के बिना भी बदल सकती हैं. जैसे, इमेज या कॉन्टेंट. ज़रूरत के हिसाब से कैश मेमोरी में सेव करने के तरीके के बारे में जानने के लिए, कैश मेमोरी में सेव करना सेक्शन देखें.
- एपीआई और वेब सेवाएं: एपीआई कॉल को कैश मेमोरी में सेव किया जा सकता है या एपीआई रिस्पॉन्स को कैश मेमोरी में सेव करने के बजाय, उनका डेटा IndexedDB में सेव किया जा सकता है.
ऐसेट अपडेट की जा रही हैं
ऐप्लिकेशन कैटलॉग से इंस्टॉल किए गए ऐप्लिकेशन के स्टैंडर्ड ऐप्लिकेशन मॉडल में, जब डेवलपर को अपना ऐप्लिकेशन अपडेट करना होता है, तो वे एक नया पैकेज पब्लिश करते हैं. उपयोगकर्ताओं को पूरा पैकेज फिर से डाउनलोड करना होगा, भले ही ज़्यादातर एसेट में कोई बदलाव न हुआ हो. PWA में, ऊपर दिए गए सेक्शन में दिए गए तरीकों का इस्तेमाल करके, यह तय किया जा सकता है कि ऐसेट को कैसे और कब अपडेट करना है. यहां ऐसेट अपडेट करने के अलग-अलग विकल्प दिए गए हैं:
- पूरा अपडेट: इस मामले में, जब भी ऐप्लिकेशन में कोई मामूली बदलाव किया जाता है, तो आपके कोड से सभी ऐसेट फिर से कैश मेमोरी में डाउनलोड हो जाएंगी.
- कुछ हद तक अपडेट: इस तरीके में, यह तय करने का एक तरीका बनाया जाता है कि कौनसी ऐसेट अपडेट की गई हैं. साथ ही, उपयोगकर्ता की सहमति के बिना या उनके बिना, सिर्फ़ उन ऐसेट को अपडेट किया जा सकता है.
- लगातार अपडेट: इस तकनीक का इस्तेमाल करने से, हर PWA का इस्तेमाल करने पर आपकी एसेट की जांच की जाएगी और उन्हें अपने-आप अपडेट किया जाएगा
साइज़ और लाइफ़स्पैन
आम तौर पर, प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन में साइज़ की सीमाओं के तहत कोई कार्रवाई नहीं की जाती. इंस्टॉल किए जाने के दौरान, ऐप्लिकेशन का साइज़ गीगाबाइट या उससे ज़्यादा हो सकता है. जब तक डिवाइस में क्षमता है, तब तक इंस्टॉलेशन की अनुमति होगी. साथ ही, ऐप्लिकेशन इंस्टॉल होने के दौरान, वह कुल स्टोरेज का ही इस्तेमाल करेगा. इससे कोई फ़र्क़ नहीं पड़ता कि ऐप्लिकेशन का इस्तेमाल किया जा रहा है या नहीं. PWA के लिए, स्टोरेज को अलग तरीके से मैनेज किया जाता है. ब्राउज़र आपकी एसेट को उन नीतियों के मुताबिक सेव करेगा जिन्हें आपने PWA के लॉजिक में तय किया है.
साइज़ की सीमाएं, ब्राउज़र पर निर्भर करती हैं. यह प्लैटफ़ॉर्म के हिसाब से काम करने वाले ऐप्लिकेशन की तरह सुविधाजनक नहीं है, लेकिन आम तौर पर यह ज़्यादातर वेब ऐप्लिकेशन के लिए काफ़ी है. इस लेख में, ब्राउज़र के हिसाब से जिन सीमाओं के बारे में जानकारी दी गई है वे देखें.
अगर उपयोगकर्ता, ब्राउज़र में आपके PWA का इस्तेमाल कर रहा है, तो स्टोरेज ज़्यादा होने या कुछ हफ़्तों तक कोई गतिविधि न होने के आधार पर, ब्राउज़र एसेट को हटा सकते हैं. कुछ प्लैटफ़ॉर्म पर, अगर उपयोगकर्ता आपका PWA इंस्टॉल करता है, तो आपको ऐप्लिकेशन से नहीं हटाया जाएगा. उपलब्ध होने पर, कोड किसी एपीआई की मदद से स्थायी स्टोरेज का अनुरोध कर सकता है, ताकि उसे हटाया न जा सके.