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

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

দ্রষ্টব্য: এই নিবন্ধে অনেক উদাহরণ async ফাংশন ব্যবহার করে। আপনি যদি তাদের সাথে পরিচিত না হন তবে গাইডটি দেখুন ।

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

পরামিতি
id	string স্বতন্ত্রভাবে এই ব্যাকগ্রাউন্ড আনয়ন সনাক্ত করে। backgroundFetch.fetch প্রত্যাখ্যান করবে যদি আইডি একটি বিদ্যমান ব্যাকগ্রাউন্ড আনার সাথে মেলে।
requests	Array< Request |string> আনতে জিনিস. স্ট্রিংগুলিকে ইউআরএল হিসাবে গণ্য করা হবে, এবং new Request(theString) মাধ্যমে Request s-এ পরিণত হবে। যতক্ষণ পর্যন্ত সংস্থান CORS এর মাধ্যমে এটির অনুমতি দেয় ততক্ষণ আপনি অন্যান্য উত্স থেকে জিনিসগুলি আনতে পারেন৷ দ্রষ্টব্য: ক্রোম বর্তমানে এমন অনুরোধগুলিকে সমর্থন করে না যার জন্য একটি CORS প্রিফ্লাইটের প্রয়োজন হবে৷
options	একটি বস্তু যা নিম্নলিখিত অন্তর্ভুক্ত করতে পারে:
options.title	string ব্রাউজারের অগ্রগতির সাথে প্রদর্শনের জন্য একটি শিরোনাম।
options.icons	Array< IconDefinition > একটি `src`, `size`, এবং `type` সহ বস্তুর একটি বিন্যাস।
options.downloadTotal	number প্রতিক্রিয়া সংস্থাগুলির মোট আকার (জিজিপমুক্ত হওয়ার পরে)। যদিও এটি ঐচ্ছিক, এটি দৃঢ়ভাবে সুপারিশ করা হয় যে আপনি এটি প্রদান করুন। এটি ব্যবহারকারীকে ডাউনলোড কত বড় তা জানাতে এবং অগ্রগতির তথ্য প্রদান করতে ব্যবহৃত হয়। আপনি যদি এটি প্রদান না করেন, ব্রাউজার ব্যবহারকারীকে বলবে যে আকারটি অজানা, এবং ফলস্বরূপ ব্যবহারকারীর ডাউনলোডটি বাতিল করার সম্ভাবনা বেশি হতে পারে৷ যদি ব্যাকগ্রাউন্ড আনয়ন ডাউনলোডগুলি এখানে প্রদত্ত সংখ্যা ছাড়িয়ে যায়, তবে এটি বাতিল করা হবে৷ ডাউনলোডটি downloadTotal এর চেয়ে ছোট হলে এটি সম্পূর্ণ ঠিক আছে, তাই আপনি যদি নিশ্চিত না হন যে ডাউনলোড মোট কত হবে, তবে সতর্কতার দিক থেকে ভুল করা ভাল।

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

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

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

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

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

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 ) নিম্নলিখিতগুলি রয়েছে:

বৈশিষ্ট্য
id	string ব্যাকগ্রাউন্ড ফেচ এর আইডি।
uploadTotal	number সার্ভারে পাঠানো বাইটের সংখ্যা।
uploaded	number সফলভাবে পাঠানো বাইট সংখ্যা.
downloadTotal	number ব্যাকগ্রাউন্ড ফেচ রেজিস্টার করার সময় প্রদত্ত মান, বা শূন্য।
downloaded	number সফলভাবে প্রাপ্ত বাইট সংখ্যা. এই মান কমতে পারে। উদাহরণস্বরূপ, যদি সংযোগ ড্রপ হয় এবং ডাউনলোড পুনরায় শুরু করা না যায়, সেক্ষেত্রে ব্রাউজার স্ক্র্যাচ থেকে সেই সংস্থানটির জন্য ফেরত পুনরায় চালু করে।
result	নিম্নলিখিতগুলির মধ্যে একটি: "" - পটভূমি নিয়ে আসা সক্রিয়, তাই এখনও কোন ফলাফল নেই৷ "success" - পটভূমি নিয়ে আসা সফল হয়েছে৷ "failure" - পটভূমি নিয়ে আসা ব্যর্থ হয়েছে৷ এই মানটি তখনই প্রদর্শিত হয় যখন ব্যাকগ্রাউন্ড ফেচ সম্পূর্ণভাবে ব্যর্থ হয়, যেমন ব্রাউজারে পুনরায় চেষ্টা/পুনরায় শুরু করা যায় না।
failureReason	নিম্নলিখিতগুলির মধ্যে একটি: "" - পটভূমি নিয়ে আসা ব্যর্থ হয়নি৷ "aborted" - ব্যাকগ্রাউন্ড ফেচ ব্যবহারকারী দ্বারা বাতিল করা হয়েছে, অথবা abort() বলা হয়েছে। "bad-status" - প্রতিক্রিয়াগুলির মধ্যে একটির একটি ঠিক না-ঠিক অবস্থা ছিল, যেমন 404৷ "fetch-error" - অন্য কোনো কারণে ফেচগুলির মধ্যে একটি ব্যর্থ হয়েছে, যেমন CORS, MIX, একটি অবৈধ আংশিক প্রতিক্রিয়া, বা একটি আনয়নের জন্য একটি সাধারণ নেটওয়ার্ক ব্যর্থতা যা পুনরায় চেষ্টা করা যাবে না৷ "quota-exceeded" - পটভূমি আনার সময় সঞ্চয়স্থান কোটা পৌঁছে গেছে। "download-total-exceeded" - প্রদত্ত `ডাউনলোড টোটাল` ছাড়িয়ে গেছে।
recordsAvailable	boolean অন্তর্নিহিত অনুরোধ/প্রতিক্রিয়াগুলি অ্যাক্সেস করা যেতে পারে? একবার এই মিথ্যা match এবং matchAll ব্যবহার করা যাবে না.
পদ্ধতি
abort()	Promise<boolean> ব্যাকগ্রাউন্ড আনা বাতিল করুন। ফিরিয়ে আনা প্রতিশ্রুতি সত্যের সাথে সমাধান করা হয় যদি আনা সফলভাবে বাতিল করা হয়।
matchAll(request, opts)	Promise<Array<BackgroundFetchRecord>> ফেরত দেয় অনুরোধ এবং প্রতিক্রিয়া পান. এখানে আর্গুমেন্ট ক্যাশে API এর মতই। যুক্তি ছাড়া কল করা সমস্ত রেকর্ডের জন্য একটি প্রতিশ্রুতি প্রদান করে। আরো বিস্তারিত জানার জন্য নীচে দেখুন.
match(request, opts)	Promise<BackgroundFetchRecord> উপরে হিসাবে, কিন্তু প্রথম ম্যাচ দিয়ে সমাধান.
ঘটনা
progress	uploaded , downloaded , result , বা failureReason পরিবর্তন হলে বহিস্কার করা হয়েছে।

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

এটি 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}%`);
});

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

সতর্কতা: Chrome-এর বর্তমান বাস্তবায়নে আপনি শুধুমাত্র backgroundfetchsuccess , backgroundfetchfailure , এবং backgroundfetchabort পরিষেবা কর্মী ইভেন্টের সময় অনুরোধ এবং প্রতিক্রিয়া পেতে পারেন (নীচে দেখুন)। ভবিষ্যতে আপনি ইন-প্রোগ্রেস ফেচ পেতে সক্ষম হবেন।

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 , এবং এটি এই মত দেখায়:

বৈশিষ্ট্য
request	Request যে অনুরোধ জানানো হয়েছিল।
responseReady	Promise<Response> পাওয়া প্রতিক্রিয়া. প্রতিক্রিয়া একটি প্রতিশ্রুতির পিছনে রয়েছে কারণ এটি এখনও পাওয়া যায়নি। আনা ব্যর্থ হলে প্রতিশ্রুতি প্রত্যাখ্যান করা হবে।

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

ঘটনা
backgroundfetchsuccess	সবকিছু সফলভাবে আনা হয়েছে.
backgroundfetchfailure	এক বা একাধিক আনা ব্যর্থ হয়েছে৷
backgroundfetchabort	এক বা একাধিক আনয়ন ব্যর্থ হয়েছে৷ আপনি যদি সম্পর্কিত ডেটা পরিষ্কার করতে চান তবেই এটি সত্যিই কার্যকর।
backgroundfetchclick	ব্যবহারকারী ডাউনলোড অগ্রগতি UI এ ক্লিক করেছেন।

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

বৈশিষ্ট্য
registration	BackgroundFetchRegistration
পদ্ধতি
updateUI({ title, icons })	আপনি প্রাথমিকভাবে সেট করা শিরোনাম/আইকন পরিবর্তন করতে দেয়। এটি ঐচ্ছিক, তবে প্রয়োজনে এটি আপনাকে আরও প্রসঙ্গ প্রদান করতে দেয়। আপনি backgroundfetchsuccess এবং backgroundfetchfailure ইভেন্টের সময় এটি শুধুমাত্র *একবার* করতে পারেন।

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

আমরা ইতিমধ্যেই 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 এন্ট্রি

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