PWA को बनाते समय, बुलेटिन टीम ने सर्विस वर्कर के बारे में क्या सीखा.
यह Google बुलेटिन टीम के बारे में सीखी गई बातों के बारे में ब्लॉग पोस्ट की पहली सीरीज़ है और उस पर काम किया जा सकता है. इन पोस्ट में हम आपके सामने आई कुछ चुनौतियों के बारे में बताएंगे, उन्हें दूर करने के लिए हमने क्या-क्या कदम उठाए. साथ ही, गलतियों से बचने के लिए सामान्य सलाह भी दी. यह नहीं है का मतलब है, पीडब्ल्यूए की पूरी जानकारी. इसका मकसद, हमारी टीम के अनुभव से मिली जानकारी को शेयर करना है.
इस पहली पोस्ट में हम पहले थोड़ी-बहुत जिसके बारे में हमने सर्विस वर्कर के बारे में सीखा.
बैकग्राउंड
साल 2017 के मध्य से 2019 के मध्य तक, बुलेटिन को तैयार किया गया था.
हमने पीडब्ल्यूए बनाना क्यों चुना
डेवलपमेंट की प्रोसेस शुरू करने से पहले, चलिए जानते हैं कि पीडब्ल्यूए बनाना इतने आकर्षक क्यों था इस प्रोजेक्ट के लिए विकल्प:
- दोहराने की क्षमता. यह खास तौर पर तब अहम है, क्योंकि बुलेटिन को पायलट प्रोग्राम में लॉन्च किया जाएगा के बारे में बात करते हैं.
- सिंगल कोड बेस. हमारे उपयोगकर्ताओं की संख्या Android और iOS के बीच करीब-करीब बराबर थी. PWA का मतलब है हम एक ऐसा वेब ऐप्लिकेशन बना सकें जो दोनों प्लैटफ़ॉर्म पर काम करे. इससे रफ़्तार और बढ़ गई के बारे में बताएँगे.
- उपयोगकर्ता के व्यवहार के हिसाब से और तुरंत अपडेट किया जाता है. पीडब्ल्यूए अपने-आप अपडेट हो सकता है कि पुराने ग्राहकों की संख्या कम कर देता है. हम ब्रेकिंग बैकएंड को बढ़ाने में कामयाब रहे के साथ-साथ क्लाइंट के लिए माइग्रेशन में बहुत कम समय लगता है.
- पहले और तीसरे पक्ष के ऐप्लिकेशन के साथ आसानी से इंटिग्रेट किया जा सकता है. इस तरह के इंटिग्रेशन एक ज़रूरी शर्त थी ऐप के लिए. PWA में इसका मतलब अक्सर यूआरएल को खोलना होता है.
- ऐप्लिकेशन इंस्टॉल करने की समस्या को हटा दिया गया है.
हमारा फ़्रेमवर्क
बुलेटिन के लिए हमने Polymer का इस्तेमाल किया, लेकिन यह कोई भी आधुनिक और अच्छी सुविधा है फ़्रेमवर्क कारगर साबित होगा.
हमने सर्विस वर्कर के बारे में क्या सीखा
सेवा के बिना, पीडब्ल्यूए इस्तेमाल नहीं किया जा सकता वर्कर. सर्विस वर्कर आपको बहुत सारी पावर मिलती हैं, जैसे कि कैश मेमोरी की बेहतर रणनीतियां, ऑफ़लाइन काम करने की सुविधाएं, बैकग्राउंड सिंक, वगैरह. हालांकि, सर्विस वर्कर में थोड़ी-बहुत दिक्कतें होती हैं. हमने पाया कि उन्हें मिलने वाले फ़ायदे, अतिरिक्त सेवाओं से ज़्यादा बेहतर होते हैं जटिलता.
अगर हो सके, तो इसे जनरेट करें
सर्विस वर्कर स्क्रिप्ट को हाथ से लिखने से बचें. राइटिंग सर्विस वर्कर को मैन्युअल तरीके से इस्तेमाल करना होगा कैश मेमोरी में सेव किए गए संसाधनों को मैनेज करना और लॉजिक को फिर से लिखना जो ज़्यादातर सर्विस वर्कर लाइब्रेरी में आम तौर पर होता है वर्कबॉक्स के तौर पर जोड़ा जा सकता है.
हालांकि, हमारे इंटरनल टेक्नोलॉजी स्टैक की वजह से, हम लाइब्रेरी का इस्तेमाल जनरेट और मैनेज करने के लिए नहीं कर सके हमारा सर्विस वर्कर. यहां दी गई जानकारी से, कभी-कभी हमें इस बारे में भी पता चलेगा. इसके लिए गलतियां पर जाएं जनरेट नहीं किए गए सर्विस वर्कर पर क्लिक करें.
सभी लाइब्रेरी, सर्विस वर्कर के साथ काम नहीं करतीं
कुछ JS लाइब्रेरी यह अनुमान लगाती हैं कि सर्विस वर्कर के चलाए जाने पर, उम्मीद के मुताबिक काम नहीं करती. इसके लिए
उदाहरण के लिए, यह मानते हुए कि window या document उपलब्ध हैं या किसी ऐसे एपीआई का इस्तेमाल कर रहे हैं जो सेवा के लिए उपलब्ध नहीं है
कर्मचारी (XMLHttpRequest, लोकल स्टोरेज वगैरह). पक्का करें कि आपको अपनी
ऐप्लिकेशन, सेवा-कर्मचारियों के साथ काम करते हों. हम इस खास PWA का इस्तेमाल करना चाहते थे
gapi.js पर थे, लेकिन ये काम नहीं कर रहे थे
नहीं कर सकता, क्योंकि यह सर्विस वर्कर का समर्थन नहीं करता था. लाइब्रेरी के लेखकों को
JavaScript के कॉन्टेक्स्ट के बारे में गैर-ज़रूरी अनुमान लगाना जहां सर्विस वर्कर के इस्तेमाल में मदद की जा सके
जैसे, सर्विस वर्कर के साथ काम न करने वाले एपीआई का इस्तेमाल न करना और दुनिया भर में
राज्य के हिसाब से सही है.
शुरू करने के दौरान, IndexedDB ऐक्सेस करने से बचें
इस समय IndexedDB को न पढ़ें सर्विस वर्कर स्क्रिप्ट को शुरू किया जा सकता है या इस अनचाही स्थिति पर पहुंचा जा सकता है:
- उपयोगकर्ता के पास, IndexedDB (IDB) वर्शन N वाला वेब ऐप्लिकेशन है
- नए वेब ऐप्लिकेशन को IDB वर्शन N+1 के साथ पुश किया गया है
- उपयोगकर्ता PWA पर जाता है, जो नए सर्विस वर्कर का डाउनलोड ट्रिगर होता है
- नया सर्विस वर्कर,
installइवेंट हैंडलर को रजिस्टर करने से पहले IDB से पढ़ता है, जिससे N से N+1 पर जाने के लिए IDB का अपग्रेड साइकल - उपयोगकर्ता के पास वर्शन N वाला पुराना क्लाइंट है, इसलिए सर्विस वर्कर अपग्रेड होने की प्रक्रिया चालू के तौर पर रुक जाती है कनेक्शन अब भी डेटाबेस के पुराने वर्शन में खुलते हैं
- सर्विस वर्कर हैंग हो जाता है और कभी इंस्टॉल नहीं होता
हमारे मामले में, सर्विस वर्कर इंस्टॉल होने पर कैश मेमोरी अमान्य हो गई थी. इसलिए, अगर सर्विस वर्कर उपयोगकर्ताओं को अपडेट किया गया ऐप्लिकेशन कभी नहीं मिला.
इसे लचीला बनाएं
सर्विस वर्कर स्क्रिप्ट भले ही बैकग्राउंड में चलती हैं, लेकिन उन्हें किसी भी समय बंद किया जा सकता है. यहां तक कि जब I/O कार्रवाइयों (नेटवर्क, IDB वगैरह) के बीच में हों. लंबे समय तक चलने वाली किसी भी प्रोसेस को उन्हें किसी भी समय फिर से शुरू कर सकते हैं.
बड़ी फ़ाइलों को सर्वर पर अपलोड करने और IDB में सेव करने वाली सिंक प्रोसेस के मामले में, हमारा समाधान बाधित आंशिक अपलोड के लिए, हमारी आंतरिक अपलोड लाइब्रेरी के फिर से शुरू किए जा सकने वाले सिस्टम, अपलोड करने से पहले फिर से शुरू किए जा सकने वाले अपलोड यूआरएल को IDB में सेव कर सकता है और उस यूआरएल का इस्तेमाल करके, उसे पहली बार में अपलोड नहीं किया जा सकता. साथ ही, लंबे समय तक चलने वाले किसी भी I/O ऑपरेशन से पहले, आईडीबी में सेव किया गया था, ताकि यह पता चल सके कि हर रिकॉर्ड के लिए हम प्रोसेस में कहां थे.
वैश्विक स्थिति पर निर्भर न रहें
सर्विस वर्कर अलग-अलग कॉन्टेक्स्ट में मौजूद होते हैं. इसलिए, कई सिंबल के मौजूद नहीं होने की वजह से ऐसा हो सकता है
उपस्थित. हमारे बहुत सारे कोड window कॉन्टेक्स्ट के साथ-साथ सर्विस वर्कर कॉन्टेक्स्ट (जैसे कि
जैसे कि लॉगिंग, फ़्लैग, सिंकिंग वगैरह. यह ज़रूरी है कि कोड उन सेवाओं के लिए सुरक्षित हो जिनका इस्तेमाल किया जाता है. जैसे,
लोकल स्टोरेज या कुकी का इस्तेमाल किया जाता है. Google Analytics 4 पर माइग्रेट करने के लिए,
globalThis
ग्लोबल ऑब्जेक्ट को इस तरह से रेफ़र करें जो सभी कॉन्टेक्स्ट में काम करे. सेव किए गए डेटा का भी इस्तेमाल करें
में ग्लोबल वैरिएबल की संख्या कम है, क्योंकि इस बात की कोई गारंटी नहीं है कि स्क्रिप्ट कब खत्म होगी और
राज्य को खदेड़ दिया गया था.
लोकल डेवलपमेंट
सर्विस वर्कर का एक मुख्य कॉम्पोनेंट, संसाधनों को स्थानीय तौर पर कैश मेमोरी में सेव करना होता है. हालांकि, डेवलपमेंट के दौरान
यह आपकी पसंद से पूरी तरह उलट होता है. खास तौर पर, जब अपडेट लेज़ी तरीके से किए जाएं. आपको अब भी चाहिए
सर्वर वर्कर को इंस्टॉल किया गया है, ताकि आप इसके साथ होने वाली समस्याओं को डीबग कर सकें या दूसरे एपीआई के साथ काम कर सकें, जैसे कि
बैकग्राउंड सिंक या सूचनाएं. Chrome पर, Chrome DevTools की मदद से ऐसा किया जा सकता है
नेटवर्क के लिए बायपास चेकबॉक्स (ऐप्लिकेशन पैनल > सर्विस वर्कर पैनल) को चालू करना
नेटवर्क पैनल में कैश मेमोरी बंद करें चेकबॉक्स को चालू करने के अलावा,
कैश मेमोरी को बंद कर दें. ज़्यादा ब्राउज़र को कवर करने के लिए, हमने
हमारे सर्विस वर्कर में, कैश मेमोरी में सेव होने की सुविधा बंद करने के लिए फ़्लैग शामिल है. यह सेटिंग, डेवलपर पर डिफ़ॉल्ट रूप से चालू रहती है
बिल्ड. इससे यह पक्का होता है कि डेवलपर को हमेशा हाल ही में किए गए बदलाव मिलते हैं. इसके लिए, उन्हें कैश मेमोरी में सेव करने की कोई समस्या नहीं होती. यह समय है
Cache-Control: no-cache हेडर को शामिल करना और ब्राउज़र को
किसी ऐसेट को कैश मेमोरी में सेव करना.
लाइटहाउस
Lighthouse कई तरह की डीबग करने की सुविधा देता है पीडब्ल्यूए के लिए काम आने वाले टूल. यह सुविधा, साइट को स्कैन करती है और पीडब्ल्यूए, परफ़ॉर्मेंस, और अन्य सबसे सही तरीक़े शामिल हैं. हमारा सुझाव है कि आप लाइटहाउस को लगातार चलाएं इंटिग्रेशन का इस्तेमाल करें, ताकि पीडब्ल्यूए होने की ज़रूरी शर्तें हैं. हमारे साथ एक बार ऐसा हुआ था, जहां सर्विस वर्कर इंस्टॉल नहीं कर रहा था और प्रोडक्शन शुरू होने से पहले हमें इसके बारे में पता नहीं था. हमारे सीआई के हिस्से के तौर पर लाइटहाउस होने से ने रोक दिया.
लगातार कॉन्टेंट उपलब्ध कराने की सुविधा अपनाएं
सर्विस वर्कर अपने-आप अपडेट हो सकते हैं. इसलिए, उपयोगकर्ताओं के पास अपग्रेड को सीमित करने की सुविधा नहीं होती. यह जंगलों में पुराने ग्राहकों की संख्या में काफ़ी कमी आई है. जब उपयोगकर्ता ने हमारा ऐप्लिकेशन खोला था, सर्विस वर्कर पुराने क्लाइंट को सेवा देगा और वह नए क्लाइंट को लेज़ी तरीके से डाउनलोड करेगा. एक बार नया क्लाइंट डाउनलोड किया है, तो इससे उपयोगकर्ता को नई सुविधाओं को ऐक्सेस करने के लिए पेज को रीफ़्रेश करने का संकेत मिलेगा. भले ही उपयोगकर्ता ने इस अनुरोध को अनदेखा कर दिया है, तो अगली बार जब वे पेज रीफ़्रेश करेंगे, तो उन्हें नया वर्शन पर काम करता है. इस वजह से, उपयोगकर्ता के लिए सिस्टम के अपडेट को अस्वीकार करना काफ़ी मुश्किल हो जाता है आसान बना दिया है.
माइग्रेशन में लगने वाले समय को काफ़ी कम करके, हम बैकएंड में हुए बदलावों को ठीक करने में कामयाब रहे क्लाइंट. आम तौर पर, हम उपयोगकर्ताओं को एक महीने का समय देते हैं, ताकि वे नए क्लाइंट बनाने से पहले उन्हें अपडेट कर सकें नुकसान पहुंचा सकता है. हालांकि, ऐप्लिकेशन पुराना होने के बावजूद काम करेगा, इसलिए असल में पुराने क्लाइंट के लिए ऐसा किया जा सकता था अगर उपयोगकर्ता ने लंबे समय तक ऐप्लिकेशन नहीं खोला है, तो यह जंगल में मौजूद रहती है. iOS पर सर्विस वर्कर कुछ हफ़्तों के बाद हटा दिया गया इसलिए ऐसा नहीं होता है. Android के लिए, इस समस्या को तब कम किया जा सकता है, जब पुरानी जानकारी हो या कुछ हफ़्तों के बाद, कॉन्टेंट को मैन्युअल तरीके से हटा दिया गया हो. असल में, हमने पुराने ग्राहकों से जुड़ी समस्याएं. कोई टीम यहां कितनी सख्ती बरतना चाहती है, यह उसके खास इस्तेमाल पर निर्भर करता है केस, लेकिन iOS/Android ऐप्लिकेशन की तुलना में PWA ज़्यादा सुविधाएं देते हैं.
सर्विस वर्कर में कुकी वैल्यू हासिल करना
कभी-कभी सर्विस वर्कर के हिसाब से, कुकी की वैल्यू को ऐक्सेस करना ज़रूरी होता है. हमारे मामले में, हम
पहले पक्ष के एपीआई अनुरोधों की पुष्टि करने के लिए टोकन जनरेट करने के लिए, कुकी की वैल्यू को ऐक्सेस करना ज़रूरी होता है. में
सर्विस वर्कर, document.cookies जैसे सिंक्रोनस एपीआई उपलब्ध नहीं हैं. आप किसी भी समय
हालांकि, कुकी मानों का अनुरोध करने के लिए सर्विस वर्कर से सक्रिय (विंडो वाले) क्लाइंट को एक संदेश भेजता है
सर्विस वर्कर के लिए संभव है कि वह किसी विंडो वाले क्लाइंट के बिना बैकग्राउंड में काम करे
उपलब्ध हैं, जैसे कि बैकग्राउंड सिंक के दौरान. इससे बचने के लिए, हमने अपने
फ़्रंटएंड सर्वर का इस्तेमाल करता है. सर्विस वर्कर ने
इस एंडपॉइंट पर नेटवर्क अनुरोध भेज सकता है और कुकी की वैल्यू पाने के लिए, इसके जवाब को पढ़ सकता है.
रिलीज़ के साथ Cookie Store API, यह समाधान अब इसका समर्थन करने वाले ब्राउज़र के लिए आवश्यक नहीं है, क्योंकि यह साथ ही, इसे ब्राउज़र कुकी पर एसिंक्रोनस ऐक्सेस कर सकता है. साथ ही, इसका इस्तेमाल सर्विस वर्कर सीधे तौर पर कर सकता है.
जनरेट नहीं किए गए सर्विस वर्कर के लिए समस्याएं
पक्का करें कि कैश मेमोरी में सेव की गई किसी फ़ाइल में बदलाव होने पर, सर्विस वर्कर स्क्रिप्ट में बदलाव हो
सर्विस वर्कर का एक सामान्य पीडब्ल्यूए पैटर्न, इस दौरान सभी स्टैटिक ऐप्लिकेशन फ़ाइलें इंस्टॉल करता है
install चरण, जो क्लाइंट को सीधे सभी
बाद की विज़िट . सर्विस वर्कर केवल तभी इंस्टॉल किए जाते हैं, जब ब्राउज़र यह पता लगा लेता है कि
वर्कर स्क्रिप्ट में कोई बदलाव हुआ है, इसलिए हमें यह पक्का करना पड़ा कि सर्विस वर्कर स्क्रिप्ट फ़ाइल
कैश मेमोरी में सेव की गई फ़ाइल के बदलने पर, किसी तरह का बदलाव हो सकता है. हमने मैन्युअल रूप से
हमारे सर्विस वर्कर स्क्रिप्ट में मौजूद स्टैटिक रिसॉर्स फ़ाइलसेट का इस्तेमाल किया जाता है. इसलिए, हर रिलीज़ ने एक अलग
सर्विस वर्कर की JavaScript फ़ाइल. सर्विस वर्कर लाइब्रेरी
Workbox की मदद से यह प्रोसेस अपने-आप हो जाएगी.
यूनिट टेस्टिंग
सर्विस वर्कर एपीआई, ग्लोबल ऑब्जेक्ट में इवेंट लिसनर जोड़कर काम करते हैं. उदाहरण के लिए:
self.addEventListener('fetch', (evt) => evt.respondWith(fetch('/foo')));
इसकी जांच करने में परेशानी हो सकती है, क्योंकि आपको इवेंट ट्रिगर, इवेंट ऑब्जेक्ट की नकल करने की ज़रूरत है. इसके लिए इंतज़ार करें
respondWith() कॉलबैक करके, और फिर प्रॉमिस का इंतज़ार किया जा सकता है. इसके बाद ही नतीजे पर दावा किया जाता है. अगर आप
इसे स्ट्रक्चर करने का आसान तरीका, सभी इंप्लीमेंटेशन को किसी दूसरी फ़ाइल में सौंपना है. यह तरीका
परीक्षण किया गया.
import fetchHandler from './fetch_handler.js';
self.addEventListener('fetch', (evt) => evt.respondWith(fetchHandler(evt)));
सर्विस वर्कर स्क्रिप्ट की यूनिट की जांच करने में आने वाली परेशानियों की वजह से, हमने कोर सर्विस वर्कर को रखा स्क्रिप्ट को ज़्यादा से ज़्यादा बुनियादी स्क्रिप्ट के साथ, लागू करने के ज़्यादातर हिस्सों को अन्य मॉड्यूल में बांट दिया जाता है. से वे फ़ाइलें सिर्फ़ स्टैंडर्ड JS मॉड्यूल थीं. स्टैंडर्ड टेस्ट की मदद से, उन्हें यूनिट के तौर पर टेस्ट किया जा सकता था लाइब्रेरी.
पार्ट 2 और 3 के लिए हमारे साथ बने रहें
इस सीरीज़ के दूसरे और तीसरे हिस्से में, हम मीडिया मैनेजमेंट और iOS से जुड़ी समस्याओं के बारे में बात करेंगे. अगर आपको क्या आपको Google में पीडब्ल्यूए बनाने के बारे में और जानकारी चाहिए, तो यह जानने के लिए हमारी लेखक प्रोफ़ाइल पर जाएं हमसे कैसे संपर्क करें: