কিছু ক্ষেত্রে, কোনো নির্দিষ্ট ঘটনা সম্পর্কে জানানোর জন্য সার্ভিস ওয়ার্কারকে তার নিয়ন্ত্রণে থাকা সক্রিয় ট্যাবগুলোর যেকোনোটির সাথে আগে থেকেই যোগাযোগ করার প্রয়োজন হতে পারে। উদাহরণস্বরূপ:
- সার্ভিস ওয়ার্কারের নতুন সংস্করণ ইনস্টল হলে পেজটিকে জানানো, যাতে ব্যবহারকারী অবিলম্বে নতুন কার্যকারিতা ব্যবহার করতে পারেন, সেজন্য পেজটি একটি "আপডেট করে রিফ্রেশ করুন" বাটন দেখাতে পারে।
- সার্ভিস ওয়ার্কারের দিকে ক্যাশ করা ডেটাতে কোনো পরিবর্তন হলে, ব্যবহারকারীকে তা জানানোর জন্য একটি ইঙ্গিত দেখানো হয়, যেমন: "অ্যাপটি এখন অফলাইনে কাজ করার জন্য প্রস্তুত" অথবা "কন্টেন্টের নতুন সংস্করণ উপলব্ধ" ।
যেসব ক্ষেত্রে কমিউনিকেশন শুরু করার জন্য সার্ভিস ওয়ার্কারের পেজ থেকে কোনো মেসেজ পাওয়ার প্রয়োজন হয় না, সেগুলোকে আমরা "ব্রডকাস্ট আপডেট" বলব। এই গাইডে আমরা স্ট্যান্ডার্ড ব্রাউজার এপিআই এবং ওয়ার্কবক্স লাইব্রেরি ব্যবহার করে পেজ ও সার্ভিস ওয়ার্কারের মধ্যে এই ধরনের কমিউনিকেশন বাস্তবায়নের বিভিন্ন উপায় পর্যালোচনা করব।
উৎপাদন ক্ষেত্রে
টিন্ডার
টিন্ডার PWA, পেজ থেকে সার্ভিস ওয়ার্কারের লাইফসাইকেলের গুরুত্বপূর্ণ মুহূর্তগুলো ("installed", "controlled" এবং "activated") শোনার জন্য workbox-window ব্যবহার করে। এর ফলে, যখন কোনো নতুন সার্ভিস ওয়ার্কার চালু হয়, তখন এটি একটি "Update Available" ব্যানার দেখায়, যাতে ব্যবহারকারীরা PWA-টি রিফ্রেশ করে সর্বশেষ ফিচারগুলো ব্যবহার করতে পারেন।
স্কুশ
Squoosh PWA- তে, যখন সার্ভিস ওয়ার্কার অফলাইনে কাজ করার জন্য প্রয়োজনীয় সমস্ত অ্যাসেট ক্যাশ করে ফেলে, তখন এটি পেজে একটি "Ready to work offline" টোস্ট মেসেজ পাঠিয়ে ব্যবহারকারীকে এই ফিচারটি সম্পর্কে জানিয়ে দেয়।
ওয়ার্কবক্স ব্যবহার করে
পরিষেবা কর্মীর জীবনচক্রের ঘটনাগুলো শুনুন
workbox-window গুরুত্বপূর্ণ সার্ভিস ওয়ার্কার লাইফসাইকেল ইভেন্টগুলো শোনার জন্য একটি সহজবোধ্য ইন্টারফেস প্রদান করে। অভ্যন্তরীণভাবে, লাইব্রেরিটি updatefound এবং statechange-এর মতো ক্লায়েন্ট-সাইড এপিআই ব্যবহার করে এবং workbox-window অবজেক্টে উচ্চ-স্তরের ইভেন্ট লিসেনার সরবরাহ করে, যা ব্যবহারকারীর জন্য এই ইভেন্টগুলো গ্রহণ করা সহজ করে তোলে।
নিম্নলিখিত পেজ কোডটি আপনাকে সার্ভিস ওয়ার্কারের নতুন সংস্করণ ইনস্টল হওয়ার প্রতিটি মুহূর্ত শনাক্ত করতে সাহায্য করে, যাতে আপনি ব্যবহারকারীকে তা জানাতে পারেন:
const wb = new Workbox('/sw.js');
wb.addEventListener('installed', (event) => {
if (event.isUpdate) {
// Show "Update App" banner
}
});
wb.register();
ক্যাশ ডেটার পরিবর্তন সম্পর্কে পৃষ্ঠাটিকে অবহিত করুন।
Workbox workbox-broadcast-update প্যাকেজটি উইন্ডো ক্লায়েন্টদেরকে একটি ক্যাশ করা রেসপন্স আপডেট হওয়ার বিষয়ে অবহিত করার একটি প্রমিত উপায় প্রদান করে। এটি সাধারণত StaleWhileRevalidate স্ট্র্যাটেজির সাথে একত্রে ব্যবহৃত হয়।
আপডেট ব্রডকাস্ট করতে, সার্ভিস ওয়ার্কার সাইডে আপনার স্ট্র্যাটেজি অপশনগুলিতে একটি broadcastUpdate.BroadcastUpdatePlugin যোগ করুন:
import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {BroadcastUpdatePlugin} from 'workbox-broadcast-update';
registerRoute(
({url}) => url.pathname.startsWith('/api/'),
new StaleWhileRevalidate({
plugins: [
new BroadcastUpdatePlugin(),
],
})
);
আপনার ওয়েব অ্যাপে, আপনি এই ইভেন্টগুলো এইভাবে শুনতে পারেন:
navigator.serviceWorker.addEventListener('message', async (event) => {
// Optional: ensure the message came from workbox-broadcast-update
if (event.data.meta === 'workbox-broadcast-update') {
const {cacheName, updatedUrl} = event.data.payload;
// Do something with cacheName and updatedUrl.
// For example, get the cached content and update
// the content on the page.
const cache = await caches.open(cacheName);
const updatedResponse = await cache.match(updatedUrl);
const updatedText = await updatedResponse.text();
}
});
ব্রাউজার এপিআই ব্যবহার করে
Workbox-এর কার্যকারিতা যদি আপনার প্রয়োজনের জন্য যথেষ্ট না হয়, তাহলে 'ব্রডকাস্ট আপডেট' বাস্তবায়নের জন্য নিম্নলিখিত ব্রাউজার API-গুলি ব্যবহার করুন:
সম্প্রচার চ্যানেল এপিআই
সার্ভিস ওয়ার্কার একটি BroadcastChannel অবজেক্ট তৈরি করে এবং তাতে মেসেজ পাঠানো শুরু করে। এই মেসেজগুলো গ্রহণ করতে আগ্রহী যেকোনো কনটেক্সট (যেমন পেজ) একটি BroadcastChannel অবজেক্ট ইনস্ট্যানশিয়েট করতে পারে এবং মেসেজ গ্রহণ করার জন্য একটি মেসেজ হ্যান্ডলার ইমপ্লিমেন্ট করতে পারে।
নতুন সার্ভিস ওয়ার্কার ইনস্টল হলে পেজকে জানানোর জন্য নিম্নলিখিত কোডটি ব্যবহার করুন:
// Create Broadcast Channel to send messages to the page
const broadcast = new BroadcastChannel('sw-update-channel');
self.addEventListener('install', function (event) {
// Inform the page every time a new service worker is installed
broadcast.postMessage({type: 'CRITICAL_SW_UPDATE'});
});
পৃষ্ঠাটি sw-update-channel এ সাবস্ক্রাইব করার মাধ্যমে এই ইভেন্টগুলো শোনে:
// Create Broadcast Channel and listen to messages sent to it
const broadcast = new BroadcastChannel('sw-update-channel');
broadcast.onmessage = (event) => {
if (event.data && event.data.type === 'CRITICAL_SW_UPDATE') {
// Show "update to refresh" banner to the user.
}
};
এটি একটি সহজ কৌশল, কিন্তু এর সীমাবদ্ধতা হলো ব্রাউজার সমর্থন: এই লেখাটি লেখার মুহূর্তে, সাফারি এই এপিআইটি সমর্থন করে না ।
ক্লায়েন্ট এপিআই
ক্লায়েন্ট এপিআই, Client অবজেক্টের একটি অ্যারের উপর পুনরাবৃত্তি করার মাধ্যমে সার্ভিস ওয়ার্কার থেকে একাধিক ক্লায়েন্টের সাথে যোগাযোগের একটি সহজ উপায় প্রদান করে।
সর্বশেষ ফোকাস করা ট্যাবে একটি বার্তা পাঠাতে নিম্নলিখিত সার্ভিস ওয়ার্কার কোডটি ব্যবহার করুন:
// Obtain an array of Window client objects
self.clients.matchAll(options).then(function (clients) {
if (clients && clients.length) {
// Respond to last focused tab
clients[0].postMessage({type: 'MSG_ID'});
}
});
এই বার্তাগুলো গ্রহণ করার জন্য পৃষ্ঠাটি একটি বার্তা হ্যান্ডলার প্রয়োগ করে:
// Listen to messages
navigator.serviceWorker.onmessage = (event) => {
if (event.data && event.data.type === 'MSG_ID') {
// Process response
}
};
একাধিক সক্রিয় ট্যাবে তথ্য সম্প্রচারের মতো ক্ষেত্রে ক্লায়েন্ট এপিআই একটি চমৎকার বিকল্প। এপিআইটি সব প্রধান ব্রাউজার দ্বারা সমর্থিত, কিন্তু এর সব মেথড সমর্থিত নয়। এটি ব্যবহার করার আগে ব্রাউজারের সমর্থন যাচাই করে নিন।
বার্তা চ্যানেল
মেসেজ চ্যানেলের জন্য একটি প্রাথমিক কনফিগারেশন ধাপের প্রয়োজন হয়, যেখানে পেজ থেকে সার্ভিস ওয়ার্কারে একটি পোর্ট পাঠিয়ে তাদের মধ্যে একটি যোগাযোগ চ্যানেল স্থাপন করা হয়। পেজটি একটি MessageChannel অবজেক্ট ইনস্ট্যানশিয়েট করে এবং postMessage() ইন্টারফেসের মাধ্যমে সার্ভিস ওয়ার্কারে একটি পোর্ট পাঠায়:
const messageChannel = new MessageChannel();
// Init port
navigator.serviceWorker.controller.postMessage({type: 'PORT_INITIALIZATION'}, [
messageChannel.port2,
]);
পৃষ্ঠাটি ঐ পোর্টে একটি 'onmessage' হ্যান্ডলার প্রয়োগ করে বার্তা শোনে:
// Listen to messages
messageChannel.port1.onmessage = (event) => {
// Process message
};
সার্ভিস ওয়ার্কারটি পোর্টটি গ্রহণ করে এবং সেটির একটি রেফারেন্স সংরক্ষণ করে:
// Initialize
let communicationPort;
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'PORT_INITIALIZATION') {
communicationPort = event.ports[0];
}
});
সেই মুহূর্ত থেকে, পোর্টের রেফারেন্সে postMessage() কল করার মাধ্যমে পেজটিতে মেসেজ পাঠানো যায়:
// Communicate
communicationPort.postMessage({type: 'MSG_ID' });
পোর্ট ইনিশিয়ালাইজ করার প্রয়োজনের কারণে MessageChannel বাস্তবায়ন করা আরও জটিল হতে পারে, কিন্তু এটি সব প্রধান ব্রাউজার দ্বারা সমর্থিত।
পরবর্তী পদক্ষেপ
এই নির্দেশিকায় আমরা উইন্ডো থেকে সার্ভিস ওয়ার্কারের সাথে যোগাযোগের একটি বিশেষ ক্ষেত্র, অর্থাৎ "ব্রডকাস্ট আপডেট" নিয়ে আলোচনা করেছি। আলোচিত উদাহরণগুলোর মধ্যে রয়েছে সার্ভিস ওয়ার্কারের গুরুত্বপূর্ণ লাইফসাইকেল ইভেন্টগুলো শোনা এবং কন্টেন্ট বা ক্যাশ করা ডেটার পরিবর্তন সম্পর্কে পেজকে জানানো। আপনি আরও আকর্ষণীয় ব্যবহারের ক্ষেত্র ভাবতে পারেন, যেখানে সার্ভিস ওয়ার্কার আগে থেকে কোনো বার্তা না পেয়েই সক্রিয়ভাবে পেজের সাথে যোগাযোগ করে।
উইন্ডো এবং পরিষেবা কর্মীদের যোগাযোগের আরও ধরণ জানতে দেখুন:
- ইম্পারেটিভ ক্যাশিং নির্দেশিকা : রিসোর্স আগে থেকে ক্যাশ করার জন্য পেজ থেকে একটি সার্ভিস ওয়ার্কারকে কল করা (যেমন প্রিফেচিং পরিস্থিতিতে)।
- দ্বিমুখী যোগাযোগ : কোনো পরিষেবা কর্মীকে একটি কাজ অর্পণ করা (যেমন একটি ভারী ডাউনলোড), এবং কাজের অগ্রগতি সম্পর্কে পেজটিকে অবহিত রাখা।