अब आपके पास एक प्रगतिशील वेब ऐप्लिकेशन है, जिसमें सर्विस वर्कर भी शामिल है. इसकी मदद से, ऐप्लिकेशन ऑफ़लाइन भी काम कर सकता है. बढ़िया! आपने अपने वेब ऐप्लिकेशन के लिए, Google Analytics को पहले से सेट अप किया हुआ है. साथ ही, आपको ऑफ़लाइन होने पर होने वाले इस्तेमाल से जुड़ी किसी भी ऐनलिटिकल इनसाइट को मिटाना नहीं है. हालांकि, अगर ऑफ़लाइन रहने के दौरान Google Analytics को डेटा भेजने की कोशिश की जाती है, तो वे अनुरोध पूरा नहीं होंगे और डेटा मिट जाएगा.
आपको यह जानकर हैरानी नहीं होगी कि इसका समाधान, सर्विस वर्कर हैं! खास तौर पर, यह आपके सेवा वर्कर में कोड जोड़ रहा है, ताकि Google Analytics के अनुरोधों को IndexedDB का इस्तेमाल करके सेव किया जा सके. साथ ही, जब नेटवर्क उपलब्ध हो, तब उन्हें फिर से आज़माया जा सके. हमने ओपन सोर्स Google I/O वेब ऐप्लिकेशन के हिस्से के तौर पर, इस लॉजिक को मैनेज करने के लिए कोड शेयर किया था. हालांकि, हमें पता चला कि यह एक काम का पैटर्न है और कोड को कॉपी करके चिपकाना मुश्किल हो सकता है.
हमें यह बताते हुए खुशी हो रही है कि आपकी सेवा वर्कर में, Google Analytics के ऑफ़लाइन अनुरोधों को मैनेज करने के लिए ज़रूरी सभी चीज़ों को एक npm पैकेज में बंडल कर दिया गया है: npm install --save-dev sw-offline-google-analytics
sw-offline-google-analytics का इस्तेमाल करना
अपने मौजूदा सेवा वर्कर कोड में, यह जोड़ें:
// This code should live inside your service worker JavaScript, ideally
// before any other 'fetch' event handlers are defined:
// First, import the library into the service worker global scope:
importScripts('path/to/offline-google-analytics-import.js');
// Then, call goog.offlineGoogleAnalytics.initialize():
// See https://github.com/GoogleChrome/workbox/tree/main/packages/workbox-google-analytics
goog.offlineGoogleAnalytics.initialize();
// At this point, implement any other service worker caching strategies
// appropriate for your web app.
बस इतना ही!
क्या हो रहा है?
sw-offline-google-analytics आपके सेवा वर्कर में एक नया fetch इवेंट हैंडलर सेट अप करता है. यह Google Analytics डोमेन से किए गए अनुरोधों का जवाब देता है. (लाइब्रेरी, Google Analytics से बाहर के अनुरोधों को अनदेखा करती है. इससे आपके सेवा वर्कर के अन्य fetch इवेंट हैंडलर को उन संसाधनों के लिए सही रणनीतियां लागू करने का मौका मिलता है.) यह सबसे पहले नेटवर्क के लिए अनुरोध पूरा करने की कोशिश करेगा. अगर उपयोगकर्ता ऑनलाइन है, तो वह सामान्य तरीके से आगे बढ़ेगा.
अगर नेटवर्क अनुरोध पूरा नहीं हो पाता, तो लाइब्रेरी IndexedDB में अनुरोध की जानकारी को अपने-आप सेव कर लेगी. साथ ही, टाइमस्टैंप भी सेव करेगी, जिससे पता चलेगा कि अनुरोध कब किया गया था. जब भी आपका सेवा वर्कर शुरू होगा, लाइब्रेरी सूची में मौजूद अनुरोधों की जांच करेगी और Google Analytics के कुछ अन्य पैरामीटर के साथ उन्हें फिर से भेजने की कोशिश करेगी:
qtपैरामीटर, अनुरोध करने के बाद से बीते समय पर सेट होता है. इससे यह पक्का होता है कि ओरिजनल समय को सही तरीके से एट्रिब्यूट किया गया है.goog.offlineGoogleAnalytics.initialize()को पास किए गए कॉन्फ़िगरेशन ऑब्जेक्ट कीparameterOverridesप्रॉपर्टी में दी गई कोई भी अतिरिक्त पैरामीटर और वैल्यू. उदाहरण के लिए, सेवा वर्कर से फिर से भेजे गए अनुरोधों और तुरंत भेजे गए अनुरोधों में अंतर करने के लिए, कस्टम डाइमेंशन शामिल किया जा सकता है.
अगर अनुरोध दोबारा भेजने पर, वह पूरा हो जाता है, तो बहुत बढ़िया! IndexedDB से अनुरोध हटा दिया जाता है. अगर फिर से कोशिश करने पर भी अनुरोध पूरा नहीं होता है और शुरुआती अनुरोध 24 घंटे से कम समय पहले किया गया था, तो उसे IndexedDB में रखा जाएगा, ताकि अगली बार सेवा वर्कर के शुरू होने पर फिर से कोशिश की जा सके. आपको ध्यान रखना चाहिए कि चार घंटे से ज़्यादा पुराने Google Analytics हिट प्रोसेस होने की कोई गारंटी नहीं है. हालांकि, "बस-बस" कुछ पुराने हिट फिर से भेजने से कोई नुकसान नहीं होगा.
sw-offline-google-analytics, Google Analytics को बूटस्ट्रैप करने के लिए ज़रूरी analytics.js JavaScript कोड के लिए, "नेटवर्क पहले, कैश मेमोरी का इस्तेमाल करने की रणनीति" को भी implements करता है.
और भी सुविधाएं आने वाली हैं!
sw-offline-google-analytics, बड़े sw-helpers प्रोजेक्ट का हिस्सा है. यह लाइब्रेरी का कलेक्शन है, जिसका मकसद मौजूदा सेवा वर्कर लागू करने के लिए, ड्रॉप-इन बेहतर सुविधाएं उपलब्ध कराना है.
इस प्रोजेक्ट में sw-appcache-behavior भी शामिल है. यह एक लाइब्रेरी है, जो सेवा वर्कर के अंदर मौजूद AppCache मेनिफ़ेस्ट में बताई गई कैश मेमोरी से जुड़ी रणनीतियों को लागू करती है. इसका मकसद, कम से कम शुरुआत में कैश मेमोरी से जुड़ी एक जैसी रणनीति बनाए रखते हुए, AppCache से सेवा वर्कर पर माइग्रेट करने में आपकी मदद करना है.
अगर आपके पास लाइब्रेरी के लिए कोई और सुझाव है, तो हमें बताएं. इसलिए, कृपया समस्या ट्रैकर में अनुरोध दर्ज करें!