बहुत ज़्यादा शब्द
Chrome 68 से, सर्विस वर्कर स्क्रिप्ट के अपडेट की जांच करने वाले एचटीटीपी अनुरोध
एचटीटीपी कैश की मदद से पूरा किया जाता है
डिफ़ॉल्ट रूप से. यह डेवलपर से जुड़ी सामान्य समस्याएं हल करने के लिए काम करता है,
इसमें आपकी सर्विस वर्कर स्क्रिप्ट पर अनजाने Cache-Control हेडर को सेट करने का विकल्प होता है
अपडेट करने में समय लग सकता है.
अगर आपने अपनी /service-worker.js स्क्रिप्ट को ब्राउज़र में दिखाकर, एचटीटीपी कैश मेमोरी में डेटा सेव करने की सुविधा से पहले ही ऑप्ट-आउट कर दिया है
Cache-Control: max-age=0 के साथ, तो आपको नए डिफ़ॉल्ट विकल्प की वजह से कोई बदलाव नहीं दिखेगा
व्यवहार.
इसके अलावा, Chrome 78 से, बाइट-दर-बाइट की तुलना
सर्विस वर्कर में लोड की गई स्क्रिप्ट पर लागू होती है
importScripts().
इंपोर्ट की गई स्क्रिप्ट में किए गए किसी भी बदलाव से
सर्विस वर्कर अपडेट होने का फ़्लो,
बिलकुल वैसे ही, जैसे टॉप-लेवल सर्विस वर्कर में होने वाले बदलाव से होता है.
बैकग्राउंड
जब भी आप किसी ऐसे नए पेज पर जाते हैं जो सर्विस वर्कर के दायरे में आता है, तो साफ़ तौर पर registration.update() को कॉल करें
या जब कोई सर्विस वर्कर "काम करता है" होता है ब्राउज़र में, push या sync इवेंट के ज़रिए
साथ ही, उस JavaScript संसाधन का अनुरोध करेगा जिसे मूल रूप से
सर्विस वर्कर स्क्रिप्ट के अपडेट देखने के लिए, navigator.serviceWorker.register() कॉल.
इस लेख में दी गई जानकारी के हिसाब से, मान लें कि इसका यूआरएल /service-worker.js है और यह
इसमें importScripts() को किया गया एक कॉल है,
जो सर्विस वर्कर के अंदर चलाए जाने वाले अतिरिक्त कोड को लोड करता है:
// Inside our /service-worker.js file:
importScripts('path/to/import.js');
// Other top-level code goes here.
क्या बदलाव होने वाले हैं?
Chrome 68 से पहले के वर्शन में, /service-worker.js को अपडेट करने का अनुरोध, एचटीटीपी कैश मेमोरी से किया जाता था
(जैसा कि ज़्यादातर फ़ेच किए जाते हैं). इसका मतलब यह था कि अगर स्क्रिप्ट मूल रूप से Cache-Control:
max-age=600 के साथ भेजी गई थी, तो अगले 600 सेकंड (10 मिनट) में होने वाले अपडेट नेटवर्क में नहीं जाएंगे, इसलिए
हो सकता है कि उपयोगकर्ता को सर्विस वर्कर का सबसे अप-टू-डेट वर्शन न मिले. हालांकि, अगर max-age था
86,400 (24 घंटे) से ज़्यादा होने पर, इसे 86400 के तौर पर माना जाएगा, ताकि उपयोगकर्ताओं को कोई समस्या न आए
उसमें बदलाव कर सकें.
सर्विस वर्कर को अपडेट करने का अनुरोध करते समय, एचटीटीपी कैश मेमोरी को अनदेखा कर दिया जाएगा. यह वर्शन 68 से शुरू होगा
स्क्रिप्ट है, इसलिए मौजूदा वेब ऐप्लिकेशन को अपनी
सर्विस वर्कर स्क्रिप्ट. importScripts के अनुरोध अब भी एचटीटीपी कैश मेमोरी के ज़रिए किए जाएंगे. हालांकि, यह है
सिर्फ़ डिफ़ॉल्ट तौर पर—रजिस्ट्रेशन का एक नया विकल्प, updateViaCache उपलब्ध है. यह
यह व्यवहार.
updateViaCache
navigator.serviceWorker.register() को कॉल करते समय, डेवलपर अब एक नए विकल्प को पास कर सकते हैं: updateViaCache पैरामीटर.
इसके लिए तीन में से एक वैल्यू की ज़रूरत होती है: 'imports', 'all' या 'none'.
वैल्यू से यह तय होता है कि ब्राउज़र की स्टैंडर्ड एचटीटीपी कैश मेमोरी है या नहीं और अगर है, तो कैसे उस समय लागू होता है जब अपडेट किए गए सर्विस वर्कर संसाधनों की जांच करने के लिए एचटीटीपी अनुरोध किया जाता है.
'imports'पर सेट किए जाने पर,/service-worker.jsस्क्रिप्ट, लेकिन इंपोर्ट की गई स्क्रिप्ट फ़ेच करते समय आपसे सलाह ली जाएगी (हमारे उदाहरण में,path/to/import.js). यह डिफ़ॉल्ट है और यह शुरू होने वाले व्यवहार से मेल खाता है Chrome 68 में.'all'पर सेट होने पर, एचटीटीपी कैश मेमोरी से दोनों के लिए अनुरोध करते समय सलाह ली जाएगी टॉप लेवल/service-worker.jsस्क्रिप्ट और सेवा के अंदर इंपोर्ट की गई सभी स्क्रिप्ट कर्मचारी, जैसेpath/to/import.js. यह विकल्प Chrome की पिछली कार्रवाइयों के हिसाब से होता है, Chrome 68 से पहले का है.'none'पर सेट होने पर, दोनों में से किसी एक के लिए अनुरोध करते समय, एचटीटीपी कैश की मदद नहीं ली जाएगी टॉप लेवल/service-worker.jsया इंपोर्ट की गई किसी स्क्रिप्ट के लिए, जैसे कि काल्पनिकpath/to/import.js.
उदाहरण के लिए, नीचे दिया गया कोड सर्विस वर्कर को रजिस्टर करेगा. साथ ही, यह पक्का करेगा कि एचटीटीपी कैश
/service-worker.js स्क्रिप्ट या किसी भी स्क्रिप्ट में अपडेट के बारे में पता करते समय
स्क्रिप्ट, जिनका संदर्भ /service-worker.js के अंदर importScripts() के ज़रिए दिया गया है:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js', {
updateViaCache: 'none',
// Optionally, set 'scope' here, if needed.
});
}
इंपोर्ट की गई स्क्रिप्ट के अपडेट की जांच करता है
Chrome 78 से पहले, किसी भी सर्विस वर्कर स्क्रिप्ट को
importScripts()
को सिर्फ़ एक बार फ़ेच किया जाएगा (पहले एचटीटीपी कैश के लिए या
नेटवर्क, updateViaCache कॉन्फ़िगरेशन पर निर्भर करता है. उसके बाद
उसे ब्राउज़र में अंदरूनी तौर पर सेव किया जाता है और कभी भी फिर से नहीं लाया जाता.
इसका एकमात्र तरीका यह है कि पहले से इंस्टॉल किए हुए सर्विस वर्कर को
एक आयात की गई स्क्रिप्ट स्क्रिप्ट का URL बदलने के लिए थी, आम तौर पर
Semver वैल्यू (उदाहरण के लिए,
importScripts('https://example.com/v1.1.0/index.js')) या
कॉन्टेंट (जैसे, importScripts('https://example.com/index.abcd1234.js')). ऐप्लिकेशन
इंपोर्ट किए गए यूआरएल को बदलने का खराब असर यह होता है कि टॉप-लेवल सर्विस वर्कर
स्क्रिप्ट की सामग्री बदल जाती है, जो बदले में
सर्विस वर्कर अपडेट होने का फ़्लो.
Chrome 78 और इसके बाद के वर्शन में, हर बार टॉप लेवल के लिए अपडेट की जांच किए जाने पर
सर्विस वर्कर फ़ाइल, यह तय करने के लिए कि क्या
इंपोर्ट की गई स्क्रिप्ट के कॉन्टेंट में कोई बदलाव नहीं हुआ है. इसके आधार पर
Cache-Control हेडर इस्तेमाल किए गए. इंपोर्ट की गई स्क्रिप्ट की ये जांच, इन गतिविधियों के लिए पूरी की जा सकती हैं
एचटीटीपी कैश का इस्तेमाल तब करेगा, जब updateViaCache को 'all' या 'imports' पर सेट किया गया हो (जो कि
डिफ़ॉल्ट वैल्यू है) या चेक नेटवर्क से सीधे तौर पर जुड़े हुए हैं, तो
updateViaCache को 'none' पर सेट किया गया.
अगर इंपोर्ट की गई स्क्रिप्ट के लिए अपडेट की जांच में बाइट-दर-बाइट का अंतर आता है सर्विस वर्कर के सेव किए गए डेटा की तुलना में, पहले से स्टोर किए गए डेटा सर्विस वर्कर के अपडेट फ़्लो को ट्रिगर करता हो, भले ही टॉप-लेवल की सेवा काम कर रही हो वर्कर फ़ाइल में कोई बदलाव नहीं होगा.
Chrome 78 का व्यवहार वही काम करता है जो Firefox ने implemented कई साल पहले, Firefox 56 में. Safari पहले से ही इस व्यवहार को इस तरह लागू करता है करते हैं.
डेवलपर को क्या करना होगा?
अगर आपने अपनी /service-worker.js स्क्रिप्ट को चलाकर, एचटीटीपी कैश मेमोरी से ऑप्ट-आउट कर लिया है
Cache-Control: max-age=0 (या इससे मिलती-जुलती वैल्यू) का इस्तेमाल किया है, तो आपको इसकी वजह से कोई बदलाव नहीं दिखेगा
नया डिफ़ॉल्ट व्यवहार.
अगर आप एचटीटीपी कैश मेमोरी में सेव करने की सुविधा चालू करके अपनी /service-worker.js स्क्रिप्ट दिखाते हैं, तो ऐसा जान-बूझकर करें
या ऐसा इसलिए, क्योंकि यह सिर्फ़ आपके होस्टिंग एनवायरमेंट के लिए डिफ़ॉल्ट सेटिंग है,
आपको /service-worker.js के लिए किए गए अतिरिक्त एचटीटीपी अनुरोधों में बढ़ोतरी दिख सकती है. ये अनुरोध,
आपके सर्वर—ये ऐसे अनुरोध हैं जिन्हें एचटीटीपी कैश मेमोरी से पूरा किया जाता था. अगर आपको
Cache-Control हेडर वैल्यू को जारी रखने के लिए,
/service-worker.js, आपको updateViaCache: 'all' को सेट करना होगा, जब
आपका सर्विस वर्कर रजिस्टर करना.
यह देखते हुए कि ब्राउज़र के पुराने वर्शन का इस्तेमाल करने वाले लोगों की संख्या लंबी हो सकती है, फिर भी हमारा सुझाव है कि
सर्विस वर्कर स्क्रिप्ट पर, Cache-Control: max-age=0 एचटीटीपी हेडर सेट करना जारी रखें
तो नए ब्राउज़र उन्हें अनदेखा कर सकते हैं.
डेवलपर इस अवसर का इस्तेमाल यह तय करने के लिए कर सकते हैं कि क्या वे अपने इंपोर्ट किए गए एक्सटेंशन को साफ़ तौर पर ऑप्ट इन करना चाहते हैं
स्क्रिप्ट को एचटीटीपी कैश मेमोरी से बाहर निकालता है और updateViaCache: 'none' को अपने सर्विस वर्कर में जोड़ता है
रजिस्ट्रेशन.
इंपोर्ट की गई स्क्रिप्ट दिखाई जा रही हैं
Chrome 78 और इसके बाद के वर्शन में, डेवलपर को
importScripts() के ज़रिए लोड किए गए संसाधन, क्योंकि अब इनकी जांच की जाएगी
अपडेट.
अगर आपको इस अतिरिक्त एचटीटीपी ट्रैफ़िक से बचना है, तो 'लंबे समय तक लाइव जाएं' सेट करें
ऐसी स्क्रिप्ट देते समय Cache-Control हेडर जिनमें सेवर या हैश शामिल हों
साथ ही, ये 'imports' के डिफ़ॉल्ट updateViaCache व्यवहार पर निर्भर होते हैं.
इसके अलावा, अगर आप चाहते हैं कि इंपोर्ट की गई स्क्रिप्ट की नियमित तौर पर जांच की जाए
अपडेट देखें, तो पक्का करें कि आप उन्हें Cache-Control: max-age=0 के साथ सेवा देते हों,
या यह कि updateViaCache: 'none' का इस्तेमाल किया जा रहा है.
इसके बारे में और पढ़ें
"सर्विस वर्कर का लाइफ़साइकल" और "कैश मेमोरी में सेव करने के सबसे सही तरीके और मैक्स-एज गॉचास", वेब पर कुछ भी डिप्लॉय करने वाले सभी डेवलपर को पढ़ने का सुझाव दिया जाता है. ये दोनों बातें जेक आर्चीबाल्ड ने तैयार की हैं.