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

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

Pete LePage

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

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

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

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

const cacheAvailable = 'caches' in self;

ক্যাশে 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 প্রদান করে যা একটি ভিন্ন ধরনের মান দিয়ে সমাধান করে।

যেমন

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 মেলে কিনা তা নির্ধারণ করতে, ব্রাউজারটি শুধু ইউআরএল ব্যবহার করে না। দুটি অনুরোধ আলাদা বলে বিবেচিত হয় যদি তাদের আলাদা ক্যোয়ারী স্ট্রিং,