सर्विस वर्कर में ES मॉड्यूल

exportScripts() का एक आधुनिक विकल्प.

जेफ़ पॉस्निक

बैकग्राउंड

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

इस लेख में सामान्य ब्राउज़र पर काम करने वाले सर्विस वर्कर के साथ काम करने वाले ES मॉड्यूल की मौजूदा स्थिति के बारे में जानकारी दी गई है. साथ ही, इससे बचने के लिए कुछ तरीकों की जानकारी दी गई है. साथ ही, पुराने सिस्टम के साथ काम करने वाले सर्विस वर्कर कोड को शिपिंग के लिए सबसे सही तरीकों के बारे में बताया गया है.

इस्तेमाल के उदाहरण

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

ES मॉड्यूल से पहले इस तरह कोड शेयर करने की कोशिश करना, जो UMD जैसे पुराने "यूनिवर्सल" मॉड्यूल फ़ॉर्मैट का इस्तेमाल करते हैं. इनमें ग़ैर-ज़रूरी बॉयलरप्लेट और ऐसा कोड शामिल होता है जिससे दुनिया भर में दिखने वाले वैरिएबल में बदलाव होते हैं.

ES मॉड्यूल से इंपोर्ट की गई स्क्रिप्ट, सर्विस वर्कर के अपडेट फ़्लो को ट्रिगर कर सकती हैं. ऐसा तब होता है, जब कॉन्टेंट में बदलाव होता है और importScripts() के व्यवहार से मेल खाता है.

मौजूदा सीमाएं

सिर्फ़ स्टैटिक इंपोर्ट

ES मॉड्यूल इन दो में से किसी एक तरीके से इंपोर्ट किए जा सकते हैं: स्टैटिक तरीके से, import ... from '...' सिंटैक्स का इस्तेमाल करके या डाइनैमिक तौर पर, import() तरीके का इस्तेमाल करके. सर्विस वर्कर में, फ़िलहाल सिर्फ़ स्टैटिक सिंटैक्स काम करता है.

यह सीमा, importScripts() के इस्तेमाल पर लगाई गई मिलती-जुलती पाबंदी के जैसी है. importScripts() को किए जाने वाले डाइनैमिक कॉल, सर्विस वर्कर में काम नहीं करते. साथ ही, सर्विस वर्कर के install चरण पूरा होने से पहले, सभी importScripts() कॉल पूरी तरह सिंक होते हैं. ये कॉल पूरी तरह सिंक्रोनस होते हैं. इस पाबंदी से यह पक्का होता है कि ब्राउज़र को इंस्टॉलेशन के दौरान सर्विस वर्कर को लागू करने के लिए ज़रूरी सभी JavaScript कोड के बारे में पता है. साथ ही, उसे बिना किसी रुकावट के कैश मेमोरी में सेव किया जा सकता है.

आम तौर पर, यह पाबंदी हटाई जा सकती है और डाइनैमिक ES मॉड्यूल इंपोर्ट की अनुमति दी जा सकती है. फ़िलहाल, यह पक्का करें कि आप सिर्फ़ सर्विस वर्कर के अंदर स्टैटिक सिंटैक्स का इस्तेमाल करें.

अन्य कर्मचारियों का क्या होगा?

"समर्पित" कर्मचारियों में ES मॉड्यूल—जिनके लिए new Worker('...', {type: 'module'}) का इस्तेमाल किया गया है, ज़्यादा बड़े पैमाने पर काम करते हैं. यह सुविधा Chrome और Edge पर काम करती है. यह 80 वर्शन से ही काम करती है और Safari के हाल ही के वर्शन में भी काम करती है. सिर्फ़ कुछ काम करने वाले लोगों को स्टैटिक और डाइनैमिक ईएस मॉड्यूल इंपोर्ट किए जा सकते हैं.

Chrome और Edge में, वर्शन 83 से लेकर अब तक शेयर किए गए वर्कर में ES मॉड्यूल काम करते हैं. हालांकि, फ़िलहाल कोई दूसरा ब्राउज़र यह सुविधा नहीं देता.

मैप इंपोर्ट करने की सुविधा उपलब्ध नहीं है

मैप इंपोर्ट करें से, रनटाइम एनवायरमेंट को मॉड्यूल की खास बातें फिर से लिखने की अनुमति मिलती है. उदाहरण के लिए, इससे पसंदीदा सीडीएन के यूआरएल से पहले जोड़ा जा सकता है, जिससे ES मॉड्यूल लोड किए जा सकते हैं.

हालांकि, Chrome और Edge 99 वर्शन और इसके बाद के वर्शन, मैप को इंपोर्ट करने की सुविधा देते हैं, लेकिन फ़िलहाल इनका सर्विस वर्कर के साथ इस्तेमाल नहीं किया जा सकता.

ब्राउज़र समर्थन

सर्विस वर्कर में ES मॉड्यूल, Chrome और Edge में काम करते हैं. यह वर्शन 91 से शुरू होता है.

Safari ने Technology Preview 122 रिलीज़ में सहायता जोड़ी. डेवलपर को उम्मीद है कि आने वाले समय में, डेवलपर को Safari के स्टेबल वर्शन में भी यह सुविधा दिखेगी.

कोड का उदाहरण

यह किसी वेब ऐप्लिकेशन के window कॉन्टेक्स्ट में शेयर किए गए ES मॉड्यूल का इस्तेमाल करने का एक बुनियादी उदाहरण है. साथ ही, एक ऐसे सर्विस वर्कर को रजिस्टर करने का भी उदाहरण है जो उसी ES मॉड्यूल का इस्तेमाल करता है:

// Inside config.js:
export const cacheName = 'my-cache';

// Inside your web app:
<script type="module">
  import {cacheName} from './config.js';
  // Do something with cacheName.

  await navigator.serviceWorker.register('es-module-sw.js', {
    type: 'module',
  });
</script>

// Inside es-module-sw.js:
import {cacheName} from './config.js';

self.addEventListener('install', (event) => {
  event.waitUntil((async () => {
    const cache = await caches.open(cacheName);
    // ...
  })());
});

पुराने सिस्टम के साथ काम करने की सुविधा

ऊपर दिया गया उदाहरण ठीक से काम करेगा अगर सभी ब्राउज़र, सर्विस वर्कर में ES मॉड्यूल का इस्तेमाल करते हैं, लेकिन इस लेखन के अनुसार, ऐसा नहीं है.

जिन ब्राउज़र में पहले से काम नहीं करता उन्हें शामिल करने के लिए, ES मॉड्यूल के साथ काम करने वाले बंडलर से अपनी सर्विस वर्कर स्क्रिप्ट चलाई जा सकती है. इससे एक ऐसा सर्विस वर्कर बनाया जा सकता है जिसमें सभी मॉड्यूल कोड इनलाइन शामिल हों और पुराने ब्राउज़र में काम करे. इसके अलावा, अगर जिस मॉड्यूल को इंपोर्ट करने की कोशिश की जा रही है वह पहले से ही IIFE या यूएमडी फ़ॉर्मैट में बंडल के तौर पर उपलब्ध है, तो उसे importScripts() का इस्तेमाल करके इंपोर्ट किया जा सकता है.

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

_Unsplash पर व्लाडो पाउनोविक की फ़ोटो_