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

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

Jeff Posnick

बैकग्राउंड

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

मैप इंपोर्ट करने की अनुमति है रनटाइम एनवायरमेंट की मदद से, मॉड्यूल की शर्तों को फिर से लिखने के लिए, उदाहरण के तौर पर, किसी पसंदीदा सीडीएन का यूआरएल, जिससे 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 मॉड्यूल के साथ काम करने वाला बंडलर, ताकि सर्विस वर्कर, जिसमें सभी मॉड्यूल कोड इनलाइन शामिल हैं और जो पुराने ब्राउज़र का इस्तेमाल करें. इसके अलावा, अगर इंपोर्ट किए जाने वाले मॉड्यूल में पहले से उपलब्ध है IIFE या UMD फ़ॉर्मैट में एक्सपोर्ट करने के लिए, इनका इस्तेमाल करके उन्हें इंपोर्ट किया जा सकता है importScripts().

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

_Vlado की ओर से फ़ोटो Unस्प्लैश पर पॉनोविक का सफ़र