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

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

Jeff Posnick

बैकग्राउंड

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

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

उपयोग के उदाहरण

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

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

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

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

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

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

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

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

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

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

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

इंपोर्ट किए गए मैप का इस्तेमाल नहीं किया जा सकता

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

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

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

Chrome और Edge में, सेवा वर्कर में ES मॉड्यूल का इस्तेमाल 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 की इस समस्या पर दी गई चर्चा का पालन किया जा सकता है.

_Unsplash पर मौजूद, Vlado Paunovic की फ़ोटो_