ওয়ার্কবক্স-সম্প্রচার-আপডেট

ক্যাশে করা এন্ট্রি সহ অনুরোধের জবাব দেওয়ার সময়, দ্রুত থাকাকালীন, এটি একটি ট্রেডঅফের সাথে আসে যা ব্যবহারকারীরা পুরানো ডেটা দেখতে পারে।

workbox-broadcast-update প্যাকেজ উইন্ডো ক্লায়েন্টদের সূচিত করার একটি আদর্শ উপায় প্রদান করে যে একটি ক্যাশে করা প্রতিক্রিয়া আপডেট করা হয়েছে। এটি StaleWhileRevalidate কৌশলের সাথে সবচেয়ে বেশি ব্যবহৃত হয়।

যখনই সেই কৌশলটির "পুনঃপ্রমাণ" পদক্ষেপ নেটওয়ার্ক থেকে একটি প্রতিক্রিয়া পুনরুদ্ধার করে যা পূর্বে ক্যাশে করা থেকে আলাদা, এই মডিউলটি বর্তমান পরিষেবা কর্মীর সুযোগের মধ্যে সমস্ত উইন্ডো ক্লায়েন্টকে ( postMessage() এর মাধ্যমে) একটি বার্তা পাঠাবে।

উইন্ডো ক্লায়েন্টরা আপডেটের জন্য শুনতে এবং যথাযথ ব্যবস্থা নিতে পারে, যেমন স্বয়ংক্রিয়ভাবে ব্যবহারকারীর কাছে একটি বার্তা প্রদর্শন করে যে আপডেটগুলি উপলব্ধ রয়েছে।

কিভাবে আপডেট নির্ধারণ করা হয়?

ক্যাশে করা এবং নতুন Response অবজেক্টের কিছু হেডার তুলনা করা হয়, এবং যদি হেডারগুলির মধ্যে যেকোনও আলাদা মান থাকে তবে এটি একটি আপডেট হিসাবে বিবেচিত হয়।

ডিফল্টরূপে, Content-Length , ETag , এবং Last-Modified শিরোনাম তুলনা করা হয়।

ওয়ার্কবক্স আরও কার্যকরী হতে, বিশেষ করে সম্ভাব্য বড় প্রতিক্রিয়ার জন্য বাইট-ফর-বাইট তুলনার পরিবর্তে হেডার মান ব্যবহার করে

সম্প্রচার আপডেট ব্যবহার করে

লাইব্রেরিটি 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()],
  })
);

আপনার ওয়েব অ্যাপে, DOMContentLoaded ইভেন্ট ফায়ার হওয়ার আগে, আপনি এই ধরনের ইভেন্টগুলি শুনতে পারেন:

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();
  }
});

বার্তা বিন্যাস

যখন আপনার ওয়েব অ্যাপে একটি message ইভেন্ট শ্রোতাকে আহ্বান করা হয়, তখন event.data সম্পত্তির নিম্নলিখিত বিন্যাস থাকবে:

{
  type: 'CACHE_UPDATED',
  meta: 'workbox-broadcast-update',
  // The two payload values vary depending on the actual update:
  payload: {
    cacheName: 'the-cache-name',
    updatedURL: 'https://example.com/'
  }
}

চেক করতে হেডার কাস্টমাইজ করুন

আপনি headersToCheck প্রপার্টি সেট করে চেক করার জন্য হেডার কাস্টমাইজ করতে পারেন।

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({
        headersToCheck: ['X-My-Custom-Header'],
      }),
    ],
  })
);

উন্নত ব্যবহার

যদিও বেশিরভাগ বিকাশকারীরা উপরে দেখানো একটি নির্দিষ্ট কৌশলের প্লাগইন হিসাবে workbox-broadcast-update ব্যবহার করবে, পরিষেবা কর্মী কোডে অন্তর্নিহিত যুক্তি ব্যবহার করা সম্ভব।

import {BroadcastCacheUpdate} from 'workbox-broadcast-update';

const broadcastUpdate = new BroadcastCacheUpdate({
  headersToCheck: ['X-My-Custom-Header'],
});

const cacheName = 'api-cache';
const request = new Request('https://example.com/api');

const cache = await caches.open(cacheName);
const oldResponse = await cache.match(request);
const newResponse = await fetch(request);

broadcastUpdate.notifyIfUpdated({
  cacheName,
  oldResponse,
  newResponse,
  request,
);

workbox-broadcast-update.responsesAreSame(
  firstResponse: Response,
  secondResponse: Response,
  headersToCheck: string[],
)