importScripts()-এর একটি আধুনিক বিকল্প।
ব্যাকগ্রাউন্ড
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'}) দিয়ে তৈরি করা হয়েছে—সেগুলির জন্য সহায়তা আরও বেশি বিস্তৃত, এবং
ভার্সন ৮০ থেকে Chrome ও Edge-এ এবং
Safari-এর সাম্প্রতিক ভার্সনে কাজ করে।
ডেডিকেটেড ওয়ার্কারের ক্ষেত্রে স্ট্যাটিক ও ডায়নামিক, দুই ধরনের ES মডিউল ইমপোর্ট করার সুবিধা উপলভ্য।
Chrome এবং Edge ভার্সন ৮৩ থেকে শেয়ার করা ওয়ার্কার-এ ES মডিউল সাপোর্ট করে, তবে এই মুহূর্তে অন্য কোনও ব্রাউজার সাপোর্ট করে না।
ম্যাপ ইমপোর্ট করার সুবিধা নেই
ইমপোর্ট ম্যাপ রানটাইম এনভায়রনমেন্টকে মডিউল স্পেসিফায়ার রিরাইট করার অনুমতি দেয়, যেমন, পছন্দের CDN-এর URL আগে যোগ করা যেখান থেকে ES মডিউল লোড করা যেতে পারে।
Chrome এবং Edge ভার্সন ৮৯ এবং তার পরবর্তী ভার্সন ইমপোর্ট ম্যাপ সাপোর্ট করলেও, বর্তমানে সেগুলি সার্ভিস ওয়ার্কারের সাথে ব্যবহার করা যাবে না।
ব্রাউজার সহায়তা
Chrome ও Edge-এর ভার্সন ৯১ থেকে শুরু করে সার্ভিস ওয়ার্কারের ES মডিউল কাজ করে।
Safari টেকনোলজি প্রিভিউ ১২২ রিলিজ-এ সহায়তা যোগ করেছে এবং ডেভেলপাররা আশা করতে পারেন যে ভবিষ্যতে 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 সমস্যা-তে আলোচনা অনুসরণ করতে পারেন।