ওয়ার্কবক্স-ব্যাকগ্রাউন্ড-সিঙ্ক

আপনি যখন একটি ওয়েব সার্ভারে ডেটা পাঠান, কখনও কখনও অনুরোধগুলি ব্যর্থ হবে। এটি ব্যবহারকারীর সংযোগ হারিয়ে ফেলার কারণে হতে পারে, অথবা সার্ভার ডাউন হওয়ার কারণে হতে পারে; উভয় ক্ষেত্রেই আপনি প্রায়ই পরে আবার অনুরোধ পাঠানোর চেষ্টা করতে চান।

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

ওয়ার্কবক্স ব্যাকগ্রাউন্ড সিঙ্ক ডিজাইন করা হয়েছে যাতে ব্যাকগ্রাউন্ডসিঙ্ক API ব্যবহার করা সহজ হয় এবং অন্যান্য ওয়ার্কবক্স মডিউলের সাথে এর ব্যবহারকে একীভূত করা যায়। এটি এমন ব্রাউজারগুলির জন্য একটি ফলব্যাক কৌশল প্রয়োগ করে যেগুলি এখনও BackgroundSync প্রয়োগ করে না৷

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

মৌলিক ব্যবহার

ব্যাকগ্রাউন্ড সিঙ্ক ব্যবহার করার সবচেয়ে সহজ উপায় হল Plugin ব্যবহার করা যা ব্যর্থ অনুরোধগুলিকে স্বয়ংক্রিয়ভাবে সারিবদ্ধ করবে এবং ভবিষ্যতে sync ইভেন্টগুলি চালু হলে সেগুলি পুনরায় চেষ্টা করবে৷

import {BackgroundSyncPlugin} from 'workbox-background-sync';
import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const bgSyncPlugin = new BackgroundSyncPlugin('myQueueName', {
  maxRetentionTime: 24 * 60, // Retry for max of 24 Hours (specified in minutes)
});

registerRoute(
  /\/api\/.*\/*.json/,
  new NetworkOnly({
    plugins: [bgSyncPlugin],
  }),
  'POST'
);

BackgroundSyncPlugin fetchDidFail প্লাগইন কলব্যাকে হুক করে, এবং fetchDidFail শুধুমাত্র তখনই চালু করা হয় যদি একটি ব্যতিক্রম থ্রো করা হয়, সম্ভবত একটি নেটওয়ার্ক ব্যর্থতার কারণে৷ এর মানে হল যে 4xx বা 5xx ত্রুটি স্থিতি সহ একটি প্রতিক্রিয়া প্রাপ্ত হলে অনুরোধগুলি পুনরায় চেষ্টা করা হবে না। আপনি যদি সমস্ত অনুরোধের জন্য পুনরায় চেষ্টা করতে চান, যেমন, একটি 5xx স্ট্যাটাস, আপনি আপনার কৌশলে একটি fetchDidSucceed প্লাগইন যোগ করে তা করতে পারেন:

const statusPlugin = {
  fetchDidSucceed: ({response}) => {
    if (response.status >= 500) {
      // Throwing anything here will trigger fetchDidFail.
      throw new Error('Server error.');
    }
    // If it's not 5xx, use the response as-is.
    return response;
  },
};

// Add statusPlugin to the plugins array in your strategy.

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

ওয়ার্কবক্স ব্যাকগ্রাউন্ড সিঙ্ক একটি Queue ক্লাসও প্রদান করে, যা আপনি ইনস্ট্যান্টিয়েট করতে এবং ব্যর্থ অনুরোধ যোগ করতে পারেন। ব্যর্থ অনুরোধগুলি IndexedDB- এ সংরক্ষণ করা হয় এবং ব্রাউজার যখন মনে করে যে সংযোগ পুনরুদ্ধার করা হয়েছে (অর্থাৎ যখন এটি সিঙ্ক ইভেন্ট গ্রহণ করে) তখন পুনরায় চেষ্টা করা হয়।

একটি সারি তৈরি করা হচ্ছে

একটি ওয়ার্কবক্স ব্যাকগ্রাউন্ড সিঙ্ক সারি তৈরি করতে আপনাকে একটি সারি নাম দিয়ে এটি তৈরি করতে হবে (যা আপনার মূলের জন্য অনন্য হতে হবে):

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

সারির নামটি ট্যাগ নামের অংশ হিসাবে ব্যবহৃত হয় যা বিশ্বব্যাপী SyncManager দ্বারা register() -ed পায়। এটি IndexedDB ডাটাবেসের জন্য অবজেক্ট স্টোর নাম হিসাবেও ব্যবহৃত হয়।

সারিতে একটি অনুরোধ যোগ করা হচ্ছে

একবার আপনি আপনার সারি ইন্সট্যান্স তৈরি করলে, আপনি এতে ব্যর্থ অনুরোধ যোগ করতে পারেন। আপনি .pushRequest() পদ্ধতি ব্যবহার করে ব্যর্থ অনুরোধ যোগ করুন। উদাহরণস্বরূপ, নিম্নোক্ত কোডটি যেকোন অনুরোধগুলিকে ধরে যা ব্যর্থ হয় এবং সেগুলিকে সারিতে যুক্ত করে:

import {Queue} from 'workbox-background-sync';

const queue = new Queue('myQueueName');

self.addEventListener('fetch', event => {
  // Add in your own criteria here to return early if this
  // isn't a request that should use background sync.
  if (event.request.method !== 'POST') {
    return;
  }

  const bgSyncLogic = async () => {
    try {
      const response = await fetch(event.request.clone());
      return response;
    } catch (error) {
      await queue.pushRequest({request: event.request});
      return error;
    }
  };

  event.respondWith(bgSyncLogic());
});

একবার সারিতে যোগ করা হলে, পরিষেবা কর্মী যখন sync ইভেন্টটি গ্রহণ করে তখন অনুরোধটি স্বয়ংক্রিয়ভাবে পুনরায় চেষ্টা করা হয় (যা তখন ঘটে যখন ব্রাউজার মনে করে সংযোগ পুনরুদ্ধার করা হয়েছে)। যে ব্রাউজারগুলি BackgroundSync API সমর্থন করে না তারা প্রতিবার পরিষেবা কর্মী শুরু করার সময় সারিতে পুনরায় চেষ্টা করবে৷ এর জন্য পরিষেবা কর্মী নিয়ন্ত্রণকারী পৃষ্ঠাটি চলমান থাকা প্রয়োজন, তাই এটি ততটা কার্যকর হবে না।

ওয়ার্কবক্স ব্যাকগ্রাউন্ড সিঙ্ক পরীক্ষা করা হচ্ছে

দুঃখজনকভাবে, BackgroundSync পরীক্ষা করা বেশ কিছু কারণের জন্য কিছুটা অজ্ঞাত এবং কঠিন।

আপনার বাস্তবায়ন পরীক্ষা করার সর্বোত্তম পদ্ধতি হল নিম্নলিখিতগুলি করা:

1. একটি পৃষ্ঠা লোড করুন এবং আপনার পরিষেবা কর্মী নিবন্ধন করুন।
2. আপনার কম্পিউটারের নেটওয়ার্ক বন্ধ করুন বা আপনার ওয়েব সার্ভার বন্ধ করুন।
   • CHROME DEVTOOLS অফলাইনে ব্যবহার করবেন না। DevTools-এ অফলাইন চেকবক্স শুধুমাত্র পৃষ্ঠার অনুরোধগুলিকে প্রভাবিত করে। পরিষেবা কর্মী অনুরোধ মাধ্যমে যেতে হবে.
3. ওয়ার্কবক্স ব্যাকগ্রাউন্ড সিঙ্কের সাথে সারিবদ্ধ হওয়া উচিত এমন নেটওয়ার্ক অনুরোধগুলি করুন৷
   • আপনি Chrome DevTools > Application > IndexedDB > workbox-background-sync > requests দেখে অনুরোধগুলি সারিবদ্ধ হয়েছে তা পরীক্ষা করতে পারেন
4. এখন আপনার নেটওয়ার্ক বা ওয়েব সার্ভার চালু করুন।

5. Chrome DevTools > Application > Service Workers এ গিয়ে workbox-background-sync:<your queue name> ট্যাগ নামটি প্রবেশ করে একটি প্রাথমিক sync ইভেন্টকে বাধ্য করুন:<your queue name> যেখানে <your queue name> আপনার সেট করা সারির নাম হওয়া উচিত, এবং তারপর 'সিঙ্ক' বোতামে ক্লিক করে।

   

6. আপনি ব্যর্থ অনুরোধগুলির জন্য নেটওয়ার্ক অনুরোধগুলি দেখতে পাবেন এবং অনুরোধগুলি সফলভাবে পুনরায় প্লে হওয়ার কারণে ইনডেক্সডডিবি ডেটা এখন খালি থাকা উচিত।