ব্যাকগ্রাউন্ড ফেচ প্রবর্তন করা হচ্ছে

Jake Archibald

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

এটি একটি দরকারী বৈশিষ্ট্য, তবে এটির জন্য পরিষেবা কর্মীকে আনার সময়কালের জন্য জীবিত থাকতে হবে। এটি একটি বার্তা পাঠানোর মতো কাজের ছোট বিটগুলির জন্য কোনও সমস্যা নয়, তবে যদি কাজটি খুব বেশি সময় নেয় তবে ব্রাউজারটি পরিষেবা কর্মীকে মেরে ফেলবে, অন্যথায় এটি ব্যবহারকারীর গোপনীয়তা এবং ব্যাটারির জন্য একটি ঝুঁকি।

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

Chrome 74 থেকে ব্যাকগ্রাউন্ড ফেচ ডিফল্টরূপে উপলব্ধ।

এখানে একটি দ্রুত দুই মিনিটের ডেমো দেখানো হয়েছে যা ঐতিহ্যগত অবস্থা দেখায়, বনাম ব্যাকগ্রাউন্ড ফেচ ব্যবহার করে:

ডেমোটি নিজে চেষ্টা করুন এবং কোডটি ব্রাউজ করুন ।

এটা কিভাবে কাজ করে

একটি পটভূমি আনা এই মত কাজ করে:

1. আপনি ব্রাউজারকে ব্যাকগ্রাউন্ডে একদল ফেচ করতে বলুন।
2. ব্রাউজার সেই জিনিসগুলি নিয়ে আসে, ব্যবহারকারীর কাছে অগ্রগতি প্রদর্শন করে।
3. একবার আনা সম্পূর্ণ বা ব্যর্থ হলে, ব্রাউজারটি আপনার পরিষেবা কর্মীকে খোলে এবং কী ঘটেছে তা আপনাকে জানাতে একটি ইভেন্ট ফায়ার করে৷ এখানেই আপনি সিদ্ধান্ত নিন প্রতিক্রিয়াগুলির সাথে কি করবেন, যদি কিছু হয়।

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

কিছু প্ল্যাটফর্মে (যেমন অ্যান্ড্রয়েড) ধাপ 1 এর পরে ব্রাউজারটি বন্ধ করা সম্ভব, কারণ ব্রাউজারটি অপারেটিং সিস্টেমে আনয়ন বন্ধ করতে পারে।

ব্যবহারকারী অফলাইনে থাকা অবস্থায় ডাউনলোড শুরু করলে বা ডাউনলোডের সময় অফলাইনে চলে গেলে, ব্যাকগ্রাউন্ড ফেচ পজ করা হবে এবং পরে আবার শুরু করা হবে।

এপিআই

বৈশিষ্ট্য সনাক্ত

যেকোনো নতুন বৈশিষ্ট্যের মতো, আপনি ব্রাউজারটি সমর্থন করে কিনা তা সনাক্ত করতে চান। ব্যাকগ্রাউন্ড ফেচের জন্য, এটি যেমন সহজ:

if ('BackgroundFetchManager' in self) {
  // This browser supports Background Fetch!
}

একটি পটভূমি নিয়ে আসা শুরু করা হচ্ছে৷

প্রধান API একটি পরিষেবা কর্মী নিবন্ধন বন্ধ করে দেয়, তাই নিশ্চিত করুন যে আপনি প্রথমে একজন পরিষেবা কর্মী নিবন্ধন করেছেন৷ তারপর:

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch('my-fetch', ['/ep-5.mp3', 'ep-5-artwork.jpg'], {
    title: 'Episode 5: Interesting things.',
    icons: [{
      sizes: '300x300',
      src: '/ep-5-icon.png',
      type: 'image/png',
    }],
    downloadTotal: 60 * 1024 * 1024,
  });
});

backgroundFetch.fetch তিনটি আর্গুমেন্ট নেয়:

backgroundFetch.fetch একটি প্রতিশ্রুতি প্রদান করে যা একটি BackgroundFetchRegistration এর সাথে সমাধান করে। আমি পরে যে বিস্তারিত কভার করব. প্রতিশ্রুতি প্রত্যাখ্যান করে যদি ব্যবহারকারী ডাউনলোডগুলি অপ্ট আউট করে থাকে, বা প্রদত্ত প্যারামিটারগুলির একটি অবৈধ।

একটি একক ব্যাকগ্রাউন্ড আনার জন্য অনেক অনুরোধ প্রদান করা আপনাকে এমন জিনিসগুলিকে একত্রিত করতে দেয় যা ব্যবহারকারীর কাছে যৌক্তিকভাবে একক জিনিস। উদাহরণ স্বরূপ, একটি মুভি 1000 রিসোর্সে বিভক্ত হতে পারে ( এমপিইজি-ড্যাশ এর সাথে সাধারনত), এবং ছবিগুলির মত অতিরিক্ত রিসোর্স সহ আসতে পারে। একটি গেমের একটি স্তর অনেক জাভাস্ক্রিপ্ট, চিত্র এবং অডিও সংস্থান জুড়ে ছড়িয়ে পড়তে পারে। কিন্তু ব্যবহারকারীর কাছে এটা শুধু "চলচ্চিত্র", বা "লেভেল"।

একটি বিদ্যমান ব্যাকগ্রাউন্ড আনা হচ্ছে

আপনি এই মত একটি বিদ্যমান ব্যাকগ্রাউন্ড আনয়ন পেতে পারেন:

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.get('my-fetch');
});

…আপনি যে ব্যাকগ্রাউন্ড ফেচ করতে চান তার আইডি পাস করে। সেই আইডির সাথে কোনো সক্রিয় ব্যাকগ্রাউন্ড আনা না থাকলে undefined রিটার্ন get ।

একটি ব্যাকগ্রাউন্ড আনয়নকে "সক্রিয়" হিসাবে বিবেচনা করা হয় এটি নিবন্ধিত হওয়ার মুহূর্ত থেকে, যতক্ষণ না এটি সফল হয়, ব্যর্থ হয় বা বাতিল হয়৷

আপনি getIds ব্যবহার করে সমস্ত সক্রিয় ব্যাকগ্রাউন্ড আনার একটি তালিকা পেতে পারেন:

navigator.serviceWorker.ready.then(async (swReg) => {
  const ids = await swReg.backgroundFetch.getIds();
});

পটভূমি আনা নিবন্ধন

একটি BackgroundFetchRegistration ( উপরের উদাহরণগুলিতে bgFetch ) নিম্নলিখিতগুলি রয়েছে:

ট্র্যাকিং অগ্রগতি

এটি progress ইভেন্টের মাধ্যমে করা যেতে পারে। মনে রাখবেন যে downloadTotal হল আপনার দেওয়া মান, অথবা 0 যদি আপনি একটি মান প্রদান না করেন।

bgFetch.addEventListener('progress', () => {
  // If we didn't provide a total, we can't provide a %.
  if (!bgFetch.downloadTotal) return;

  const percent = Math.round(bgFetch.downloaded / bgFetch.downloadTotal * 100);
  console.log(`Download progress: ${percent}%`);
});

অনুরোধ এবং প্রতিক্রিয়া পেয়ে

bgFetch.match('/ep-5.mp3').then(async (record) => {
  if (!record) {
    console.log('No record found');
    return;
  }

  console.log(`Here's the request`, record.request);
  const response = await record.responseReady;
  console.log(`And here's the response`, response);
});

record একটি BackgroundFetchRecord , এবং এটি এই মত দেখায়:

সেবা কর্মী ইভেন্ট

ইভেন্ট অবজেক্টগুলির নিম্নলিখিতগুলি রয়েছে:

সাফল্য/ব্যর্থতার প্রতিক্রিয়া

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

ব্যাকগ্রাউন্ড ফেচ সফলভাবে সম্পন্ন হলে, আপনার সার্ভিস কর্মী backgroundfetchsuccess ইভেন্ট পাবেন এবং event.registration হবে ব্যাকগ্রাউন্ড ফেচ রেজিস্ট্রেশন।

এই ইভেন্টের পরে, আনা অনুরোধগুলি এবং প্রতিক্রিয়াগুলি আর অ্যাক্সেসযোগ্য নয়, তাই আপনি যদি সেগুলি রাখতে চান তবে সেগুলিকে ক্যাশে API এর মতো কোথাও সরান৷

বেশিরভাগ পরিষেবা কর্মী ইভেন্টগুলির মতো, event.waitUntil ব্যবহার করুন যাতে পরিষেবা কর্মী জানতে পারে কখন ইভেন্টটি সম্পূর্ণ হবে৷

উদাহরণস্বরূপ, আপনার পরিষেবা কর্মীর মধ্যে:

addEventListener('backgroundfetchsuccess', (event) => {
  const bgFetch = event.registration;

  event.waitUntil(async function() {
    // Create/open a cache.
    const cache = await caches.open('downloads');
    // Get all the records.
    const records = await bgFetch.matchAll();
    // Copy each request/response across.
    const promises = records.map(async (record) => {
      const response = await record.responseReady;
      await cache.put(record.request, response);
    });

    // Wait for the copying to complete.
    await Promise.all(promises);

    // Update the progress notification.
    event.updateUI({ title: 'Episode 5 ready to listen!' });
  }());
});

ব্যর্থতা একটি একক 404-এ নেমে আসতে পারে, যা আপনার কাছে গুরুত্বপূর্ণ নাও হতে পারে, তাই উপরের মতো কিছু প্রতিক্রিয়া একটি ক্যাশে কপি করা মূল্যবান হতে পারে।

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

ডাউনলোডের অগ্রগতি এবং ফলাফল প্রদর্শনকারী UI ক্লিকযোগ্য। পরিষেবা কর্মীর backgroundfetchclick ইভেন্ট আপনাকে এতে প্রতিক্রিয়া জানাতে দেয়। উপরের হিসাবে event.registration হবে ব্যাকগ্রাউন্ড ফেচ রেজিস্ট্রেশন।

এই ইভেন্টের সাথে সাধারণ জিনিসটি হল একটি উইন্ডো খোলা:

addEventListener('backgroundfetchclick', (event) => {
  const bgFetch = event.registration;

  if (bgFetch.result === 'success') {
    clients.openWindow('/latest-podcasts');
  } else {
    clients.openWindow('/download-progress');
  }
});

অতিরিক্ত সম্পদ

• ব্যাখ্যাকারী
• স্পেসিফিকেশন
• chromestatus.com এন্ট্রি

সংশোধন: এই নিবন্ধের একটি পূর্ববর্তী সংস্করণ ভুলভাবে ব্যাকগ্রাউন্ড ফেচকে "ওয়েব স্ট্যান্ডার্ড" হিসাবে উল্লেখ করেছে। এপিআই বর্তমানে স্ট্যান্ডার্ড ট্র্যাকে নেই, স্পেসিফিকেশনটি ডব্লিউআইসিজি-তে ড্রাফ্ট কমিউনিটি গ্রুপ রিপোর্ট হিসাবে পাওয়া যেতে পারে।