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