प्रोग्रेसिव वेब ऐप्लिकेशन को डीबग करना

वेब ऐप्लिकेशन मेनिफ़ेस्ट, सर्विस वर्कर, और सर्विस वर्कर कैश की जांच करने, उनमें बदलाव करने, और उन्हें डीबग करने के लिए, ऐप्लिकेशन पैनल का इस्तेमाल करें.

प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) आधुनिक और बेहतर क्वालिटी वाले ऐप्लिकेशन होते हैं. इन्हें वेब टेक्नोलॉजी का इस्तेमाल करके बनाया जाता है. PWA, iOS, Android, और डेस्कटॉप ऐप्लिकेशन जैसी सुविधाएं देते हैं. ये सुविधाएं हैं:

• नेटवर्क की स्थिति खराब होने पर भी, भरोसेमंद तरीके से काम करना.
• ऑपरेटिंग सिस्टम की लॉन्चिंग स्क्रीन पर इंस्टॉल किए जा सकना. जैसे, Mac OS X पर ऐप्लिकेशन फ़ोल्डर, Windows पर स्टार्ट मेन्यू, और Android और iOS पर होम स्क्रीन.
• ऐक्टिविटी स्विचर, Spotlight जैसे डिवाइस के सर्च इंजन, और कॉन्टेंट शेयर करने वाली शीट में दिखना.

इस गाइड में, सिर्फ़ ऐप्लिकेशन पैनल की प्रोग्रेसिव वेब ऐप्लिकेशन से जुड़ी सुविधाओं के बारे में बताया गया है. अगर आपको अन्य पैन के बारे में मदद चाहिए, तो इस गाइड का आखिरी सेक्शन, ऐप्लिकेशन पैनल की अन्य गाइड देखें.

खास जानकारी

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

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

अगर आपको यह सुविधा देनी है कि आपके उपयोगकर्ता, आपके ऐप्लिकेशन को Mac OS X पर ऐप्लिकेशन फ़ोल्डर, Windows पर स्टार्ट मेन्यू, और Android और iOS पर होम स्क्रीन में जोड़ सकें, तो आपको वेब ऐप्लिकेशन मेनिफ़ेस्ट की ज़रूरत होगी. मेनिफ़ेस्ट से यह तय होता है कि ऐप्लिकेशन, होम स्क्रीन पर कैसे दिखेगा, होम स्क्रीन से लॉन्च करने पर उपयोगकर्ता को कहां ले जाया जाएगा, और लॉन्च करने पर ऐप्लिकेशन कैसा दिखेगा.

मेनिफ़ेस्ट सेट अप करने के बाद, उसकी जांच करने के लिए ऐप्लिकेशन पैनल के मेनिफ़ेस्ट टैब का इस्तेमाल किया जा सकता है.

• मेनिफ़ेस्ट का सोर्स देखने के लिए, ऐप्लिकेशन मेनिफ़ेस्ट लेबल के नीचे मौजूद लिंक पर क्लिक करें. ऊपर दिए गए स्क्रीनशॉट में, यह manifest.webmanifest है.
• पहचान और प्रज़ेंटेशन सेक्शन में, मेनिफ़ेस्ट सोर्स के फ़ील्ड को ज़्यादा उपयोगकर्ता-अनुकूल तरीके से दिखाया जाता है.
• प्रोटोकॉल हैंडलर सेक्शन में, बटन पर क्लिक करके अपने PWA के यूआरएल प्रोटोकॉल हैंडलर के रजिस्ट्रेशन की जांच की जा सकती है. ज़्यादा जानने के लिए, यूआरएल प्रोटोकॉल हैंडलर के रजिस्ट्रेशन की जांच करना देखें.
• Icons सेक्शन में, तय किए गए सभी आइकॉन दिखते हैं. साथ ही, इसमें आइकॉन के मास्क की जांच की जा सकती है.
• शॉर्टकट #N सेक्शन के सेट में, आपके सभी शॉर्टकट ऑब्जेक्ट की जानकारी दिखती है.
• स्क्रीनशॉट #N सेक्शन के सेट में, आपके ऐप्लिकेशन के बेहतर इंस्टॉलेशन यूज़र इंटरफ़ेस (यूआई) के स्क्रीनशॉट दिखते हैं.

इसके अलावा, अगर DevTools को कोई गड़बड़ी मिलती है, जैसे कि कोई आइकॉन लोड नहीं किया जा सकता, तो मेनिफ़ेस्ट टैब में इंस्टॉल करने की सुविधा सेक्शन दिखता है. इसमें गड़बड़ी के बारे में बताया जाता है.

मास्केबल आइकॉन देखना और उनकी जांच करना

मेनिफ़ेस्ट टैब के आइकॉन सेक्शन में, आपके ऐप्लिकेशन के सभी आइकॉन दिखते हैं. इस सेक्शन में, मास्केबल आइकॉन के लिए सुरक्षित जगहों की जांच भी की जा सकती है. साथ ही, उन आइकॉन के फ़ॉर्मैट की जांच की जा सकती है जो प्लैटफ़ॉर्म के हिसाब से अडजस्ट होते हैं.

आइकॉन को ट्रिम करने के लिए, ताकि सिर्फ़ कम से कम सुरक्षित जगह दिखे, मास्केबल आइकॉन के लिए, कम से कम ज़रूरी जगह दिखाएं पर सही का निशान लगाएं.

अगर आपका पूरा लोगो सुरक्षित जगह में दिखता है, तो यह सही है.

इंस्टॉल करने की सुविधा को ट्रिगर करना

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

अपने PWA को इंस्टॉल करने की सुविधा को ट्रिगर करने के लिए:

1. Chrome में, PWA का लैंडिंग पेज खोलें.

2. सबसे ऊपर, पता बार के दाईं ओर, इंस्टॉल करें पर क्लिक करें.

   

3. स्क्रीन पर दिए गए निर्देशों का पालन करें.

ऐप्लिकेशन इंस्टॉल करें (या कुछ डिवाइसों पर होम स्क्रीन में जोड़ें) सुविधा, मोबाइल डिवाइसों के लिए वर्कफ़्लो की नकल नहीं कर सकती. ध्यान दें कि डेस्कटॉप Chrome ब्राउज़र, पता बार में इंस्टॉल करने का बटन दिखाता है. भले ही, DevTools डिवाइस मोड में हो. हालांकि, अगर अपने ऐप्लिकेशन को डेस्कटॉप में जोड़ा जा सकता है, तो यह मोबाइल पर भी काम करेगा.

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

शॉर्टकट की जांच करना

ऐप्लिकेशन शॉर्टकट की मदद से, उन कुछ सामान्य कार्रवाइयों को तुरंत ऐक्सेस किया जा सकता है जिनकी ज़रूरत उपयोगकर्ताओं को अक्सर होती है.

अपनी मेनिफ़ेस्ट फ़ाइल में तय किए गए शॉर्टकट की जांच करने के लिए, मेनिफ़ेस्ट टैब के शॉर्टकट #N सेक्शन पर जाएं.

बेहतर इंस्टॉलेशन यूज़र इंटरफ़ेस (यूआई) के लिए स्क्रीनशॉट की जांच करना

अपनी मेनिफ़ेस्ट फ़ाइल में ब्यौरा और स्क्रीनशॉट का सेट जोड़ने पर, आपके ऐप्लिकेशन को बेहतर इंस्टॉलेशन डायलॉग मिलता है.

स्क्रीनशॉट की जांच करने के लिए, मेनिफ़ेस्ट टैब के स्क्रीनशॉट #N सेक्शन पर जाएं.

यूआरएल प्रोटोकॉल हैंडलर के रजिस्ट्रेशन की जांच करना

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

अपने हैंडलर की जांच करने के लिए:

1. अपने PWA के लैंडिंग पेज पर DevTools खोलें. उदाहरण के लिए, यह डेमो PWA देखें.
2. डेमो पेज से, PWA इंस्टॉल करें और इंस्टॉल करने के बाद, ऐप्लिकेशन को फिर से लोड करें. अब ब्राउज़र ने PWA को web+coffee प्रोटोकॉल के हैंडलर के तौर पर रजिस्टर कर लिया है.
3. ऐप्लिकेशन > मेनिफ़ेस्ट > प्रोटोकॉल हैंडलर सेक्शन में, वह यूआरएल डालें जिसकी जांच आपको हैंडलर से करानी है. इसके बाद, प्रोटोकॉल की जांच करें पर क्लिक करें. इस उदाहरण में, हैंडलर americano, chai, और latte-macchiato को प्रोसेस कर सकता है.
4. जब Chrome आपसे पूछे कि क्या वह ऐप्लिकेशन खोल सकता है, तो प्रोटोकॉल हैंडलर खोलें पर क्लिक करके पुष्टि करें.
5. अगले डायलॉग में, ऐप्लिकेशन को web+coffee लिंक हैंडल करने की अनुमति दें.

अगर हैंडलर, लिंक को प्रोसेस कर लेता है, तो आपको ऐप्लिकेशन में खुले हुए कॉफ़ी कप की इमेज दिखेगी.

सर्विस वर्कर

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

इसी विषय से जुड़ी गाइड:

• सर्विस वर्कर के बारे में जानकारी
• पुश नोटिफ़िकेशन: समय पर, काम के, और सटीक

ऐप्लिकेशन पैनल में मौजूद सर्विस वर्कर टैब, DevTools में सर्विस वर्कर की जांच करने और उन्हें डीबग करने की मुख्य जगह है.

• अगर फ़िलहाल खुले हुए पेज पर कोई सर्विस वर्कर इंस्टॉल है, तो आपको वह इस टैब पर दिखेगा. उदाहरण के लिए, ऊपर दिए गए स्क्रीनशॉट में, https://airhorner.com/ के दायरे के लिए एक सर्विस वर्कर इंस्टॉल है.
• ऑफ़लाइन चेकबॉक्स, DevTools को ऑफ़लाइन मोड में डालता है. यह ऑफ़लाइन मोड के बराबर है जो नेटवर्क पैनल से उपलब्ध है या कमांड मेन्यू में मौजूद Go offline विकल्प के बराबर है.
• The फिर से लोड करने पर अपडेट करें चेकबॉक्स, सर्विस वर्कर को हर पेज लोड पर अपडेट करने के लिए मजबूर करता है.
• नेटवर्क का इस्तेमाल न करें चेकबॉक्स, सर्विस वर्कर को बायपास करता है और ब्राउज़र को अनुरोध किए गए संसाधनों के लिए नेटवर्क पर जाने के लिए मजबूर करता है.
• नेटवर्क अनुरोध लिंक, आपको नेटवर्क पैनल पर ले जाता है. यहां, सर्विस वर्कर से इंटरसेप्ट किए गए अनुरोधों की सूची (is:service-worker-intercepted फ़िल्टर) दिखती है.
• अपडेट करें लिंक, तय किए गए सर्विस वर्कर को एक बार अपडेट करता है.
• पुश करें बटन, पेलोड के बिना पुश नोटिफ़िकेशन (इसे टिक्ल भी कहा जाता है) की नकल करता है.
• सिंक करें बटन, बैकग्राउंड सिंक इवेंट की नकल करता है.
• रजिस्ट्रेशन रद्द करें लिंक, तय किए गए सर्विस वर्कर का रजिस्ट्रेशन रद्द करता है. सर्विस वर्कर का रजिस्ट्रेशन रद्द करने और बटन पर एक बार क्लिक करके स्टोरेज और कैश को मिटाने का तरीका जानने के लिए, स्टोरेज खाली करें देखें.
• सोर्स लाइन से पता चलता है कि फ़िलहाल चल रहा सर्विस वर्कर कब इंस्टॉल किया गया था. लिंक, सर्विस वर्कर की सोर्स फ़ाइल का नाम होता है. लिंक पर क्लिक करने से, आपको सर्विस वर्कर के सोर्स पर ले जाया जाता है.
• स्टेटस लाइन से, सर्विस वर्कर का स्टेटस पता चलता है. इस लाइन पर मौजूद नंबर (स्क्रीनशॉट में #16) से पता चलता है कि सर्विस वर्कर को कितनी बार अपडेट किया गया है. अगर आपने फिर से लोड करने पर अपडेट करें चेकबॉक्स को चालू किया है, तो आपको दिखेगा कि हर पेज लोड पर नंबर बढ़ता है. स्टेटस के बगल में, आपको शुरू करें लिंक (अगर सर्विस वर्कर बंद है) या बंद करें लिंक (अगर सर्विस वर्कर चल रहा है) दिखेगा. सर्विस वर्कर को किसी भी समय ब्राउज़र से बंद और चालू किया जा सकता है. बंद करें लिंक का इस्तेमाल करके, अपने सर्विस वर्कर को साफ़ तौर पर बंद करने से, इसकी नकल की जा सकती है. अपने सर्विस वर्कर को बंद करना, यह जांचने का एक शानदार तरीका है कि सर्विस वर्कर के फिर से चालू होने पर आपका कोड कैसा काम करता है. इससे, अक्सर स्थायी ग्लोबल स्टेट के बारे में गलत अनुमानों की वजह से होने वाली गड़बड़ियां सामने आती हैं.
• क्लाइंट लाइन से पता चलता है कि सर्विस वर्कर किस ऑरिजिन के दायरे में है. फ़ोकस करें बटन, ज़्यादातर तब काम आता है, जब आपके पास एक से ज़्यादा रजिस्टर किए गए सर्विस वर्कर हों. अगर किसी ऐसे सर्विस वर्कर के बगल में मौजूद फ़ोकस करें बटन पर क्लिक किया जाता है जो किसी दूसरे टैब में चल रहा है, तो Chrome उस टैब पर फ़ोकस करता है.

• अपडेट साइकल टेबल में, सर्विस वर्कर की गतिविधियां और उनके लिए बीता समय दिखता है. जैसे, इंस्टॉल करना, इंतज़ार करना, और चालू करना. हर गतिविधि का सटीक टाइमस्टैंप देखने के लिए, बड़ा करें बटन पर क्लिक करें.

  

  ज़्यादा जानकारी के लिए, सर्विस वर्कर का लाइफ़साइकल देखें.

अगर सर्विस वर्कर की वजह से कोई गड़बड़ी होती है, तो सर्विस वर्कर टैब में गड़बड़ी आइकॉन दिखता है. सोर्स लाइन के बगल में, गड़बड़ियों की संख्या दिखती है. नंबर वाला लिंक, आपको कंसोल पर ले जाता है. यहां, लॉग की गई सभी गड़बड़ियां दिखती हैं.

सभी सर्विस वर्कर के बारे में जानकारी देखने के लिए, सर्विस वर्कर टैब में सबसे नीचे, सभी रजिस्ट्रेशन देखें पर क्लिक करें. यह लिंक, आपको chrome://serviceworker-internals/?devtools पर ले जाता है. यहां, अपने सर्विस वर्कर को और डीबग किया जा सकता है.

सर्विस वर्कर कैश

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

ध्यान दें कि पहली बार कैश खोलने और उसमें कोई संसाधन जोड़ने पर, हो सकता है कि DevTools बदलाव का पता न लगा पाए. पेज को फिर से लोड करें. इसके बाद, आपको कैश दिखेगा.

अगर आपने दो या इससे ज़्यादा कैश खोले हैं, तो वे आपको कैश स्टोरेज ड्रॉप-डाउन के नीचे दिखेंगे.

इस्तेमाल किया गया कोटा

कैश स्टोरेज टैब में मौजूद कुछ रिस्पॉन्स को "ओपेक" के तौर पर फ़्लैग किया जा सकता है. इसका मतलब है कि किसी दूसरे ऑरिजिन से रिस्पॉन्स मिला है. जैसे, CDN या रिमोट एपीआई से, जब CORS चालू नहीं होता है.

क्रॉस-डोमेन जानकारी लीक होने से बचाने के लिए, स्टोरेज कोटा की सीमाएं (यानी, QuotaExceeded अपवाद थ्रो किया गया है या नहीं) और navigator.storage API से रिपोर्ट किए गए ओपेक रिस्पॉन्स के साइज़ में, काफ़ी पैडिंग जोड़ी जाती है.

इस पैडिंग की जानकारी, ब्राउज़र के हिसाब से अलग-अलग होती है. हालांकि, Google Chrome के लिए, इसका मतलब है कि कैश किए गए किसी भी ओपेक रिस्पॉन्स का कम से कम साइज़, कुल स्टोरेज के इस्तेमाल में करीब 7 मेगाबाइट का योगदान देता है. आपको यह बात ध्यान में रखनी चाहिए कि आपको कितने ओपेक रिस्पॉन्स कैश करने हैं. ऐसा इसलिए, क्योंकि ओपेक संसाधनों के असल साइज़ के आधार पर, स्टोरेज कोटा की सीमाएं आसानी से पार की जा सकती हैं.

इसी विषय से जुड़ी गाइड:

• Stack Overflow: ओपेक रिस्पॉन्स पर कौनसी सीमाएं लागू होती हैं?
• Workbox: स्टोरेज कोटा के बारे में जानकारी

स्टोरेज खाली करें

स्टोरेज खाली करें टैब, प्रोग्रेसिव वेब ऐप्लिकेशन डेवलप करते समय बहुत काम की सुविधा है. इस टैब की मदद से, बटन पर एक बार क्लिक करके सर्विस वर्कर का रजिस्ट्रेशन रद्द किया जा सकता है. साथ ही, सभी कैश और स्टोरेज को मिटाया जा सकता है. ज़्यादा जानने के लिए, नीचे दिया गया सेक्शन देखें.

इसी विषय से जुड़ी गाइड:

• स्टोरेज खाली करें

ऐप्लिकेशन पैनल की अन्य गाइड

ऐप्लिकेशन पैनल के अन्य पैन के बारे में ज़्यादा मदद पाने के लिए, नीचे दी गई गाइड देखें.

इसी विषय से जुड़ी गाइड:

• पेज के संसाधन की जांच करना
• लोकल स्टोरेज और कैश की जांच करना और उन्हें मैनेज करना