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

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

Jeff Posnick

बैकग्राउंड

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

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

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

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

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

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

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

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

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

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

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

दूसरे कर्मचारियों का क्या होगा?

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

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

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

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

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

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

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

Safari ने टेक्नोलॉजी की झलक 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 या UMD फ़ॉर्मैट में बंडल किए गए हैं, तो उन्हें importScripts() का इस्तेमाल करके इंपोर्ट किया जा सकता है.

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

_Unस्प्लैश पर Vlado Paunonic की फ़ोटो_