ওয়ার্কবক্স-উইন্ডো ব্যবহার করা

একটি ওয়ার্কবক্স মডিউল যা এই ডকুমেন্টেশনে এখনও বেশি কভারেজ পায়নি তা হল 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 মান সহ একটি বার্তা পাঠায়।