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

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

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,
);

প্রকারভেদ

BroadcastCacheUpdate

একটি ক্যাশড প্রতিক্রিয়া আপডেট করা হলে যে কোনো খোলা উইন্ডো/ট্যাব জানাতে postMessage() API ব্যবহার করে।

দক্ষতার জন্য, অন্তর্নিহিত প্রতিক্রিয়া সংস্থাগুলির তুলনা করা হয় না; শুধুমাত্র নির্দিষ্ট প্রতিক্রিয়া শিরোনাম চেক করা হয়.

বৈশিষ্ট্য

  • নির্মাণকারী

    অকার্যকর

    বার্তা সম্প্রচার করতে একটি নির্দিষ্ট channelName দিয়ে একটি BroadcastCacheUpdate উদাহরণ তৈরি করুন

    constructor ফাংশনটি এর মত দেখাচ্ছে:

    (options?: BroadcastCacheUpdateOptions) => {...}

  • আপডেট করা হয়েছে

    অকার্যকর

    দুটি প্রতিক্রিয়ার তুলনা করে এবং প্রতিক্রিয়াগুলি ভিন্ন হলে একটি বার্তা ( postMessage() এর মাধ্যমে) সমস্ত উইন্ডো ক্লায়েন্টকে পাঠায়। কোনো প্রতিক্রিয়াই অস্বচ্ছ হতে পারে না।

    যে বার্তাটি পোস্ট করা হয়েছে তার নিম্নলিখিত বিন্যাস রয়েছে (যেখানে payload generatePayload বিকল্পের মাধ্যমে কাস্টমাইজ করা যেতে পারে উদাহরণটি তৈরি করা হয়েছে):

    {
      type: 'CACHE_UPDATED',
      meta: 'workbox-broadcast-update',
      payload: {
        cacheName: 'the-cache-name',
        updatedURL: 'https://example.com/'
      }
    }
    

    notifyIfUpdated ফাংশন এর মত দেখাচ্ছে:

    (options: CacheDidUpdateCallbackParam) => {...}

    • রিটার্ন

      প্রতিশ্রুতি <void>

      আপডেট পাঠানো হলে সমাধান হয়।

BroadcastCacheUpdateOptions

বৈশিষ্ট্য

  • হেডার চেক করুন

    স্ট্রিং[] ঐচ্ছিক

  • সমস্ত ক্লায়েন্টকে অবহিত করুন

    বুলিয়ান ঐচ্ছিক

  • পেলোড তৈরি করুন

    অকার্যকর ঐচ্ছিক

    generatePayload ফাংশনটি এর মত দেখাচ্ছে:

    (options: CacheDidUpdateCallbackParam) => {...}

    • রিটার্ন

      রেকর্ড<stringany>

BroadcastUpdatePlugin

এই প্লাগইন স্বয়ংক্রিয়ভাবে একটি বার্তা সম্প্রচার করবে যখনই একটি ক্যাশে করা প্রতিক্রিয়া আপডেট করা হবে৷

বৈশিষ্ট্য

  • নির্মাণকারী

    অকার্যকর

    পাস করা বিকল্পগুলির সাথে একটি workbox-broadcast-update.BroadcastUpdate উদাহরণ তৈরি করুন এবং যখনই প্লাগইনের cacheDidUpdate কলব্যাক আহ্বান করা হয় তখন এটির notifyIfUpdated পদ্ধতিতে কল করুন।

    constructor ফাংশনটি এর মত দেখাচ্ছে:

    (options?: BroadcastCacheUpdateOptions) => {...}

পদ্ধতি

responsesAreSame()

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

দুটি Response's দেওয়া হয়েছে, তারা একই কিনা তা দেখতে বেশ কয়েকটি হেডার মান তুলনা করে।

পরামিতি

  • প্রথম প্রতিক্রিয়া

    প্রতিক্রিয়া

  • দ্বিতীয় প্রতিক্রিয়া

    প্রতিক্রিয়া

  • হেডার চেক করুন

    স্ট্রিং[]

রিটার্নস

  • বুলিয়ান