समस्या हल करना और लॉगिन करना

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

समस्या हल करने के लिए उपलब्ध टूल

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

Chrome और Edge

Chrome (और Blink इंजन पर आधारित Edge के हाल ही के वर्शन) में डेवलपर टूल का कई बेहतर सेट मौजूद है. उनमें से कुछ टूल—खास तौर पर Chrome के DevTools में—जिन्हें इस दस्तावेज़ में पहले भी शामिल किया गया था, लेकिन जानने के लिए और भी बहुत कुछ है:

Firefox

Firefox इस्तेमाल करने वाले यहां दिए गए संसाधन देख सकते हैं:

Safari

फ़िलहाल, Safari के पास डेवलपर टूल का सीमित सेट है, जो सर्विस वर्कर को डीबग करने में मदद करता है. इन संसाधनों की मदद से, इनके बारे में ज़्यादा जानें:

वर्कबॉक्स में लॉग इन करना

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

Chrome के DevTools के कंसोल में, Workbox के लॉग मैसेज का स्क्रीनशॉट. लॉगिंग मैसेज, वर्कबॉक्स बैज वाले सामान्य कंसोल लॉग से अलग होते हैं. डीबग करने के बारे में ज़्यादा जानकारी पाने के लिए, हर मैसेज को बड़ा किया जा सकता है.

वर्कबॉक्स के डेवलपमेंट बिल्ड डिफ़ॉल्ट रूप से चालू हो जाते हैं, जबकि प्रोडक्शन बिल्ड इसे बंद कर देते हैं. डेवलपमेंट और प्रोडक्शन बिल्ड के बीच स्विच करने के अलग-अलग चरण हैं, जो इस बात पर निर्भर करते हैं कि क्या आप कस्टम वर्कबॉक्स बंडल बना रहे हैं या workbox-sw के ज़रिए प्री-बंडल कॉपी का इस्तेमाल कर रहे हैं.

बंडलर के साथ या उसके बिना

बंडलर ऐसे टूल होते हैं जो अलग-अलग मॉड्यूल से कोड लेते हैं और JavaScript का आउटपुट बनाते हैं. यह आउटपुट, ब्राउज़र में चलाए जाने के लिए तैयार होता है. बंडलर का इस्तेमाल करते समय, किसी बंडलर के लिए खास तौर पर इस्तेमाल होने वाले Workbox प्लगिन का भी इस्तेमाल किया जा सकता है, जो डेटा को पहले से कैश मेमोरी में सेव करने में मदद करता है, जैसे कि workbox-webpack-plugin. इसके अलावा, यह भी हो सकता है कि आपने सिर्फ़ Workbox रनटाइम को कैश मेमोरी में सेव करने के लॉजिक का इस्तेमाल किया हो. दोनों ही तरह से, बंडलर के कॉन्फ़िगरेशन में प्रोडक्शन मोड को सेट करने से वर्कबॉक्स के लॉग इन पर असर पड़ता है:

  • वेबपैक में, mode कॉन्फ़िगरेशन विकल्प को 'production' या 'development' पर सेट किया जा सकता है. workbox-webpack-plugin इस वैल्यू के आधार पर, वर्कबॉक्स में प्रोडक्शन या डेवलपमेंट लॉग इन का इस्तेमाल करेगा.
  • रोलअप के लिए, rollup-plugin-workbox एक mode कॉन्फ़िगरेशन विकल्प को स्वीकार करता है, जो इस बात पर भी असर डालता है कि Workbox को कंसोल में कुछ लॉग करने की अनुमति है या नहीं. अगर वर्कबॉक्स के हिसाब से प्लग इन के बिना रोलअप का इस्तेमाल किया जा रहा है, तो आपको process.env.NODE_ENV को 'development' या 'production' से बदलने के लिए, @rollup/plugin-replace को कॉन्फ़िगर करना होगा.

मान लीजिए कि डेवलपमेंट के दौरान डिफ़ॉल्ट लॉगिंग का तरीका बदलना ज़रूरी है. ऐसी स्थिति में, आपके बंडलर के लिए सही Workbox प्लग इन आपको इसके कॉन्फ़िगरेशन में लॉग डीबग करने के लिए, किसी प्राथमिकता को हार्डकोड करने की अनुमति देगा. उदाहरण के लिए, आपके पास GenerateSW तरीके के लिए, workbox-webpack-plugin के mode विकल्प का इस्तेमाल करके, वर्कबॉक्स में लॉगिन करने की सुविधा को बंद करने का विकल्प है.

बंडलर के बिना

वैसे तो बंडलर शानदार होते हैं, लेकिन हर प्रोजेक्ट के लिए उनकी ज़रूरत नहीं होती. अगर आप ऐसी स्थिति में हैं जहां आपको Workbox को किसी ऐसे प्रोजेक्ट में जोड़ना है जो बंडलर का इस्तेमाल नहीं करता है, तो इसके लिए workbox-sw सबसे सही तरीका है.

workbox-sw मॉड्यूल, अन्य वर्कबॉक्स मॉड्यूल को लोड करने की प्रक्रिया को आसान बनाता है (उदाहरण के लिए, workbox-routing, workbox-precaching वगैरह) में सेव की गई हैं. यह डेवलपमेंट या प्रोडक्शन बंडल लोड करता है या नहीं, यह आपके वेब ऐप्लिकेशन को ऐक्सेस करने के लिए इस्तेमाल किए गए यूआरएल पर निर्भर करता है. अगर आपका वेब ऐप्लिकेशन http://localhost पर चल रहा है, तो डिफ़ॉल्ट रूप से workbox-sw, Workbox का डेवलपमेंट वर्शन लोड करता है. वहीं, अन्य सभी समय के लिए प्रोडक्शन वर्शन को लोड किया जाता है.

debug विकल्प को true पर सेट करने के लिए, Workbox की setConfig तरीके को कॉल करके डिफ़ॉल्ट व्यवहार को बदला जा सकता है:

// Load workbox-sw from a CDN
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js');

// This must come before any other workbox.* methods.
workbox.setConfig({
  debug: true
});

// Now use workbox.routing.*, workbox.precaching.*, etc.

किसी भी वर्कफ़्लो में डेवलपमेंट बिल्ड में लॉग इन करने की सुविधा बंद करें

चाहे आप किसी बंडलर का इस्तेमाल करें या न करें, अपने सर्विस वर्कर में एक खास self.__WB_DISABLE_DEV_LOGS वैरिएबल के लिए true असाइन करके, डेवलपमेंट बिल्ड में लॉग इन करने की सभी सुविधाएं बंद की जा सकती हैं:

//
self.__WB_DISABLE_DEV_LOGS = true;

// The rest of your Workbox service worker code goes here

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

ज़्यादा जानकारी

अगर आपको यह पता करने में समस्या आ रही है कि गड़बड़ी वाले सर्विस वर्कर में क्या हो रहा है और लॉग करना काफ़ी नहीं है, तो workbox टैग की मदद से Stack Overflow पर कोई सवाल पोस्ट करें. अगर आपको सवाल का जवाब नहीं मिलता है, तो GitHub से जुड़ी समस्या के बारे में बताएं (योगदान देने से जुड़े दिशा-निर्देश पढ़ने के बाद). इसकी मदद से, एक से ज़्यादा डेवलपर को न सिर्फ़ आपके सवालों को पढ़ने और उनके जवाब देने की सुविधा मिलती है, बल्कि आपके सवाल के जवाब से, बाद में उसी स्थिति में किसी को भी मदद मिल सकती है.