वेब ऐप्लिकेशन मेनिफ़ेस्ट, सर्विस वर्कर, और सर्विस वर्कर कैश मेमोरी की जांच करने, उनमें बदलाव करने, और उन्हें डीबग करने के लिए, ऐप्लिकेशन पैनल का इस्तेमाल करें.
प्रोग्रेसिव वेब ऐप्लिकेशन (PWA), वेब टेक्नोलॉजी का इस्तेमाल करके बनाए गए आधुनिक और अच्छी क्वालिटी वाले ऐप्लिकेशन हैं. PWA, iOS, Android, और डेस्कटॉप ऐप्लिकेशन जैसी ही सुविधाएं देते हैं. कैंपेन के तीनों सब-टाइप के नाम ये रहे:
- यह रुक-रुककर चलने वाले नेटवर्क की स्थितियों में भी भरोसेमंद है.
- ऑपरेटिंग सिस्टम के प्लैटफ़ॉर्म को लॉन्च करने के लिए इंस्टॉल किया जा सकता है. जैसे, Mac OS X पर ऐप्लिकेशन फ़ोल्डर, Windows पर Start मेन्यू, और Android और iOS पर होम स्क्रीन.
- गतिविधि स्विचर, Spotlight जैसे डिवाइस के खोज इंजन, और कॉन्टेंट शेयर करने वाली शीट में दिखते हैं.
इस गाइड में, सिर्फ़ ऐप्लिकेशन पैनल में मौजूद प्रोग्रेसिव वेब ऐप्लिकेशन की सुविधाओं के बारे में बताया गया है. अगर आपको अन्य पैनल के बारे में मदद चाहिए, तो इस गाइड का आखिरी सेक्शन, ऐप्लिकेशन पैनल की अन्य गाइड देखें.
खास जानकारी
- अपने वेब ऐप्लिकेशन मेनिफ़ेस्ट की जांच करने के लिए, मेनिफ़ेस्ट टैब का इस्तेमाल करें.
- सेवा-कर्मचारी से जुड़े कई तरह के टास्क के लिए, सेवा-कर्मचारी टैब का इस्तेमाल करें. जैसे, किसी सेवा को रजिस्ट्रर करना या अपडेट करना, पुश इवेंट को एमुलेट करना, ऑफ़लाइन जाना या सेवा-कर्मचारी को रोकना.
- कैश मेमोरी में मौजूद फ़ाइलें टैब में जाकर, अपने सेवा वर्कर की कैश मेमोरी देखें.
- स्टोरेज मिटाएं टैब में जाकर, किसी सेवा वर्कर को अनरजिस्टर करें और एक ही बटन पर क्लिक करके, सभी स्टोरेज और कैश मेमोरी मिटाएं.
वेब ऐप्लिकेशन मेनिफ़ेस्ट
अगर आपको अपने उपयोगकर्ताओं को Mac OS X पर ऐप्लिकेशन फ़ोल्डर, Windows पर Start मेन्यू, और Android और iOS की होम स्क्रीन पर अपना ऐप्लिकेशन जोड़ने की सुविधा देनी है, तो आपको वेब ऐप्लिकेशन का मेनिफ़ेस्ट बनाना होगा. मेनिफ़ेस्ट से पता चलता है कि ऐप्लिकेशन, होम स्क्रीन पर कैसे दिखता है, होम स्क्रीन से लॉन्च करने पर उपयोगकर्ता को कहां भेजना है, और लॉन्च करने पर ऐप्लिकेशन कैसा दिखता है.
मेनिफ़ेस्ट सेट अप करने के बाद, ऐप्लिकेशन पैनल के मेनिफ़ेस्ट टैब का इस्तेमाल करके, इसकी जांच की जा सकती है.
- मेनिफ़ेस्ट का सोर्स देखने के लिए, ऐप्लिकेशन मेनिफ़ेस्ट लेबल के नीचे दिए गए लिंक पर क्लिक करें (ऊपर दिए गए स्क्रीनशॉट में
manifest.webmanifest). - आइडेंटिटी और प्रज़ेंटेशन सेक्शन, मेनिफ़ेस्ट सोर्स के फ़ील्ड को ज़्यादा उपयोगकर्ता-अनुकूल तरीके से दिखाते हैं.
- प्रोटोकॉल हैंडलर सेक्शन की मदद से, एक बटन पर क्लिक करके अपने PWA के यूआरएल प्रोटोकॉल हैंडलर के रजिस्ट्रेशन की जांच की जा सकती है. ज़्यादा जानने के लिए, यूआरएल प्रोटोकॉल हैंडलर के रजिस्ट्रेशन की जांच करना लेख पढ़ें.
- आइकॉन सेक्शन में, आपके तय किए गए सभी आइकॉन दिखते हैं. साथ ही, उनके मास्क भी देखे जा सकते हैं.
- सेक्शन के शॉर्टकट #N सेट में, आपके सभी शॉर्टकट ऑब्जेक्ट की जानकारी दिखती है.
- सेक्शन के स्क्रीनशॉट #N सेट में, आपके ऐप्लिकेशन के इंस्टॉलेशन यूज़र इंटरफ़ेस (यूआई) के बेहतर स्क्रीनशॉट दिखते हैं.
इसके अलावा, अगर DevTools को कोई गड़बड़ी मिलती है, जैसे कि कोई आइकॉन लोड नहीं हो पा रहा है, तो मेनिफ़ेस्ट टैब में इंस्टॉल करने की सुविधा सेक्शन दिखता है. इसमें गड़बड़ी के बारे में बताया जाता है.
मास्क किए जा सकने वाले आइकॉन देखना और उनकी जांच करना
मेनिफ़ेस्ट टैब के आइकॉन सेक्शन में, आपके ऐप्लिकेशन के सभी आइकॉन दिखते हैं. इस सेक्शन में, मास्केबल आइकॉन के लिए सुरक्षित जगहें भी देखी जा सकती हैं. ये आइकॉन, प्लैटफ़ॉर्म के हिसाब से फ़ॉर्मैट में बदल जाते हैं.
आइकॉन को ट्रिम करके, सिर्फ़ कम से कम ज़रूरी जगह दिखाने के लिए, 
मास्क किए जा सकने वाले आइकॉन के लिए, सिर्फ़ कम से कम ज़रूरी जगह दिखाएं को चुनें.
अगर आपका पूरा लोगो सेफ़ ज़ोन में दिख रहा है, तो आपका लोगो सही है.
ट्रिगर इंस्टॉल करना
Chrome की मदद से, अपने उपयोगकर्ता इंटरफ़ेस में जाकर, अपने PWA को इंस्टॉल करने की सुविधा चालू की जा सकती है और उसका प्रमोशन किया जा सकता है. अपने ऐप्लिकेशन में इंस्टॉल करने का अनुभव देने का तरीका जानें.
अपने PWA के इंस्टॉलेशन फ़्लो को ट्रिगर करने के लिए:
- Chrome में PWA का लैंडिंग पेज खोलें.
सबसे ऊपर मौजूद पता बार की दाईं ओर,
इंस्टॉल करें पर क्लिक करें.
स्क्रीन पर दिए गए निर्देशों का पालन करें.
ऐप्लिकेशन इंस्टॉल करें सुविधा, मोबाइल डिवाइसों के लिए वर्कफ़्लो को सिम्युलेट नहीं कर सकती. ध्यान दें कि डेस्कटॉप पर Chrome ब्राउज़र, पता बार में इंस्टॉलेशन बटन कैसे दिखाता है. भले ही, DevTools डिवाइस मोड में हो. हालांकि, अगर आपके ऐप्लिकेशन को डेस्कटॉप पर जोड़ा जा सकता है, तो वह मोबाइल पर भी काम करेगा.
अगर आपको असली मोबाइल अनुभव की जांच करनी है, तो रिमोट डीबगिंग की मदद से, किसी असली मोबाइल डिवाइस को DevTools से कनेक्ट किया जा सकता है. कनेक्ट किए गए मोबाइल डिवाइस पर इंस्टॉलेशन को ट्रिगर करने के लिए, 
तीन बिंदु वाला मेन्यू खोलें और 
ऐप्लिकेशन इंस्टॉल करें पर क्लिक करें.
शॉर्टकट की जांच करना
ऐप्लिकेशन के शॉर्टकट की मदद से, उपयोगकर्ताओं को उन सामान्य कार्रवाइयों का तुरंत ऐक्सेस दिया जा सकता है जिनकी उन्हें अक्सर ज़रूरत पड़ती है.
मेनिफ़ेस्ट फ़ाइल में तय किए गए शॉर्टकट की जांच करने के लिए, मेनिफ़ेस्ट टैब के शॉर्टकट #N सेक्शन पर स्क्रोल करें.
इंस्टॉलेशन के बेहतर यूज़र इंटरफ़ेस (यूआई) के लिए स्क्रीनशॉट की जांच करना
मेनिफ़ेस्ट फ़ाइल में ब्यौरा और स्क्रीनशॉट जोड़ने पर, आपके ऐप्लिकेशन के लिए इंस्टॉलेशन डायलॉग बेहतर बन जाता है.
स्क्रीनशॉट की जांच करने के लिए, मेनिफ़ेस्ट टैब के स्क्रीनशॉट #N सेक्शन पर स्क्रोल करें.
यूआरएल प्रोटोकॉल हैंडलर के रजिस्ट्रेशन की जांच करना
PWA, बेहतर अनुभव देने के लिए किसी खास प्रोटोकॉल का इस्तेमाल करने वाले लिंक को हैंडल कर सकते हैं. हैंडलर बनाने का तरीका जानने के लिए, 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) से पता चलता है कि सेवा वर्कर को कितनी बार अपडेट किया गया है.
पेज फिर से लोड होने पर अपडेट करें चेकबॉक्स को चालू करने पर, आपको हर पेज लोड होने पर संख्या बढ़ती हुई दिखेगी.
स्थिति के बगल में, आपको शुरू करें लिंक दिखेगा (अगर सेवा वर्कर बंद है) या बंद करें लिंक दिखेगा (अगर सेवा वर्कर चल रहा है). सेवा वर्कर को इस तरह से डिज़ाइन किया गया है कि ब्राउज़र उन्हें कभी भी रोक और शुरू कर सकता है. stop लिंक का इस्तेमाल करके, अपने सेवा वर्कर को साफ़ तौर पर बंद करने से, ऐसा सिम्युलेट किया जा सकता है. अपने सेवा वर्कर को रोकने से, यह जांचने का बेहतर तरीका मिलता है कि सेवा वर्कर फिर से शुरू होने पर, आपका कोड कैसा काम करता है. यह अक्सर, हमेशा से मौजूद ग्लोबल स्टेटस के बारे में गलत अनुमान लगाने की वजह से गड़बड़ियां दिखाता है. - क्लाइंट लाइन से आपको उस ऑरिजिन के बारे में पता चलता है जिसके लिए सेवा वर्कर का दायरा तय किया गया है. फ़ोकस करें बटन का इस्तेमाल तब किया जाता है, जब आपके पास एक से ज़्यादा रजिस्टर किए गए सेवा वर्कर हों. अगर किसी दूसरे टैब में चल रहे सेवा वर्कर के बगल में मौजूद फ़ोकस करें बटन पर क्लिक किया जाता है, तो Chrome उस टैब पर फ़ोकस करता है.
अपडेट साइकल टेबल में, आपको सेवा वर्कर की गतिविधियां और उनके बीते हुए समय की जानकारी दिखती है. जैसे, इंस्टॉल, इंतज़ार, और चालू करने में लगने वाला समय. हर गतिविधि का सटीक टाइमस्टैंप देखने के लिए,
बड़ा करें बटन पर क्लिक करें.
ज़्यादा जानकारी के लिए, सेवा वर्कर का लाइफ़साइकल लेख पढ़ें.
अगर सर्विस वर्कर की वजह से कोई गड़बड़ी होती है, तो सर्विस वर्कर टैब में 
गड़बड़ी आइकॉन दिखता है. साथ ही, सोर्स लाइन के बगल में गड़बड़ियों की संख्या दिखती है.
नंबर वाले लिंक से, आपको कंसोल पर ले जाया जाता है. यहां आपको लॉग की गई सभी गड़बड़ियां दिखेंगी.
सभी सेवा वर्कर की जानकारी देखने के लिए, सेवा वर्कर टैब में सबसे नीचे, सभी रजिस्ट्रेशन देखें पर क्लिक करें. यह लिंक आपको chrome://serviceworker-internals/?devtools पर ले जाता है, जहां अपने सेवा वर्कर को डीबग किया जा सकता है.
सर्विस वर्कर कैश मेमोरी
कैश मेमोरी टैब, उन संसाधनों की रीड-ओनली सूची दिखाता है जिन्हें Cache API (सेवा वर्कर) का इस्तेमाल करके कैश मेमोरी में सेव किया गया है.
ध्यान दें कि पहली बार कैश मेमोरी खोलने और उसमें कोई संसाधन जोड़ने पर, हो सकता है कि DevTools में बदलाव का पता न चल पाए. पेज को फिर से लोड करें. इसके बाद, आपको कैश मेमोरी दिखेगी.
अगर आपने दो या उससे ज़्यादा कैश मेमोरी खोली हैं, तो आपको वे कैश मेमोरी का स्टोरेज ड्रॉप-डाउन के नीचे दिखेंगी.
कोटा का इस्तेमाल
कैश स्टोरेज टैब में मौजूद कुछ जवाबों को "अस्पष्ट" के तौर पर फ़्लैग किया जा सकता है. यह किसी दूसरे ऑरिजिन से मिले रिस्पॉन्स को दिखाता है. जैसे, CDN या रिमोट एपीआई से मिले रिस्पॉन्स को, जब सीओआरएस चालू न हो.
अलग-अलग डोमेन की जानकारी लीक होने से रोकने के लिए, स्टोरेज कोटा की सीमाओं का हिसाब लगाने के लिए इस्तेमाल किए जाने वाले अस्पष्ट रिस्पॉन्स के साइज़ में ज़्यादा पैडिंग जोड़ी जाती है.इसका मतलब है कि QuotaExceeded
अपवाद दिखाया गया है या नहीं. इसकी शिकायत navigator.storage एपीआई करता है.
इस पैडिंग की जानकारी, ब्राउज़र के हिसाब से अलग-अलग होती है. हालांकि, Google Chrome के लिए इसका मतलब है कि कैश मेमोरी में सेव किए गए किसी भी ऑपैक रिस्पॉन्स का कम से कम साइज़, स्टोरेज के कुल इस्तेमाल में लगभग सात एमबी होता है. आपको यह तय करते समय इस बात का ध्यान रखना चाहिए कि आपको कितने अपेक जवाबों को कैश मेमोरी में सेव करना है. ऐसा इसलिए, क्योंकि अपेक रिसॉर्स के असल साइज़ के आधार पर, स्टोरेज कोटा की सीमाओं को आसानी से ज़्यादा जल्दी पार किया जा सकता है.
मिलती-जुलती गाइड:
स्टोरेज खाली करें
प्रोग्रेसिव वेब ऐप्लिकेशन बनाते समय, स्टोरेज मिटाएं टैब बहुत काम का होता है. इस टैब की मदद से, सर्विस वर्कर को अनरजिस्टर किया जा सकता है. साथ ही, एक ही बटन पर क्लिक करके, सभी कैश मेमोरी और स्टोरेज को मिटाया जा सकता है. ज़्यादा जानने के लिए, नीचे दिया गया सेक्शन देखें.
मिलती-जुलती गाइड:
ऐप्लिकेशन पैनल से जुड़ी अन्य गाइड
ऐप्लिकेशन पैनल के दूसरे पैनल के बारे में ज़्यादा मदद पाने के लिए, नीचे दी गई गाइड देखें.
मिलती-जुलती गाइड: