পরিষেবা কর্মীদের সঙ্গে পৃষ্ঠায় আপডেট সম্প্রচার

Andrew Guan

Demián Renzulli

কিছু পরিস্থিতিতে পরিষেবা কর্মীকে একটি নির্দিষ্ট ইভেন্ট সম্পর্কে জানানোর জন্য এটি নিয়ন্ত্রণ করে এমন যেকোনো সক্রিয় ট্যাবের সাথে সক্রিয়ভাবে যোগাযোগ করতে হতে পারে। উদাহরণ অন্তর্ভুক্ত:

• পরিষেবা কর্মীর একটি নতুন সংস্করণ ইনস্টল করা হলে পৃষ্ঠাটিকে অবহিত করা, যাতে পৃষ্ঠাটি অবিলম্বে নতুন কার্যকারিতা অ্যাক্সেস করতে ব্যবহারকারীকে একটি "আপডেট টু রিফ্রেশ" বোতাম দেখাতে পারে।
• একটি ইঙ্গিত দেখিয়ে ব্যবহারকারীকে ক্যাশ করা ডেটার পরিবর্তন সম্পর্কে জানাতে যা পরিষেবা কর্মী পক্ষের মধ্যে ঘটেছিল, যেমন: "অ্যাপটি এখন অফলাইনে কাজ করার জন্য প্রস্তুত" , বা "উপলব্ধ সামগ্রীর নতুন সংস্করণ" ৷

আমরা এই ধরনের ব্যবহারের ক্ষেত্রে কল করব যেখানে পরিষেবা কর্মীকে একটি যোগাযোগ "সম্প্রচার আপডেট" শুরু করার জন্য পৃষ্ঠা থেকে একটি বার্তা গ্রহণ করতে হবে না। এই গাইডে আমরা স্ট্যান্ডার্ড ব্রাউজার API এবং ওয়ার্কবক্স লাইব্রেরি ব্যবহার করে পৃষ্ঠা এবং পরিষেবা কর্মীদের মধ্যে এই ধরনের যোগাযোগ বাস্তবায়নের বিভিন্ন উপায় পর্যালোচনা করব।

উৎপাদন ক্ষেত্রে

টিন্ডার

Tinder PWA workbox-window ব্যবহার করে পৃষ্ঠা থেকে ("ইনস্টল করা", "নিয়ন্ত্রিত" এবং "অ্যাক্টিভেটেড") গুরুত্বপূর্ণ পরিষেবা কর্মী লাইফসাইকেল মুহূর্তগুলি শোনার জন্য। এইভাবে যখন একজন নতুন পরিষেবা কর্মী খেলায় আসে, এটি একটি "আপডেট উপলব্ধ" ব্যানার দেখায়, যাতে তারা PWA রিফ্রেশ করতে পারে এবং সর্বশেষ বৈশিষ্ট্যগুলি অ্যাক্সেস করতে পারে:

স্কুশ

Squosh PWA- তে, যখন পরিষেবা কর্মী এটিকে অফলাইনে কাজ করার জন্য প্রয়োজনীয় সমস্ত সম্পদ ক্যাশ করে, তখন এটি "অফলাইনে কাজ করার জন্য প্রস্তুত" টোস্ট দেখানোর জন্য পৃষ্ঠায় একটি বার্তা পাঠায়, ব্যবহারকারীকে বৈশিষ্ট্যটি সম্পর্কে জানাতে:

ওয়ার্কবক্স ব্যবহার করে

পরিষেবা কর্মী জীবনচক্র ঘটনা শুনুন

workbox-window গুরুত্বপূর্ণ পরিষেবা কর্মী লাইফসাইকেল ইভেন্টগুলি শোনার জন্য একটি সরল ইন্টারফেস প্রদান করে৷ হুডের অধীনে, লাইব্রেরি updatefound এবং স্টেট চেঞ্জের মতো ক্লায়েন্ট-সাইড API ব্যবহার করে এবং workbox-window অবজেক্টে উচ্চ স্তরের ইভেন্ট শ্রোতাদের প্রদান করে, ব্যবহারকারীর জন্য এই ইভেন্টগুলি ব্যবহার করা সহজ করে তোলে।

নিম্নলিখিত পৃষ্ঠা কোডটি আপনাকে প্রতিবার পরিষেবা কর্মীর একটি নতুন সংস্করণ ইনস্টল করার সময় সনাক্ত করতে দেয়, যাতে আপনি এটি ব্যবহারকারীর সাথে যোগাযোগ করতে পারেন:

const wb = new Workbox('/sw.js');

wb.addEventListener('installed', (event) => {
  if (event.isUpdate) {
    // Show "Update App" banner
  }
});

wb.register();

ক্যাশে ডেটার পরিবর্তনের পৃষ্ঠাকে অবহিত করুন

ওয়ার্কবক্স প্যাকেজ 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();
  }
});

ব্রাউজার API ব্যবহার করে

ওয়ার্কবক্স যে কার্যকারিতা প্রদান করে তা আপনার প্রয়োজনের জন্য যথেষ্ট না হলে, "সম্প্রচার আপডেট" বাস্তবায়ন করতে নিম্নলিখিত ব্রাউজার API ব্যবহার করুন:

ব্রডকাস্ট চ্যানেল 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.
  }
};

এটি একটি সাধারণ কৌশল, কিন্তু এর সীমাবদ্ধতা হল ব্রাউজার সমর্থন: এই লেখার মুহূর্তে, Safari এই API সমর্থন করে না ।

ক্লায়েন্ট API

ক্লায়েন্ট এপিআই 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
   }
};

ক্লায়েন্ট API একাধিক সক্রিয় ট্যাবে তথ্য সম্প্রচারের মতো ক্ষেত্রে একটি দুর্দান্ত বিকল্প। API সমস্ত প্রধান ব্রাউজার দ্বারা সমর্থিত, কিন্তু এর সমস্ত পদ্ধতি নয়। এটি ব্যবহার করার আগে ব্রাউজার সমর্থন পরীক্ষা করুন।

বার্তা চ্যানেল

বার্তা চ্যানেলের একটি প্রাথমিক কনফিগারেশন পদক্ষেপ প্রয়োজন, পৃষ্ঠা থেকে পরিষেবা কর্মীকে একটি পোর্ট পাস করে, তাদের মধ্যে একটি যোগাযোগের চ্যানেল স্থাপন করতে। পৃষ্ঠাটি একটি MessageChannel অবজেক্টকে সূচনা করে এবং postMessage() ইন্টারফেসের মাধ্যমে পরিষেবা কর্মীকে একটি পোর্ট পাঠায়:

const messageChannel = new MessageChannel();

// Init port
navigator.serviceWorker.controller.postMessage({type: 'PORT_INITIALIZATION'}, [
  messageChannel.port2,
]);

পৃষ্ঠাটি সেই পোর্টে একটি "অনমেসেজ" হ্যান্ডলার প্রয়োগ করে বার্তা শোনে:

// 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 প্রয়োগ করা আরও জটিল হতে পারে, তবে এটি সমস্ত প্রধান ব্রাউজার দ্বারা সমর্থিত।

পরবর্তী পদক্ষেপ

এই নির্দেশিকায় আমরা উইন্ডো থেকে পরিষেবা কর্মী যোগাযোগের একটি বিশেষ ক্ষেত্রে অন্বেষণ করেছি: "সম্প্রচার আপডেট" । অন্বেষণ করা উদাহরণগুলির মধ্যে গুরুত্বপূর্ণ পরিষেবা কর্মী লাইফসাইকেল ইভেন্টগুলি শোনা এবং বিষয়বস্তু বা ক্যাশে করা ডেটার পরিবর্তন সম্পর্কে পৃষ্ঠায় যোগাযোগ করা অন্তর্ভুক্ত। আপনি আরও আকর্ষণীয় ব্যবহারের ক্ষেত্রে ভাবতে পারেন যেখানে পরিষেবা কর্মী পূর্বে কোনো বার্তা না পেয়ে সক্রিয়ভাবে পৃষ্ঠাটির সাথে যোগাযোগ করে।

উইন্ডো এবং পরিষেবা কর্মী যোগাযোগের আরও নিদর্শনগুলির জন্য চেক আউট করুন:

• আবশ্যিক ক্যাশিং নির্দেশিকা : পৃষ্ঠা থেকে একজন পরিষেবা কর্মীকে কল করা রিসোর্স ক্যাশে আগাম (যেমন প্রিফেচিং পরিস্থিতিতে)।
• দ্বি-মুখী যোগাযোগ : একজন পরিষেবা কর্মীকে একটি কাজ অর্পণ করা (যেমন একটি ভারী ডাউনলোড), এবং পৃষ্ঠাটিকে অগ্রগতি সম্পর্কে অবহিত করা।

অতিরিক্ত সম্পদ

• ওয়ার্কবক্স-উইন্ডো
• ওয়ার্কবক্স-সম্প্রচার-আপডেট
• ওয়ার্কবক্স 4: ওয়ার্কবক্স-উইন্ডো মডিউল ব্যবহার করে রিফ্রেশ-টু-আপডেট-সংস্করণ প্রবাহ বাস্তবায়ন করা