ফলব্যাক প্রতিক্রিয়াগুলি পরিচালনা করা,ফলব্যাক প্রতিক্রিয়াগুলি পরিচালনা করা

নির্দিষ্ট পরিস্থিতিতে, ব্যবহারকারী অফলাইনে থাকলে আপনি একটি ফলব্যাক প্রতিক্রিয়া ক্যাশ করতে চাইতে পারেন। একটি ফলব্যাক প্রয়োগ করা ক্যাশিং আচরণের একটি বিকল্প যা নেটওয়ার্ক-প্রথম বা stale-while-revalidate এর মতো কৌশলগুলি প্রদান করে।

একটি ফলব্যাক হল একটি সাধারণ, এক-আকার-ফিট-সমস্ত প্রতিক্রিয়া যা একটি অনুরোধ ব্যর্থ হলে ব্রাউজার ডিফল্টরূপে যা প্রদান করে তার চেয়ে একটি ভাল স্থানধারক। কিছু উদাহরণ হল:

• "অনুপস্থিত চিত্র" স্থানধারকের একটি বিকল্প।
• স্ট্যান্ডার্ড "কোন নেটওয়ার্ক সংযোগ উপলব্ধ নেই" পৃষ্ঠার একটি HTML বিকল্প৷

শুধুমাত্র অফলাইন পৃষ্ঠা

যদি আপনাকে শুধুমাত্র একটি কাস্টম অফলাইন এইচটিএমএল পৃষ্ঠা প্রদান করতে হয় তবে অন্য কিছু নয়, এখানে একটি বেসলাইন রেসিপি রয়েছে যা আপনি অনুসরণ করতে পারেন:

import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

setDefaultHandler(new NetworkOnly());

offlineFallback();

উপরের কোডটি সমস্ত রুটের জন্য ডিফল্ট হিসাবে একটি নেটওয়ার্ক-শুধু কৌশল ব্যবহার করতে setDefaultHandler ব্যবহার করে। কোনো ত্রুটি ঘটলে এটি অফলাইন ফলব্যাক পরিবেশন করার জন্য offlineFallback রেসিপি চালায়। রেসিপিটি অনুমান করে যে আপনার অফলাইন ফলব্যাক HTML ফাইলের নাম দেওয়া হবে offline.html এবং আপনার ওয়েব সার্ভারের রুট থেকে পরিবেশন করা হবে৷

ব্যাপক ফলব্যাক

যখনই একটি নেটওয়ার্ক ব্যর্থতা বা ক্যাশে মিস হয়, workbox-strategies দ্বারা প্রস্তাবিত ক্যাশিং কৌশলগুলি ধারাবাহিকভাবে প্রত্যাখ্যান করবে। এটি একটি একক হ্যান্ডলার ফাংশনে যেকোনো ব্যর্থতা মোকাবেলা করার জন্য একটি গ্লোবাল "ক্যাচ" হ্যান্ডলার সেট করার প্যাটার্নকে প্রচার করে, যা আপনাকে বিভিন্ন request.destination মানগুলির জন্য বিভিন্ন ফলব্যাক অফার করতে দেয়।

নিম্নলিখিত উদাহরণ workbox-recipes থেকে warmStrategyCache রেসিপি ব্যবহার করে এবং রানটাইম ক্যাশে সময়ের আগে ক্যাশ করা আইটেমগুলি পরিবেশন করতে একটি ক্যাচ হ্যান্ডলার সেট করে। যাইহোক, প্রিক্যাচিং ফলব্যাক আপনার অ্যাপ্লিকেশনের জন্য আরও উপযুক্ত হতে পারে:

import {warmStrategyCache} from 'workbox-recipes';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {CacheFirst, StaleWhileRevalidate} from 'workbox-strategies';

// Fallback assets to cache
const FALLBACK_HTML_URL = '/offline.html';
const FALLBACK_IMAGE_URL = '/images/image-not-found.jpg';
const FALLBACK_STRATEGY = new CacheFirst();

// Warm the runtime cache with a list of asset URLs
warmStrategyCache({
  urls: [FALLBACK_HTML_URL, FALLBACK_IMAGE_URL],
  strategy: FALLBACK_STRATEGY,
});

// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
  // The warmStrategyCache recipe is used to add the fallback assets ahead of
  // time to the runtime cache, and are served in the event of an error below.
  // Use `event`, `request`, and `url` to figure out how to respond, or
  // use request.destination to match requests for specific resource types.
  switch (request.destination) {
    case 'document':
      return FALLBACK_STRATEGY.handle({event, request: FALLBACK_HTML_URL});

    case 'image':
      return FALLBACK_STRATEGY.handle({event, request: FALLBACK_IMAGE_URL});

    default:
      // If we don't have a fallback, return an error response.
      return Response.error();
  }
});

এই পরবর্তীতে, ফলব্যাক প্রতিক্রিয়াগুলিকে ওয়ার্কবক্সের বিল্ড সরঞ্জামগুলির সাথে injectManifest ব্যবহার করে প্রিক্যাচ করা হয় এবং matchPrecache পদ্ধতিতে কোনও ত্রুটির ক্ষেত্রে ফলব্যাক হিসাবে পরিবেশন করা হয়।

import {matchPrecache, precacheAndRoute} from 'workbox-precaching';
import {setDefaultHandler, setCatchHandler} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

// Optional: use the injectManifest mode of one of the Workbox
// build tools to precache a list of URLs, including fallbacks.
precacheAndRoute(self.__WB_MANIFEST);

// Use a stale-while-revalidate strategy to handle requests by default.
setDefaultHandler(new StaleWhileRevalidate());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(async ({request}) => {
  // Fallback assets are precached when the service worker is installed, and are
  // served in the event of an error below. Use `event`, `request`, and `url` to
  // figure out how to respond, or use request.destination to match requests for
  // specific resource types.
  switch (request.destination) {
    case 'document':
      // FALLBACK_HTML_URL must be defined as a precached URL for this to work:
      return matchPrecache(FALLBACK_HTML_URL);

    case 'image':
      // FALLBACK_IMAGE_URL must be defined as a precached URL for this to work:
      return matchPrecache(FALLBACK_IMAGE_URL);

    default:
      // If we don't have a fallback, return an error response.
      return Response.error();
  }
});

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

রানটাইম ক্যাশে গরম করা

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

রানটাইম ক্যাশেকে অ্যাসেট সহ সময়ের আগে প্রাইম করতে, আপনি workbox-recipes থেকে warmStrategyCache রেসিপি ব্যবহার করে এটি ব্যবহার করতে পারেন। হুডের অধীনে, এই কৌশলটি একটি পরিষেবা কর্মীর install ইভেন্টে Cache.addAll কল করে।

import {warmStrategyCache} from 'workbox-recipes';
import {CacheFirst} from 'workbox-strategies';

// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = [
  '/offline.html',
];

warmStrategyCache({urls, strategy});

উপসংহার

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