সেবা কর্মীদের মধ্যে ES মডিউল

importScripts() এর একটি আধুনিক বিকল্প।

Jeff Posnick

পটভূমি

ES মডিউলগুলি এখন কিছু সময়ের জন্য একটি বিকাশকারীর প্রিয় হয়েছে। অন্যান্য অনেক সুবিধার পাশাপাশি, তারা একটি সর্বজনীন মডিউল বিন্যাসের প্রতিশ্রুতি দেয় যেখানে ভাগ করা কোড একবার প্রকাশ করা যেতে পারে এবং ব্রাউজারে এবং Node.js এর মত বিকল্প রানটাইমে চালানো যেতে পারে। যদিও সমস্ত আধুনিক ব্রাউজার কিছু ES মডিউল সমর্থন অফার করে, তারা সমস্ত কোড চালানো যেতে পারে এমন সব জায়গায় সমর্থন দেয় না। বিশেষত, ব্রাউজারের পরিষেবা কর্মীর অভ্যন্তরে ES মডিউল আমদানির জন্য সমর্থন আরও ব্যাপকভাবে উপলব্ধ হতে শুরু করেছে।

এই নিবন্ধটি সাধারণ ব্রাউজার জুড়ে পরিষেবা কর্মীদের ES মডিউল সমর্থনের বর্তমান অবস্থার বিবরণ দেয়, এড়ানোর জন্য কিছু গোটচা সহ, এবং পিছনের-সামঞ্জস্যপূর্ণ পরিষেবা কর্মী কোড শিপিংয়ের জন্য সেরা অনুশীলনগুলি।

কেস ব্যবহার করুন

পরিষেবা কর্মীদের অভ্যন্তরে ES মডিউলগুলির জন্য আদর্শ ব্যবহারের ক্ষেত্রে একটি আধুনিক লাইব্রেরি বা কনফিগারেশন কোড লোড করার জন্য যা ES মডিউল সমর্থন করে এমন অন্যান্য রানটাইমের সাথে ভাগ করা হয়।

ES মডিউলের আগে এইভাবে কোড শেয়ার করার চেষ্টা করা হচ্ছে UMD-এর মতো পুরানো "সার্বজনীন" মডিউল ফরম্যাট ব্যবহার করে যাতে অপ্রয়োজনীয় বয়লারপ্লেট অন্তর্ভুক্ত থাকে এবং কোড লেখা যা বিশ্বব্যাপী উন্মুক্ত ভেরিয়েবলে পরিবর্তন করে।

ES মডিউলগুলির মাধ্যমে আমদানি করা স্ক্রিপ্টগুলি পরিষেবা কর্মী আপডেট প্রবাহকে ট্রিগার করতে পারে যদি তাদের বিষয়বস্তু পরিবর্তন হয়, importScripts() এর আচরণের সাথে মিলে যায়৷

বর্তমান সীমাবদ্ধতা

শুধুমাত্র স্ট্যাটিক আমদানি

ES মডিউল দুটির একটিতে আমদানি করা যেতে পারে: হয় স্থিরভাবে , import ... from '...' , অথবা গতিশীলভাবে , import() পদ্ধতি ব্যবহার করে। একটি পরিষেবা কর্মীর ভিতরে, শুধুমাত্র স্ট্যাটিক সিনট্যাক্স বর্তমানে সমর্থিত।

এই সীমাবদ্ধতা importScripts() ব্যবহারে স্থাপিত অনুরূপ সীমাবদ্ধতার অনুরূপ। importScripts() তে ডায়নামিক কলগুলি কোনও পরিষেবা কর্মীর মধ্যে কাজ করে না, এবং সমস্ত importScripts() কলগুলি, যা সহজাতভাবে সিঙ্ক্রোনাস, পরিষেবা কর্মী তার install পর্বটি সম্পূর্ণ করার আগে অবশ্যই সম্পূর্ণ করতে হবে৷ এই বিধিনিষেধটি নিশ্চিত করে যে ব্রাউজারটি ইনস্টলেশনের সময় পরিষেবা কর্মীদের বাস্তবায়নের জন্য প্রয়োজনীয় সমস্ত জাভাস্ক্রিপ্ট কোড সম্পর্কে জানে এবং অন্তর্নিহিতভাবে ক্যাশে করতে সক্ষম।

অবশেষে, এই নিষেধাজ্ঞা প্রত্যাহার করা হতে পারে, এবং গতিশীল ES মডিউল আমদানির অনুমতি দেওয়া যেতে পারে । আপাতত, নিশ্চিত করুন যে আপনি শুধুমাত্র একজন পরিষেবা কর্মীর ভিতরে স্ট্যাটিক সিনট্যাক্স ব্যবহার করছেন।

অন্য শ্রমিকদের কি হবে?

"ডেডিকেটেড" কর্মীদের ES মডিউলগুলির জন্য সমর্থন —যারা new Worker('...', {type: 'module'}) দিয়ে তৈরি — আরও বিস্তৃত, এবং সংস্করণ 80 থেকে Chrome এবং Edge-এ সমর্থিত হয়েছে, পাশাপাশি সাফারির সাম্প্রতিক সংস্করণ । স্থিতিশীল এবং গতিশীল ES মডিউল আমদানি উভয়ই নিবেদিত কর্মীদের মধ্যে সমর্থিত।

ক্রোম এবং এজ 83 সংস্করণ থেকে ভাগ করা কর্মীদের মধ্যে ES মডিউল সমর্থন করেছে, কিন্তু অন্য কোনো ব্রাউজার এই সময়ে সমর্থন দেয় না।

আমদানি মানচিত্র জন্য কোন সমর্থন

ইমপোর্ট ম্যাপ রানটাইম এনভায়রনমেন্টকে মডিউল স্পেসিফায়ার পুনরায় লেখার অনুমতি দেয়, উদাহরণস্বরূপ, একটি পছন্দের CDN এর ইউআরএল প্রিপেন্ড করে যেখান থেকে ES মডিউল লোড করা যায়।

যদিও Chrome এবং Edge সংস্করণ 89 এবং তার উপরে মানচিত্র আমদানি সমর্থন করে, সেগুলি বর্তমানে পরিষেবা কর্মীদের সাথে ব্যবহার করা যাবে না ।

ব্রাউজার সমর্থন

পরিষেবা কর্মীদের ES মডিউলগুলি 91 সংস্করণ থেকে শুরু করে Chrome এবং Edge-এ সমর্থিত।

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 মডিউল ব্যবহার করে এবং অন্যটি ব্যবহার করে না - আপনাকে বর্তমান ব্রাউজারটি কী সমর্থন করে তা সনাক্ত করতে হবে এবং সংশ্লিষ্ট পরিষেবা কর্মী স্ক্রিপ্টটি নিবন্ধন করতে হবে৷ সমর্থন সনাক্তকরণের জন্য সর্বোত্তম অনুশীলনগুলি বর্তমানে প্রবাহিত, তবে আপনি সুপারিশের জন্য এই গিটহাব ইস্যুতে আলোচনা অনুসরণ করতে পারেন।

_আনস্প্ল্যাশে ভ্লাডো পাউনোভিচের ছবি _