ক্যাশে API: একটি দ্রুত নির্দেশিকা

আপনার অ্যাপ্লিকেশন ডেটা অফলাইনে উপলব্ধ করতে ক্যাশে API কীভাবে ব্যবহার করবেন তা শিখুন।

Pete LePage

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

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

এটা কোথায় পাওয়া যায়?

ক্যাশে API সমস্ত আধুনিক ব্রাউজারে উপলব্ধ। এটি গ্লোবাল caches সম্পত্তির মাধ্যমে উন্মুক্ত করা হয়েছে, তাই আপনি একটি সাধারণ বৈশিষ্ট্য সনাক্তকরণের সাথে API এর উপস্থিতির জন্য পরীক্ষা করতে পারেন:

const cacheAvailable = 'caches' in self;

ব্রাউজার সমর্থন

• 40
• 16
• 41
• 11.1

উৎস

ক্যাশে API একটি উইন্ডো, iframe, কর্মী, বা পরিষেবা কর্মী থেকে অ্যাক্সেস করা যেতে পারে।

কি সংরক্ষণ করা যায়

ক্যাশে শুধুমাত্র Request এবং Response বস্তুর জোড়া সঞ্চয় করে, যথাক্রমে HTTP অনুরোধ এবং প্রতিক্রিয়া উপস্থাপন করে। যাইহোক, অনুরোধ এবং প্রতিক্রিয়াগুলিতে যে কোনও ধরণের ডেটা থাকতে পারে যা HTTP-এর মাধ্যমে স্থানান্তর করা যেতে পারে।

কতটা সংরক্ষণ করা যায়?

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

একটি ক্যাশে তৈরি এবং খোলা

একটি ক্যাশে খুলতে, caches.open(name) পদ্ধতি ব্যবহার করুন, ক্যাশের নামটি একক প্যারামিটার হিসাবে পাস করুন। নামযুক্ত ক্যাশে বিদ্যমান না থাকলে, এটি তৈরি করা হয়। এই পদ্ধতিটি একটি Promise প্রদান করে যা Cache অবজেক্টের সাথে সমাধান করে।

const cache = await caches.open('my-cache');
// do something with cache...

একটি ক্যাশে যোগ করা হচ্ছে

একটি ক্যাশে একটি আইটেম যোগ করার তিনটি উপায় আছে - add , addAll , এবং put । তিনটি পদ্ধতিই একটি Promise প্রদান করে।

cache.add

প্রথমে cache.add() আছে। এটি একটি প্যারামিটার লাগে, একটি Request বা একটি URL ( string )। এটি নেটওয়ার্কের কাছে একটি অনুরোধ করে এবং ক্যাশে প্রতিক্রিয়া সঞ্চয় করে। যদি আনয়ন ব্যর্থ হয়, অথবা যদি প্রতিক্রিয়ার স্ট্যাটাস কোড 200 সীমার মধ্যে না থাকে, তাহলে কিছুই সংরক্ষণ করা হয় না এবং Promise প্রত্যাখ্যান করে। মনে রাখবেন যে CORS মোডে নয় এমন ক্রস-অরিজিন অনুরোধগুলি সংরক্ষণ করা যাবে না কারণ তারা 0 এর status প্রদান করে। এই ধরনের অনুরোধ শুধুমাত্র put দিয়ে সংরক্ষণ করা যেতে পারে।

// Retreive data.json from the server and store the response.
cache.add(new Request('/data.json'));

// Retreive data.json from the server and store the response.
cache.add('/data.json');

cache.addAll

এর পরে, cache.addAll() আছে। এটি add() এর মতই কাজ করে, কিন্তু Request অবজেক্ট বা ইউআরএল ( string s) এর একটি অ্যারে নেয়। এটি প্রতিটি পৃথক অনুরোধের জন্য cache.add কল করার অনুরূপ কাজ করে, কোনো একক অনুরোধ ক্যাশে না হলে Promise প্রত্যাখ্যান করে।

const urls = ['/weather/today.json', '/weather/tomorrow.json'];
cache.addAll(urls);

এই প্রতিটি ক্ষেত্রে, একটি নতুন এন্ট্রি যে কোনো মিল বিদ্যমান এন্ট্রিকে ওভাররাইট করে। এটি পুনরুদ্ধারের বিভাগে বর্ণিত একই মিলিত নিয়মগুলি ব্যবহার করে৷

cache.put

অবশেষে, cache.put() আছে, যা আপনাকে হয় নেটওয়ার্ক থেকে একটি প্রতিক্রিয়া সংরক্ষণ করতে বা আপনার নিজস্ব Response তৈরি এবং সংরক্ষণ করতে দেয়। এটি দুটি পরামিতি লাগে। প্রথমটি হয় একটি Request বস্তু বা একটি URL ( string ) হতে পারে। দ্বিতীয়টি অবশ্যই একটি Response হতে হবে, হয় নেটওয়ার্ক থেকে, অথবা আপনার কোড দ্বারা তৈরি।

// Retrieve data.json from the server and store the response.
cache.put('/data.json');

// Create a new entry for test.json and store the newly created response.
cache.put('/test.json', new Response('{"foo": "bar"}'));

// Retrieve data.json from the 3rd party site and store the response.
cache.put('https://example.com/data.json');

put() পদ্ধতিটি add() বা addAll() এর চেয়ে বেশি অনুমোদনযোগ্য এবং এটি আপনাকে নন-CORS প্রতিক্রিয়া বা অন্যান্য প্রতিক্রিয়া সংরক্ষণ করতে দেয় যেখানে প্রতিক্রিয়ার স্ট্যাটাস কোড 200 সীমার মধ্যে নেই। এটি একই অনুরোধের জন্য পূর্ববর্তী কোনো প্রতিক্রিয়া ওভাররাইট করবে।

রিকোয়েস্ট অবজেক্ট তৈরি করা হচ্ছে

সঞ্চিত জিনিসটির জন্য একটি URL ব্যবহার করে Request অবজেক্ট তৈরি করুন:

const request = new Request('/my-data-store/item-id');

রেসপন্স অবজেক্টের সাথে কাজ করা

Response অবজেক্ট কনস্ট্রাক্টর Blob , ArrayBuffer , FormData অবজেক্ট এবং স্ট্রিং সহ অনেক ধরণের ডেটা গ্রহণ করে।

const imageBlob = new Blob([data], {type: 'image/jpeg'});
const imageResponse = new Response(imageBlob);
const stringResponse = new Response('Hello world');

আপনি উপযুক্ত হেডার সেট করে একটি Response MIME প্রকার সেট করতে পারেন।

  const options = {
    headers: {
      'Content-Type': 'application/json'
    }
  }
  const jsonResponse = new Response('{}', options);

আপনি যদি একটি Response পুনরুদ্ধার করে থাকেন এবং এর মূল অংশটি অ্যাক্সেস করতে চান তবে আপনি ব্যবহার করতে পারেন এমন কয়েকটি সহায়ক পদ্ধতি রয়েছে। প্রতিটি একটি Promise প্রদান করে যা একটি ভিন্ন ধরনের মান দিয়ে সমাধান করে।

পদ্ধতি	বর্ণনা
arrayBuffer	বডি ধারণ করে একটি ArrayBuffer ফেরত দেয়, বাইটে সিরিয়াল করা হয়।
blob	একটি Blob ফেরত দেয়। যদি Response একটি Blob দিয়ে তৈরি করা হয় তবে এই নতুন Blob একই ধরণের রয়েছে। অন্যথায়, Response Content-Type ব্যবহার করা হয়।
text	একটি UTF-8 এনকোডেড স্ট্রিং হিসাবে শরীরের বাইট ব্যাখ্যা করে৷
json	একটি UTF-8 এনকোডেড স্ট্রিং হিসাবে শরীরের বাইট ব্যাখ্যা করে, তারপর এটি JSON হিসাবে পার্স করার চেষ্টা করে। ফলস্বরূপ বস্তু ফেরত দেয়, অথবা স্ট্রিংটিকে JSON হিসাবে পার্স করা না হলে একটি TypeError ছুড়ে দেয়।
formData	বডির বাইটগুলিকে একটি HTML ফর্ম হিসাবে ব্যাখ্যা করে, হয় multipart/form-data বা application/x-www-form-urlencoded হিসাবে এনকোড করা। একটি FormData অবজেক্ট ফেরত দেয়, অথবা ডেটা পার্স করা না গেলে একটি TypeError ছুড়ে দেয়।
body	বডি ডেটার জন্য একটি পঠনযোগ্য স্ট্রিম প্রদান করে।

উদাহরণ স্বরূপ

const response = new Response('Hello world');
const buffer = await response.arrayBuffer();
console.log(new Uint8Array(buffer));
// Uint8Array(11) [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]

একটি ক্যাশে থেকে পুনরুদ্ধার করা হচ্ছে

একটি ক্যাশে একটি আইটেম খুঁজে পেতে, আপনি match পদ্ধতি ব্যবহার করতে পারেন.

const response = await cache.match(request);
console.log(request, response);

request একটি স্ট্রিং হলে ব্রাউজার এটিকে new Request(request) কল করে একটি Request রূপান্তর করে। ফাংশনটি একটি Promise প্রদান করে যা একটি Response সমাধান করে যদি একটি ম্যাচিং এন্ট্রি পাওয়া যায়, বা অন্যথায় undefined ।

দুটি Requests মেলে কিনা তা নির্ধারণ করতে, ব্রাউজারটি শুধু ইউআরএল ব্যবহার করে না। দুটি অনুরোধ আলাদা বলে বিবেচিত হয় যদি তাদের আলাদা ক্যোয়ারী স্ট্রিং, Vary হেডার, বা HTTP পদ্ধতি ( GET , POST , PUT , ইত্যাদি) থাকে।

আপনি একটি বিকল্প অবজেক্টকে দ্বিতীয় প্যারামিটার হিসাবে পাস করে এই কিছু বা সমস্ত কিছুকে উপেক্ষা করতে পারেন।

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};

const response = await cache.match(request, options);
// do something with the response

যদি একাধিক ক্যাশে করা অনুরোধ মেলে তবে প্রথমে তৈরি করাটি ফেরত দেওয়া হয়। আপনি যদি সমস্ত মিলে যাওয়া প্রতিক্রিয়াগুলি পুনরুদ্ধার করতে চান, আপনি cache.matchAll() ব্যবহার করতে পারেন।

const options = {
  ignoreSearch: true,
  ignoreMethod: true,
  ignoreVary: true
};

const responses = await cache.matchAll(request, options);
console.log(`There are ${responses.length} matching responses.`);

একটি শর্টকাট হিসাবে আপনি প্রতিটি ক্যাশের জন্য caches.match() cache.match() ) ব্যবহার করে একবারে সমস্ত ক্যাশে অনুসন্ধান করতে পারেন।

অনুসন্ধান করা হচ্ছে

ক্যাশে এপিআই একটি Response বস্তুর সাথে মিলিত এন্ট্রি ছাড়া অনুরোধ বা প্রতিক্রিয়া অনুসন্ধান করার উপায় প্রদান করে না। যাইহোক, আপনি ফিল্টারিং ব্যবহার করে বা একটি সূচক তৈরি করে আপনার নিজের অনুসন্ধান বাস্তবায়ন করতে পারেন।

ফিল্টারিং

আপনার নিজের অনুসন্ধান বাস্তবায়নের একটি উপায় হল সমস্ত এন্ট্রির উপর পুনরাবৃত্তি করা এবং আপনি যেগুলি চান তা ফিল্টার করা। ধরা যাক যে আপনি .png দিয়ে শেষ হওয়া URL আছে এমন সমস্ত আইটেম খুঁজে পেতে চান।

async function findImages() {
  // Get a list of all of the caches for this origin
  const cacheNames = await caches.keys();
  const result = [];

  for (const name of cacheNames) {
    // Open the cache
    const cache = await caches.open(name);

    // Get a list of entries. Each item is a Request object
    for (const request of await cache.keys()) {
      // If the request URL matches, add the response to the result
      if (request.url.endsWith('.png')) {
        result.push(await cache.match(request));
      }
    }
  }

  return result;
}

এইভাবে আপনি এন্ট্রি ফিল্টার করতে Request এবং Response অবজেক্টের যে কোনও বৈশিষ্ট্য ব্যবহার করতে পারেন। মনে রাখবেন যে আপনি যদি ডেটার বড় সেটগুলিতে অনুসন্ধান করেন তবে এটি ধীর।

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

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

আপনি যদি অনুসন্ধানযোগ্য বৈশিষ্ট্যগুলির সাথে Request URL সংরক্ষণ করেন তবে অনুসন্ধান করার পরে আপনি সহজেই সঠিক ক্যাশে এন্ট্রি পুনরুদ্ধার করতে পারেন।

একটি আইটেম মুছে ফেলা হচ্ছে

একটি ক্যাশে থেকে একটি আইটেম মুছে ফেলার জন্য:

cache.delete(request);

যেখানে অনুরোধ একটি Request বা একটি URL স্ট্রিং হতে পারে। এই পদ্ধতিটি cache.match এর মত একই অপশন অবজেক্টও নেয়, যা আপনাকে একই URL এর জন্য একাধিক Request / Response জোড়া মুছে ফেলতে দেয়।

cache.delete('/example/file.txt', {ignoreVary: true, ignoreSearch: true});

একটি ক্যাশে মুছে ফেলা হচ্ছে

একটি ক্যাশে মুছে ফেলতে, caches.delete(name) কল করুন। এই ফাংশনটি একটি Promise প্রদান করে যা true সমাধান করে যদি ক্যাশে বিদ্যমান থাকে এবং মুছে ফেলা হয়, বা অন্যথায় false ।

ধন্যবাদ

ম্যাট স্কেলসকে ধন্যবাদ যিনি এই নিবন্ধটির মূল সংস্করণ লিখেছেন, যা প্রথম WebFundamentals-এ প্রকাশিত হয়েছিল।