প্লাগইন ব্যবহার করে

ওয়ার্কবক্স ব্যবহার করার সময়, আপনি একটি অনুরোধ এবং একটি প্রতিক্রিয়া ম্যানিপুলেট করতে চাইতে পারেন কারণ এটি আনা বা ক্যাশে করা হচ্ছে। ওয়ার্কবক্স প্লাগইনগুলি আপনাকে ন্যূনতম অতিরিক্ত বয়লারপ্লেট সহ আপনার পরিষেবা কর্মীকে অতিরিক্ত আচরণ যোগ করার অনুমতি দেয়। এগুলি আপনার নিজের প্রকল্পে প্যাকেজ করা এবং পুনরায় ব্যবহার করা যেতে পারে, বা অন্যদেরও ব্যবহারের জন্য সর্বজনীনভাবে প্রকাশ করা যেতে পারে।

ওয়ার্কবক্স আমাদের জন্য উপলব্ধ বক্সের বাইরে বেশ কয়েকটি প্লাগইন সরবরাহ করে এবং—যদি আপনি কৌশলী হন—আপনি আপনার অ্যাপ্লিকেশনের প্রয়োজনীয়তা অনুসারে কাস্টম প্লাগইন লিখতে পারেন।

উপলব্ধ ওয়ার্কবক্স প্লাগইন

ওয়ার্কবক্স আপনার পরিষেবা কর্মীর ব্যবহারের জন্য নিম্নলিখিত অফিসিয়াল প্লাগইনগুলি অফার করে:

• BackgroundSyncPlugin : যদি একটি নেটওয়ার্ক অনুরোধ ব্যর্থ হয়, এই প্লাগইনটি আপনাকে পরবর্তী সিঙ্ক ইভেন্টটি ট্রিগার করার সময় আবার অনুরোধ করার জন্য একটি পটভূমি সিঙ্ক সারিতে যোগ করার অনুমতি দেয়৷
• BroadcastUpdatePlugin : যখনই একটি ক্যাশে আপডেট করা হয় তখনই আপনাকে একটি ব্রডকাস্ট চ্যানেলে বা postMessage() এর মাধ্যমে একটি বার্তা পাঠানোর অনুমতি দেয়৷
• CacheableResponsePlugin : শুধুমাত্র ক্যাশে অনুরোধ যা নির্দিষ্ট মানদণ্ড পূরণ করে।
• ExpirationPlugin : একটি ক্যাশে আইটেমের সংখ্যা এবং সর্বোচ্চ বয়স পরিচালনা করে।
• RangeRequestsPlugin : একটি Range HTTP অনুরোধ শিরোনাম অন্তর্ভুক্ত করা অনুরোধের জবাব দিন।

ওয়ার্কবক্স প্লাগইনগুলি—সেগুলি উপরে তালিকাভুক্ত প্লাগইনগুলির একটি হোক বা একটি কাস্টম প্লাগইন হোক—কৌশলের plugins সম্পত্তিতে প্লাগইনের একটি উদাহরণ যোগ করে একটি ওয়ার্কবক্স কৌশলের সাথে ব্যবহার করা হয়:

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
      }),
    ],
  })
);

কাস্টম প্লাগইনগুলির জন্য পদ্ধতি

একটি ওয়ার্কবক্স প্লাগইন এক বা একাধিক কলব্যাক ফাংশন বাস্তবায়ন করতে হবে। যখন আপনি একটি কৌশলে একটি প্লাগইন যোগ করেন, কলব্যাক ফাংশনগুলি স্বয়ংক্রিয়ভাবে সঠিক সময়ে চালানো হয়। কৌশলটি আপনার কলব্যাক ফাংশনটি বর্তমান অনুরোধ এবং/অথবা প্রতিক্রিয়া সম্পর্কে প্রাসঙ্গিক তথ্য পাস করে, আপনার প্লাগইনকে পদক্ষেপ নেওয়ার জন্য প্রয়োজনীয় প্রসঙ্গ প্রদান করে। নিম্নলিখিত কলব্যাক ফাংশন সমর্থিত:

• cacheWillUpdate : একটি ক্যাশে আপডেট করার জন্য একটি Response ব্যবহার করার আগে কল করা হয়। এই পদ্ধতিতে, ক্যাশে যোগ করার আগে প্রতিক্রিয়া পরিবর্তন করা যেতে পারে, অথবা আপনি ক্যাশে সম্পূর্ণরূপে আপডেট করা এড়াতে null ফেরত দিতে পারেন।
• cacheDidUpdate : যখন একটি ক্যাশে একটি নতুন এন্ট্রি যোগ করা হয় বা যদি একটি বিদ্যমান এন্ট্রি আপডেট করা হয় তখন বলা হয়। এই পদ্ধতিটি ব্যবহার করে এমন প্লাগইনগুলি উপযোগী হতে পারে যখন আপনি ক্যাশে আপডেটের পরে একটি ক্রিয়া সম্পাদন করতে চান৷
• cacheKeyWillBeUsed : একটি অনুরোধ ক্যাশে কী হিসাবে ব্যবহার করার আগে কল করা হয়। এটি উভয় ক্যাশে লুকআপের জন্য ঘটে (যখন mode 'read' হয়) এবং ক্যাশে লেখা হয় (যখন mode 'write' হয়)। ক্যাশে অ্যাক্সেস করার জন্য ইউআরএল ব্যবহার করার আগে আপনাকে ওভাররাইড বা স্বাভাবিক করার প্রয়োজন হলে এই কলব্যাকটি সুবিধাজনক।
• cachedResponseWillBeUsed : ক্যাশে থেকে একটি প্রতিক্রিয়া ব্যবহার করার ঠিক আগে এটি বলা হয়, যা আপনাকে সেই প্রতিক্রিয়া পরীক্ষা করতে দেয়। এই সময়ে, আপনি হয় একটি ভিন্ন প্রতিক্রিয়া ফেরত দিতে পারেন, অথবা null ফেরত দিতে পারেন।
• requestWillFetch : যখনই কোনো অনুরোধ নেটওয়ার্কে যেতে চায় তখনই কল করা হয়। নেটওয়ার্কে যাওয়ার ঠিক আগে Request পরিবর্তন করার প্রয়োজন হলে এটি কার্যকর।
• fetchDidFail : একটি নেটওয়ার্ক অনুরোধ ব্যর্থ হলে কল করা হয়, সম্ভবত নেটওয়ার্ক সংযোগের অনুপস্থিতির কারণে, এবং ব্রাউজারে একটি নেটওয়ার্ক সংযোগ থাকলে ফায়ার হবে না, কিন্তু একটি ত্রুটি পায় (উদাহরণস্বরূপ, 404 Not Found )।
• fetchDidSucceed : যখনই একটি নেটওয়ার্ক অনুরোধ সফল হয় তখন কল করা হয়, HTTP প্রতিক্রিয়া কোড নির্বিশেষে।
• handlerWillStart : যেকোনো হ্যান্ডলার লজিক চলতে শুরু করার আগে কল করা হয়, যা আপনার যদি প্রারম্ভিক হ্যান্ডলার স্টেট সেট করার প্রয়োজন হয় তবে এটি কার্যকর। উদাহরণস্বরূপ, যদি আপনি জানতে চান যে হ্যান্ডলার একটি প্রতিক্রিয়া তৈরি করতে কতক্ষণ সময় নিয়েছে, আপনি এই কলব্যাকে শুরুর সময়ের একটি নোট করতে পারেন।
• handlerWillRespond : কৌশলের handle() পদ্ধতি একটি প্রতিক্রিয়া প্রদান করার আগে কল করা হয়, যা আপনাকে একটি RouteHandler বা অন্য কাস্টম যুক্তিতে ফেরত দেওয়ার আগে একটি প্রতিক্রিয়া পরিবর্তন করার প্রয়োজন হলে সহায়ক।
• handlerDidRespond : কৌশলটির handle() পদ্ধতি একটি প্রতিক্রিয়া প্রদান করার পরে কল করা হয়। এটি যখন কোনও চূড়ান্ত প্রতিক্রিয়ার বিশদ বিবরণ রেকর্ড করা উপযোগী হতে পারে (উদাহরণস্বরূপ, অন্যান্য প্লাগইনগুলির দ্বারা করা পরিবর্তনের পরে)।
• handlerDidComplete : কৌশলের আমন্ত্রণ থেকে ইভেন্টে যোগ করা সমস্ত আজীবন প্রতিশ্রুতি নিষ্পত্তি হওয়ার পরে বলা হয়। ক্যাশে হিট স্ট্যাটাস, ক্যাশে লেটেন্সি, নেটওয়ার্ক লেটেন্সি, এবং অন্যান্য দরকারী তথ্যের মতো জিনিসগুলি গণনা করার জন্য হ্যান্ডলারটি সম্পন্ন না হওয়া পর্যন্ত অপেক্ষা করতে হবে এমন কোনও ডেটার বিষয়ে রিপোর্ট করতে হলে এটি সহায়ক।
• handlerDidError : হ্যান্ডলার কোনো উৎস থেকে বৈধ প্রতিক্রিয়া প্রদান করতে না পারলে বলা হয়, যা সরাসরি ব্যর্থ হওয়ার বিকল্প হিসেবে কোনো ধরনের ফলব্যাক প্রতিক্রিয়া প্রদান করার সর্বোত্তম সময়।

এই সমস্ত কলব্যাক async , এবং সেইজন্য যখনই একটি ক্যাশে বা আনয়ন ইভেন্ট সংশ্লিষ্ট কলব্যাকের জন্য প্রাসঙ্গিক পয়েন্টে পৌঁছে তখন ব্যবহার করার জন্য await করতে হবে৷

যদি একটি প্লাগইন উপরের সমস্ত কলব্যাক ব্যবহার করে, তাহলে এটি ফলস্বরূপ কোড হবে:

const myPlugin = {
  cacheWillUpdate: async ({request, response, event, state}) => {
    // Return `response`, a different `Response` object, or `null`.
    return response;
  },
  cacheDidUpdate: async ({
    cacheName,
    request,
    oldResponse,
    newResponse,
    event,
    state,
  }) => {
    // No return expected
    // Note: `newResponse.bodyUsed` is `true` when this is called,
    // meaning the body has already been read. If you need access to
    // the body of the fresh response, use a technique like:
    // const freshResponse = await caches.match(request, {cacheName});
  },
  cacheKeyWillBeUsed: async ({request, mode, params, event, state}) => {
    // `request` is the `Request` object that would otherwise be used as the cache key.
    // `mode` is either 'read' or 'write'.
    // Return either a string, or a `Request` whose `url` property will be used as the cache key.
    // Returning the original `request` will make this a no-op.
    return request;
  },
  cachedResponseWillBeUsed: async ({
    cacheName,
    request,
    matchOptions,
    cachedResponse,
    event,
    state,
  }) => {
    // Return `cachedResponse`, a different `Response` object, or null.
    return cachedResponse;
  },
  requestWillFetch: async ({request, event, state}) => {
    // Return `request` or a different `Request` object.
    return request;
  },
  fetchDidFail: async ({originalRequest, request, error, event, state}) => {
    // No return expected.
    // Note: `originalRequest` is the browser's request, `request` is the
    // request after being passed through plugins with
    // `requestWillFetch` callbacks, and `error` is the exception that caused
    // the underlying `fetch()` to fail.
  },
  fetchDidSucceed: async ({request, response, event, state}) => {
    // Return `response` to use the network response as-is,
    // or alternatively create and return a new `Response` object.
    return response;
  },
  handlerWillStart: async ({request, event, state}) => {
    // No return expected.
    // Can set initial handler state here.
  },
  handlerWillRespond: async ({request, response, event, state}) => {
    // Return `response` or a different `Response` object.
    return response;
  },
  handlerDidRespond: async ({request, response, event, state}) => {
    // No return expected.
    // Can record final response details here.
  },
  handlerDidComplete: async ({request, response, error, event, state}) => {
    // No return expected.
    // Can report any data here.
  },
  handlerDidError: async ({request, event, error, state}) => {
    // Return a `Response` to use as a fallback, or `null`.
    return fallbackResponse;
  },
};

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

সমস্ত প্লাগইন কলব্যাকও একটি state বস্তু পাস করা হয়, যা একটি নির্দিষ্ট প্লাগইন এবং এটি যে কৌশলটি আহ্বান করে তার জন্য অনন্য। এর মানে হল আপনি প্লাগইন লিখতে পারেন যেখানে একটি কলব্যাক শর্তসাপেক্ষে একই প্লাগইনের অন্য একটি কলব্যাকের উপর ভিত্তি করে একটি কাজ সম্পাদন করতে পারে (উদাহরণস্বরূপ, চলমান requestWillFetch() এবং fetchDidSucceed() বা fetchDidFail() এর মধ্যে পার্থক্য গণনা করুন।

তৃতীয় পক্ষের প্লাগইন

আপনি যদি একটি প্লাগইন বিকাশ করেন এবং আপনি মনে করেন যে এটি আপনার প্রকল্পের বাইরে ব্যবহার করেছে, আমরা আপনাকে এটিকে একটি মডিউল হিসাবে প্রকাশ করতে উত্সাহিত করব! নীচে সম্প্রদায়-প্রদত্ত ওয়ার্কবক্স প্লাগইনগুলির একটি সংক্ষিপ্ত তালিকা রয়েছে:

• cloudinary-workbox-plugin , যা বর্তমান সংযোগের গতির উপর ভিত্তি করে Cloudinary-হোস্ট করা চিত্রগুলির জন্য গতিশীলভাবে অনুরোধগুলি পুনর্লিখন করে ।
• workbox-plugin-firebase-auth অনুমোদন পরিচালনা করতে সহায়তা করে: Firebase প্রমাণীকরণের প্রয়োজনের বহির্গামী অনুরোধের জন্য Authorization: Bearer ।

আপনি npm এর সংগ্রহস্থলে অনুসন্ধান করে আরও সম্প্রদায়-প্রদত্ত ওয়ার্কবক্স প্লাগইনগুলি খুঁজে পেতে সক্ষম হতে পারেন৷

অবশেষে, আপনি যদি একটি ওয়ার্কবক্স প্লাগইন তৈরি করে থাকেন যা আপনি শেয়ার করতে চান, আপনি যখন এটি প্রকাশ করবেন তখন workbox-plugin কীওয়ার্ড যোগ করুন। আপনি যদি তা করেন, আমাদের টুইটারে জানান @WorkboxJS !