वेब ऐप्लिकेशन मेनिफ़ेस्ट, सर्विस वर्कर, और सर्विस वर्कर कैश मेमोरी की जांच करने, उनमें बदलाव करने, और उन्हें डीबग करने के लिए ऐप्लिकेशन पैनल का इस्तेमाल करें.
प्रोग्रेसिव वेब ऐप्लिकेशन (पीडब्ल्यूए), आधुनिक और अच्छी क्वालिटी वाले ऐसे ऐप्लिकेशन हैं जिन्हें वेब टेक्नोलॉजी का इस्तेमाल करके बनाया जाता है. PWA, iOS, Android, और डेस्कटॉप ऐप्लिकेशन जैसी सुविधाएं देते हैं. कैंपेन के तीनों सब-टाइप के नाम ये रहे:
- नेटवर्क खराब होने पर भी भरोसेमंद.
- ऑपरेटिंग सिस्टम के सरफ़ेस लॉन्च करने के लिए इंस्टॉल किया जा सकता है, जैसे कि Mac OS X पर Applications फ़ोल्डर, Windows पर Start मेन्यू, और Android और iOS पर होम स्क्रीन.
- गतिविधि स्विचर, Spotlight जैसे डिवाइस सर्च इंजन, और कॉन्टेंट शेयर करने वाली शीट में दिखें.
इस गाइड में, सिर्फ़ ऐप्लिकेशन पैनल के प्रोग्रेसिव वेब ऐप्लिकेशन की सुविधाओं के बारे में बताया गया है. अगर आपको दूसरे पैनल में मदद चाहिए, तो इस गाइड का आखिरी सेक्शन, अन्य ऐप्लिकेशन पैनल गाइड देखें.
खास जानकारी
- अपने वेब ऐप्लिकेशन मेनिफ़ेस्ट की जांच करने के लिए, मेनिफ़ेस्ट टैब का इस्तेमाल करें.
- सर्विस वर्कर से जुड़े कई कामों के लिए, सर्विस वर्कर टैब का इस्तेमाल करें. जैसे, किसी सेवा को अनरजिस्टर करना या अपडेट करना, पुश इवेंट को एमुलेट करना, ऑफ़लाइन जाना या किसी सर्विस वर्कर को रोकना.
- कैश मेमोरी टैब से अपने सर्विस वर्कर की कैश मेमोरी देखें.
- स्टोरेज मिटाएं टैब में जाकर, किसी सेवा वर्कर को अनरजिस्टर करें और एक ही बटन पर क्लिक करके, सभी स्टोरेज और कैश मेमोरी मिटाएं.
वेब ऐप्लिकेशन मेनिफ़ेस्ट
अगर आपको अपने उपयोगकर्ताओं को Mac OS X पर ऐप्लिकेशन फ़ोल्डर, Windows पर Start मेन्यू, और Android और iOS की होम स्क्रीन पर अपना ऐप्लिकेशन जोड़ने की सुविधा देनी है, तो आपको वेब ऐप्लिकेशन का मेनिफ़ेस्ट बनाना होगा. मेनिफ़ेस्ट से यह तय होता है कि ऐप्लिकेशन, होम स्क्रीन पर कैसा दिखेगा, होम स्क्रीन से लॉन्च करने पर उपयोगकर्ता को कहां भेजा जाएगा, और लॉन्च होने पर ऐप्लिकेशन कैसा दिखेगा.
अपनी मेनिफ़ेस्ट फ़ाइल सेट अप हो जाने के बाद, उसकी जांच करने के लिए ऐप्लिकेशन पैनल के मेनिफ़ेस्ट टैब का इस्तेमाल करें.
- मेनिफ़ेस्ट का सोर्स देखने के लिए, ऐप्लिकेशन मेनिफ़ेस्ट लेबल के नीचे दिए गए लिंक पर क्लिक करें (ऊपर दिए गए स्क्रीनशॉट में
manifest.webmanifest). - आइडेंटिटी और प्रज़ेंटेशन सेक्शन, मेनिफ़ेस्ट सोर्स के फ़ील्ड को ज़्यादा उपयोगकर्ता-अनुकूल तरीके से दिखाते हैं.
- प्रोटोकॉल हैंडलर सेक्शन की मदद से, एक बटन पर क्लिक करके अपने पीडब्ल्यूए के यूआरएल प्रोटोकॉल हैंडलर रजिस्ट्रेशन की जांच की जा सकती है. ज़्यादा जानने के लिए, यूआरएल प्रोटोकॉल हैंडलर के रजिस्ट्रेशन की जांच करना लेख पढ़ें.
- आइकॉन सेक्शन आपके चुने हुए सभी आइकॉन दिखाता है. इसकी मदद से, उनके मास्क देखे जा सकते हैं.
- Shortcut #N सेक्शन का सेट आपके सभी शॉर्टकट ऑब्जेक्ट पर जानकारी दिखाता है.
- सेक्शन के स्क्रीनशॉट #N सेट में, आपके ऐप्लिकेशन के इंस्टॉलेशन यूज़र इंटरफ़ेस (यूआई) के बेहतर स्क्रीनशॉट दिखते हैं.
इसके अलावा, अगर DevTools को कोई गड़बड़ी मिलती है, जैसे कि कोई आइकॉन जिसे लोड नहीं किया जा सकता, तो मेनिफ़ेस्ट टैब में इंस्टॉल किए जाने की क्षमता वाला सेक्शन दिखता है, जो गड़बड़ी के बारे में बताता है.
मास्क किए जा सकने वाले आइकॉन देखना और उनकी जांच करना
मेनिफ़ेस्ट टैब के आइकॉन सेक्शन में, आपके ऐप्लिकेशन के सभी आइकॉन दिखते हैं. इस सेक्शन में, मास्क करने लायक आइकॉन के लिए सुरक्षित जगह की जानकारी भी देखी जा सकती है. ये आइकॉन, प्लैटफ़ॉर्म के हिसाब से अलग-अलग फ़ॉर्मैट में होते हैं.
आइकॉन को ट्रिम करके, सिर्फ़ कम से कम ज़रूरी जगह दिखाने के लिए, 
मास्क किए जा सकने वाले आइकॉन के लिए, सिर्फ़ कम से कम ज़रूरी जगह दिखाएं को चुनें.
अगर आपका पूरा लोगो सेफ़ ज़ोन में दिख रहा है, तो आपका लोगो सही है.
ट्रिगर इंस्टॉलेशन
Chrome की मदद से, अपने उपयोगकर्ता इंटरफ़ेस में जाकर, अपने PWA को इंस्टॉल करने की सुविधा चालू की जा सकती है. साथ ही, उसे प्रमोट भी किया जा सकता है. अपने ऐप्लिकेशन में इंस्टॉल करने का अनुभव देने का तरीका जानें.
अपने PWA के इंस्टॉलेशन फ़्लो को ट्रिगर करने के लिए:
- Chrome में PWA का लैंडिंग पेज खोलें.
सबसे ऊपर मौजूद पता बार की दाईं ओर,
इंस्टॉल करें पर क्लिक करें.
स्क्रीन पर दिए गए निर्देशों का पालन करें.
ऐप्लिकेशन इंस्टॉल करें सुविधा, मोबाइल डिवाइस के लिए वर्कफ़्लो को सिम्युलेट नहीं कर सकती. ध्यान दें कि डेस्कटॉप पर Chrome ब्राउज़र, पता बार में इंस्टॉलेशन बटन कैसे दिखाता है. भले ही, DevTools डिवाइस मोड में हो. हालांकि, अगर आपके ऐप्लिकेशन को डेस्कटॉप पर जोड़ा जा सकता है, तो वह मोबाइल पर भी काम करेगा.
अगर आपको असली मोबाइल अनुभव की जांच करनी है, तो रिमोट डीबगिंग की मदद से, किसी असली मोबाइल डिवाइस को DevTools से कनेक्ट किया जा सकता है. कनेक्ट किए गए मोबाइल डिवाइस पर इंस्टॉलेशन को ट्रिगर करने के लिए, 
तीन बिंदु वाला मेन्यू खोलें और 
ऐप्लिकेशन इंस्टॉल करें पर क्लिक करें.
शॉर्टकट की जांच करना
ऐप्लिकेशन के शॉर्टकट की मदद से, उपयोगकर्ताओं को उन सामान्य कार्रवाइयों का तुरंत ऐक्सेस दिया जा सकता है जिनकी उन्हें अक्सर ज़रूरत पड़ती है.
मेनिफ़ेस्ट फ़ाइल में तय किए गए शॉर्टकट की जांच करने के लिए, मेनिफ़ेस्ट टैब के शॉर्टकट #N सेक्शन पर स्क्रोल करें.
इंस्टॉलेशन के बेहतर यूज़र इंटरफ़ेस (यूआई) के लिए स्क्रीनशॉट की जांच करना
मेनिफ़ेस्ट फ़ाइल में ब्यौरा और स्क्रीनशॉट जोड़ने पर, आपके ऐप्लिकेशन के लिए इंस्टॉलेशन डायलॉग बेहतर बन जाता है.
स्क्रीनशॉट की जांच करने के लिए, मेनिफ़ेस्ट टैब के स्क्रीनशॉट #N सेक्शन पर स्क्रोल करें.
यूआरएल के प्रोटोकॉल हैंडलर के रजिस्ट्रेशन की जांच करें
पीडब्ल्यूए में ऐसे लिंक मैनेज किए जा सकते हैं जो बेहतर अनुभव देने के लिए, खास प्रोटोकॉल का इस्तेमाल करते हैं. हैंडलर बनाने का तरीका जानने के लिए, PWA के लिए, यूआरएल के प्रोटोकॉल हैंडलर का रजिस्ट्रेशन लेख पढ़ें.
अपने हैंडलर की जांच करने के लिए:
- अपने PWA के लैंडिंग पेज पर DevTools खोलें. उदाहरण के लिए, यह डेमो PWA देखें.
- डेमो पेज पर जाकर, PWA इंस्टॉल करें और इंस्टॉल होने के बाद, ऐप्लिकेशन को फिर से लोड करें. ब्राउज़र ने अब PWA को
web+coffeeप्रोटोकॉल के लिए हैंडलर के तौर पर रजिस्टर कर लिया है. - ऐप्लिकेशन > मेनिफ़ेस्ट > प्रोटोकॉल हैंडलर सेक्शन में, वह यूआरएल डालें जिसकी जांच हैंडलर को करनी है. इसके बाद, प्रोटोकॉल की जांच करें पर क्लिक करें.
इस उदाहरण में, हैंडलर americano,chai, औरlatte-macchiatoको प्रोसेस कर सकता है. - जब Chrome आपसे पूछे कि क्या उसे ऐप्लिकेशन खोलना है, तो ओपन प्रोटोकॉल हैंडलर पर क्लिक करके पुष्टि करें.
- अगले डायलॉग बॉक्स में, ऐप्लिकेशन को
web+coffeeलिंक मैनेज करने की अनुमति दें.
अगर हैंडलर लिंक को प्रोसेस कर लेता है, तो आपको ऐप्लिकेशन में खुले हुए कॉफ़ी कप की इमेज दिखेगी.
सर्विस वर्कर
आने वाले समय के वेब प्लैटफ़ॉर्म के लिए, सर्विस वर्कर एक बुनियादी टेक्नोलॉजी होंगी. ये ऐसी स्क्रिप्ट होती हैं जिन्हें ब्राउज़र, वेब पेज से अलग बैकग्राउंड में चलाता है. इन स्क्रिप्ट की मदद से, ऐसी सुविधाएं ऐक्सेस की जा सकती हैं जिन्हें किसी वेब पेज या उपयोगकर्ता के इंटरैक्शन की ज़रूरत नहीं होती. जैसे, पुश नोटिफ़िकेशन, बैकग्राउंड सिंक, और ऑफ़लाइन अनुभव.
मिलती-जुलती गाइड:
DevTools में, ऐप्लिकेशन पैनल में मौजूद सेवा वर्कर टैब, सेवा वर्कर की जांच करने और उन्हें डीबग करने की मुख्य जगह है.
- अगर किसी सर्विस वर्कर को अभी खुले हुए पेज पर इंस्टॉल किया गया है, तो वह आपको इस टैब में दिखेगा. उदाहरण के लिए, ऊपर दिए गए स्क्रीनशॉट में,
https://airhorner.com/के दायरे के लिए एक सेवा वर्कर इंस्टॉल किया गया है. 
ऑफ़लाइन चेकबॉक्स, DevTools को ऑफ़लाइन मोड में डाल देता है. यह नेटवर्क पैनल में उपलब्ध ऑफ़लाइन मोड या कमांड मेन्यू में मौजूद Go offlineविकल्प के बराबर है.
फिर से लोड करने पर अपडेट चेकबॉक्स, सर्विस वर्कर को हर पेज लोड पर अपडेट करने के लिए मजबूर करता है.
नेटवर्क के लिए बायपास करें चेकबॉक्स, सेवा वर्कर को बायपास करता है और अनुरोध किए गए संसाधनों के लिए ब्राउज़र को नेटवर्क पर जाने के लिए मजबूर करता है.- नेटवर्क अनुरोध लिंक, आपको नेटवर्क पैनल पर ले जाता है. यहां आपको सेवा वर्कर (
is:service-worker-interceptedफ़िल्टर) से जुड़े इंटरसेप्ट किए गए अनुरोधों की सूची दिखती है. - अपडेट करें लिंक, बताए गए सेवा वर्कर को एक बार अपडेट करता है.
- पुश बटन, बिना पेलोड वाले पुश नोटिफ़िकेशन को एम्युलेट करता है. इसे टिकल भी कहा जाता है.
- सिंक करें बटन, बैकग्राउंड सिंक इवेंट को एमुलेट करता है.
- रजिस्ट्रेशन रद्द करें लिंक, बताए गए सर्विस वर्कर का रजिस्ट्रेशन रद्द कर देता है. सर्विस वर्कर का रजिस्ट्रेशन रद्द करने और एक ही बटन पर क्लिक करके स्टोरेज और कैश मेमोरी को मिटाने के तरीके के लिए, स्टोरेज खाली करें देखें.
- सोर्स लाइन से पता चलता है कि फ़िलहाल चल रहा सर्विस वर्कर कब इंस्टॉल किया गया था. लिंक, सर्विस वर्कर की सोर्स फ़ाइल का नाम होता है. लिंक पर क्लिक करने से, यह आपको सर्विस वर्कर के सोर्स पर भेज देता है.
- स्टेटस लाइन से, आपको सेवा वर्कर का स्टेटस पता चलता है. इस लाइन पर मौजूद संख्या (स्क्रीनशॉट में
#16) से पता चलता है कि सेवा वर्कर को कितनी बार अपडेट किया गया है.
फिर से लोड करने पर अपडेट चेकबॉक्स को चालू करने पर, आपको दिखेगा कि हर पेज लोड होने पर संख्या में बढ़ोतरी होती है.
स्थिति के बगल में, आपको शुरू करें लिंक दिखेगा (अगर सेवा वर्कर बंद है) या बंद करें लिंक दिखेगा (अगर सेवा वर्कर चल रहा है). सर्विस वर्कर इस तरह से डिज़ाइन किए गए हैं कि उन्हें ब्राउज़र के ज़रिए किसी भी समय रोका और इस्तेमाल किया जा सकता है. स्टॉप लिंक का इस्तेमाल करके सर्विस वर्कर को रोकने से, यह सिम्युलेट हो सकता है. सर्विस वर्कर को बंद करके, यह जांच की जा सकती है कि सर्विस वर्कर के फिर से वापस आने पर
आपका कोड कैसे काम करता है. इसमें लगातार वैश्विक स्थिति के बारे में गलत धारणाओं की वजह से, गड़बड़ियों के बारे में पता चलता है. - क्लाइंट लाइन से आपको उस ऑरिजिन के बारे में पता चलता है जिसके लिए सेवा वर्कर का दायरा तय किया गया है. फ़ोकस button का इस्तेमाल तब किया जाता है, जब आपके पास एक से ज़्यादा रजिस्टर किए गए सेवा वर्कर हों. अगर किसी ऐसे सर्विस वर्कर के बगल में मौजूद फ़ोकस बटन पर क्लिक किया जाता है जो दूसरे टैब में चल रहा है, तो Chrome उस टैब पर फ़ोकस करता है.
अपडेट साइकल टेबल में, आपको सेवा वर्कर की गतिविधियां और उनके बीते हुए समय की जानकारी दिखती है. जैसे, इंस्टॉल, इंतज़ार, और चालू करने में लगने वाला समय. हर गतिविधि का सटीक टाइमस्टैंप देखने के लिए,
बड़ा करें बटन पर क्लिक करें.
ज़्यादा जानकारी के लिए, सेवा वर्कर का लाइफ़साइकल लेख पढ़ें.
अगर सर्विस वर्कर की वजह से कोई गड़बड़ी होती है, तो सर्विस वर्कर टैब में 
गड़बड़ी आइकॉन दिखता है. साथ ही, सोर्स लाइन के बगल में गड़बड़ियों की संख्या दिखती है.
नंबर वाले लिंक से, आपको कंसोल पर ले जाया जाता है. यहां आपको लॉग की गई सभी गड़बड़ियां दिखती हैं.
सभी सेवा वर्कर की जानकारी देखने के लिए, सेवा वर्कर टैब में सबसे नीचे, सभी रजिस्ट्रेशन देखें पर क्लिक करें. यह लिंक chrome://serviceworker-internals/?devtools पर ले जाता है, जहां आप अपने सर्विस वर्कर को और डीबग कर सकते हैं.
सर्विस वर्कर कैश मेमोरी
कैश मेमोरी टैब, उन संसाधनों की रीड-ओनली सूची उपलब्ध कराता है जिन्हें (सर्विस वर्कर) कैश एपीआई का इस्तेमाल करके कैश मेमोरी में सेव किया गया है.
ध्यान दें कि पहली बार कैश मेमोरी खोलने और उसमें कोई संसाधन जोड़ने पर, हो सकता है कि DevTools बदलाव का पता न लगा पाए. पेज को फिर से लोड करें. इसके बाद, आपको कैश मेमोरी दिखेगी.
अगर आपने दो या उससे ज़्यादा कैश मेमोरी खोली हैं, तो आपको वे कैश मेमोरी का स्टोरेज ड्रॉप-डाउन के नीचे दिखेंगी.
कोटा का इस्तेमाल
कैश मेमोरी टैब में मौजूद कुछ जवाबों को "ओपेक" के तौर पर फ़्लैग किया जा सकता है. यह किसी दूसरे ऑरिजिन से मिले ऐसे रिस्पॉन्स को दिखाता है जो CORS के चालू न होने पर, किसी दूसरे ऑरिजिन से मिला है. जैसे, CDN या रिमोट एपीआई.
अलग-अलग डोमेन की जानकारी लीक होने से रोकने के लिए, स्टोरेज कोटा की सीमाओं का हिसाब लगाने के लिए इस्तेमाल किए जाने वाले जवाब के साइज़ में ज़्यादा पैडिंग जोड़ी जाती है. इसका मतलब है कि QuotaExceeded अपवाद का मैसेज दिखता है या नहीं. इसकी जानकारी navigator.storage एपीआई देता है.
इस पैडिंग की जानकारी, ब्राउज़र के हिसाब से अलग-अलग होती है. हालांकि, Google Chrome के लिए इसका मतलब है कि कैश मेमोरी में सेव किए गए किसी भी ऑपैक रिस्पॉन्स का कम से कम साइज़, स्टोरेज के कुल इस्तेमाल में लगभग सात एमबी होता है. आपको यह तय करते समय इस बात का ध्यान रखना चाहिए कि आपको कितने अपेक जवाबों को कैश मेमोरी में सेव करना है. ऐसा इसलिए, क्योंकि अपेक रिसॉर्स के असल साइज़ के आधार पर, स्टोरेज कोटा की सीमाओं को आसानी से ज़्यादा जल्दी पार किया जा सकता है.
मिलती-जुलती गाइड:
स्टोरेज खाली करें
प्रोग्रेसिव वेब ऐप्लिकेशन बनाते समय, स्टोरेज मिटाएं टैब बहुत काम का होता है. इस टैब से आप सर्विस वर्कर का रजिस्ट्रेशन रद्द कर सकते हैं. साथ ही, एक ही बटन पर क्लिक करके सभी कैश मेमोरी और स्टोरेज खाली कर सकते हैं. ज़्यादा जानने के लिए, यहां दिया गया सेक्शन देखें.
मिलती-जुलती गाइड:
ऐप्लिकेशन के पैनल से जुड़ी अन्य गाइड
ऐप्लिकेशन पैनल के दूसरे पैनल के बारे में ज़्यादा मदद पाने के लिए, नीचे दी गई गाइड देखें.
मिलती-जुलती गाइड: