একটি ওয়ার্কবক্স মডিউল যা এই ডকুমেন্টেশনে এখনও বেশি কভারেজ পায়নি তা হল workbox-window
, যা window
চালানোর উদ্দেশ্যে মডিউলগুলির একটি সেট৷ এই মডিউলটির লক্ষ্যগুলি হল:
- ডেভেলপারদের পরিষেবা কর্মী জীবনচক্রের গুরুত্বপূর্ণ মুহূর্তগুলি সনাক্ত করতে সাহায্য করে পরিষেবা কর্মী নিবন্ধন এবং আপডেটগুলিকে সহজ করার জন্য, সেই মুহুর্তগুলিতে প্রতিক্রিয়া জানানো সহজ করে৷
- ডেভেলপারদের সাধারণ ভুল করা থেকে আটকাতে, যেমন ভুল সুযোগে একজন পরিষেবা কর্মী নিবন্ধন করা।
-
window
এবং সার্ভিস ওয়ার্কার স্কোপের মধ্যে মেসেজিং সহজ করতে।
workbox-window
আমদানি এবং ব্যবহার করা
আপনি প্রায়শই workbox-window
থেকে যে রপ্তানিটি ব্যবহার করবেন তা হল Workbox
ক্লাস, যা আপনি হয় নোডে আমদানি করতে পারেন, অথবা একটি ওয়েবপৃষ্ঠার CDN থেকে।
একটি স্থানীয় বান্ডিল তৈরি করা হচ্ছে
যদি আপনার টুলচেইনে ওয়েবপ্যাক বা রোলআপের মতো একটি বান্ডলার অন্তর্ভুক্ত থাকে, তাহলে আপনি স্থানীয়ভাবে workbox-window
বান্ডিল করতে পারেন।
প্রথমে, আপনার অ্যাপ্লিকেশনের উত্পাদন নির্ভরতা হিসাবে workbox-window
ইনস্টল করুন:
npm install workbox-window --save
তারপর, আপনার অ্যাপ্লিকেশন জাভাস্ক্রিপ্টে, আপনি workbox-window
থেকে Workbox
ক্লাস import
পারেন:
<script type="module">
import {Workbox} from 'workbox-window';
if ('serviceWorker' in navigator) {
const wb = new Workbox('/sw.js');
wb.register();
}
</script>
যদিও workbox-window
বেশ ছোট, আপনি ডাইনামিক import
ব্যবহার করে আপনার ওয়েবসাইটের মূল অ্যাপ্লিকেশন লজিক থেকে এটিকে বিভক্ত করতে পারেন , যা আপনার পৃষ্ঠার প্রধান বান্ডেলের আকার কমাতে পারে:
<script type="module">
if ('serviceWorker' in navigator) {
const {Workbox} = await import('workbox-window');
const wb = new Workbox('/sw.js');
wb.register();
}
</script>
CDN ব্যবহার করে
প্রস্তাবিত পদ্ধতি না হলেও, workbox-window
ব্যবহার করার একটি সহজ উপায় হল এটি একটি CDN থেকে আমদানি করা:
<script type="module">
import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-window.prod.mjs';
if ('serviceWorker' in navigator) {
const wb = new Workbox('/sw.js');
wb.register();
}
</script>
আপনি লক্ষ্য করবেন যে উপরের উদাহরণে <script>
উপাদানটি type="module"
অ্যাট্রিবিউট ব্যবহার করে। আপনি যদি বিল্ড স্টেপ ছাড়াই ব্রাউজারে স্ট্যাটিক import
স্টেটমেন্ট ব্যবহার করতে চান তাহলে এটি প্রয়োজন। সমস্ত প্রধান ব্রাউজার যেগুলি পরিষেবা কর্মীদের সমর্থন করে তারা জাভাস্ক্রিপ্ট মডিউলগুলিকেও সমর্থন করে, তাই এই কোডটি যে কোনও ব্রাউজারে পরিবেশন করা ভাল, কারণ পুরোনো ব্রাউজারগুলি "module"
এর type
অ্যাট্রিবিউট মান সহ <script>
উপাদানগুলিকে উপেক্ষা করবে।
একটি সেবা কর্মী নিবন্ধন
workbox-window
দিয়ে একজন পরিষেবা কর্মীকে নিবন্ধন করা Workbox
ক্লাসের register
পদ্ধতির মাধ্যমে সম্পন্ন করা হয়:
import {Workbox} from 'workbox-window';
const wb = new Workbox('/sw.js');
wb.register();
এটা মনে হতে পারে যে এটি navigator.serviceWorker.register
ব্যবহার করে একজন পরিষেবা কর্মীকে নিবন্ধন করার মতই। যাইহোক, Workbox.register
পরিষেবা কর্মী নিবন্ধন করার আগে window
load
ইভেন্ট পর্যন্ত অপেক্ষা করার যত্ন নেয়। এটি এমন পরিস্থিতিতে বাঞ্ছনীয় যেখানে প্রিক্যাচিং জড়িত তাই ব্যান্ডউইথ বিতর্ক যা পৃষ্ঠা শুরুতে বিলম্ব করতে পারে এড়ানো যেতে পারে।
window
এবং পরিষেবা কর্মীর সুযোগের মধ্যে যোগাযোগ
পরিষেবা কর্মীদের window
থেকে আলাদা তাদের নিজস্ব সুযোগ রয়েছে এবং window
উপলব্ধ API-এর একটি উপসেটে তাদের অ্যাক্সেস রয়েছে। যাইহোক, window
এবং পরিষেবা কর্মীর মধ্যে যোগাযোগ করা সম্ভব। workbox-window
workbox-window
মডিউলের messageSW
পদ্ধতির মাধ্যমে দুটি স্কোপের মধ্যে সহজ যোগাযোগের অনুমতি দেয়।
ওয়ার্কবক্স বার্তাগুলির জন্য একটি নির্দিষ্ট বিন্যাস ব্যবহার করে নিম্নলিখিত বৈশিষ্ট্য সহ একটি বস্তু:
-
type
একটি প্রয়োজনীয় অনন্য স্ট্রিং যা বার্তা সনাক্ত করে। বিন্যাসটি আন্ডারস্কোর আলাদা করার শব্দ সহ বড় হাতের অক্ষরে হওয়া উচিত (উদাহরণস্বরূপ,CACHE_URLS
)। -
meta
হল একটি ঐচ্ছিক স্ট্রিং যা বার্তা পাঠানোর ওয়ার্কবক্স প্যাকেজের নাম উপস্থাপন করে এবং সাধারণত বাদ দেওয়া হয়। -
payload
হল একটি ঐচ্ছিক পরামিতি যা আপনি যে ডেটা পাঠাতে চান তা উপস্থাপন করে। এটা যে কোন ডাটা টাইপ হতে পারে।
নিচে messageSW
কীভাবে কাজ করে তার একটি উদাহরণ দেওয়া হল, আপনার পরিষেবা কর্মীর কোড দিয়ে শুরু করে:
// sw.js
const SW_VERSION = '1.0.0';
self.addEventListener('message', (event) => {
if (event.data.type === 'GET_VERSION') {
event.ports[0].postMessage(SW_VERSION);
}
});
এবং তারপর আপনার ওয়েবপৃষ্ঠায় নিম্নলিখিত কোড:
const wb = new Workbox('/sw.js');
wb.register();
const swVersion = await wb.messageSW({type: 'GET_VERSION'});
console.log('Service Worker version:', swVersion);
এমন অনেক দৃষ্টান্ত রয়েছে যেখানে একজন পরিষেবা কর্মী এবং window
মধ্যে যোগাযোগ করা দরকারী হতে পারে, যেমন কোনও পরিষেবা কর্মী আপডেট উপলব্ধ থাকলে ব্যবহারকারীকে অবহিত করা । সেই রেসিপিটি self.skipWaiting
এর জন্য একটি বিশেষ সহায়ক পদ্ধতির উপর নির্ভর করে যাকে messageSkipWaiting
বলা হয়, যা SKIP_WAITING
এর type
মান সহ একটি বার্তা পাঠায়।