ওয়েবের জন্য সঞ্চয়স্থান

ব্রাউজারে ডেটা সংরক্ষণের জন্য অনেকগুলি বিভিন্ন বিকল্প রয়েছে। কোনটি আপনার প্রয়োজনের জন্য সেরা?

পিট লেপেজ

ইন্টারনেট সংযোগগুলি চলতে চলতে ফ্লেকি বা অস্তিত্বহীন হতে পারে, যে কারণে অফলাইন সমর্থন এবং নির্ভরযোগ্য কর্মক্ষমতা প্রগতিশীল ওয়েব অ্যাপের সাধারণ বৈশিষ্ট্য। এমনকি নিখুঁত ওয়্যারলেস পরিবেশেও, ক্যাশিং এবং অন্যান্য স্টোরেজ কৌশলগুলির ন্যায়সঙ্গত ব্যবহার ব্যবহারকারীর অভিজ্ঞতাকে উল্লেখযোগ্যভাবে উন্নত করতে পারে। আপনার স্ট্যাটিক অ্যাপ্লিকেশন রিসোর্স (HTML, JavaScript, CSS, ইমেজ, ইত্যাদি) এবং ডেটা (ব্যবহারকারীর ডেটা, সংবাদ নিবন্ধ ইত্যাদি) ক্যাশে করার বিভিন্ন উপায় রয়েছে। কিন্তু সেরা সমাধান কোনটি? আপনি কত সঞ্চয় করতে পারেন? আপনি কিভাবে উচ্ছেদ থেকে এটি প্রতিরোধ করবেন?

আমি কি ব্যবহার করা উচিত?

সম্পদ সংরক্ষণের জন্য এখানে একটি সাধারণ সুপারিশ রয়েছে:

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

অন্যান্য স্টোরেজ প্রক্রিয়া সম্পর্কে কি?

ব্রাউজারে আরও বেশ কিছু স্টোরেজ মেকানিজম উপলব্ধ আছে, কিন্তু সেগুলির ব্যবহার সীমিত এবং উল্লেখযোগ্য কর্মক্ষমতা সমস্যা হতে পারে।

SessionStorage হল ট্যাব নির্দিষ্ট, এবং ট্যাবের লাইফটাইম পর্যন্ত ব্যাপ্ত। এটি অল্প পরিমাণে সেশন নির্দিষ্ট তথ্য সংরক্ষণের জন্য উপযোগী হতে পারে, উদাহরণস্বরূপ একটি IndexedDB কী। এটি সতর্কতার সাথে ব্যবহার করা উচিত কারণ এটি সিঙ্ক্রোনাস এবং মূল থ্রেডকে ব্লক করবে। এটি প্রায় 5MB এর মধ্যে সীমাবদ্ধ এবং শুধুমাত্র স্ট্রিং থাকতে পারে। কারণ এটি ট্যাব নির্দিষ্ট, এটি ওয়েব কর্মী বা পরিষেবা কর্মীদের কাছ থেকে অ্যাক্সেসযোগ্য নয়৷

LocalStorage এড়ানো উচিত কারণ এটি সিঙ্ক্রোনাস এবং প্রধান থ্রেড ব্লক করবে। এটি প্রায় 5MB এর মধ্যে সীমাবদ্ধ এবং শুধুমাত্র স্ট্রিং থাকতে পারে। LocalStorage ওয়েব কর্মী বা পরিষেবা কর্মীদের কাছ থেকে অ্যাক্সেসযোগ্য নয়৷

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

ফাইল সিস্টেম API এবং FileWriter API একটি স্যান্ডবক্সযুক্ত ফাইল সিস্টেমে ফাইলগুলি পড়ার এবং লেখার জন্য পদ্ধতি প্রদান করে। যদিও এটি অ্যাসিঙ্ক্রোনাস, এটি সুপারিশ করা হয় না কারণ এটি শুধুমাত্র Chromium-ভিত্তিক ব্রাউজারগুলিতে উপলব্ধ ৷

ফাইল সিস্টেম অ্যাক্সেস API ব্যবহারকারীদের তাদের স্থানীয় ফাইল সিস্টেমে ফাইলগুলি পড়তে এবং সম্পাদনা করা সহজ করার জন্য ডিজাইন করা হয়েছিল। একটি পৃষ্ঠা যেকোন স্থানীয় ফাইলে পড়তে বা লিখতে পারে তার আগে ব্যবহারকারীকে অবশ্যই অনুমতি দিতে হবে এবং সেশন জুড়ে অনুমতিগুলি বজায় থাকে না।

WebSQL ব্যবহার করা উচিত নয় এবং বিদ্যমান ব্যবহার IndexedDB-তে স্থানান্তরিত করা উচিত। প্রায় সব প্রধান ব্রাউজার থেকে সমর্থন মুছে ফেলা হয়েছে . W3C 2010 সালে ওয়েব এসকিউএল স্পেক বজায় রাখা বন্ধ করে দেয় , পরবর্তী আপডেটের পরিকল্পনা করা হয়নি।

অ্যাপ্লিকেশন ক্যাশে ব্যবহার করা উচিত নয় এবং বিদ্যমান ব্যবহার পরিষেবা কর্মীদের এবং ক্যাশে API-এ স্থানান্তরিত করা উচিত। এটি বাতিল করা হয়েছে এবং ভবিষ্যতে ব্রাউজার থেকে সমর্থন মুছে ফেলা হবে৷

আমি কতটা সঞ্চয় করতে পারি?

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

  • ক্রোম ব্রাউজারটিকে মোট ডিস্কের 80% পর্যন্ত ব্যবহার করার অনুমতি দেয়। একটি অরিজিন মোট ডিস্ক স্পেসের 60% পর্যন্ত ব্যবহার করতে পারে। সর্বাধিক উপলব্ধ কোটা নির্ধারণ করতে আপনি StorageManager API ব্যবহার করতে পারেন। অন্যান্য Chromium-ভিত্তিক ব্রাউজারগুলি আলাদা হতে পারে৷
    • ছদ্মবেশী মোডে, ক্রোম মোট ডিস্ক স্পেসের প্রায় 5% একটি অরিজিন ব্যবহার করতে পারে এমন স্টোরেজের পরিমাণ কমিয়ে দেয়।
    • ব্যবহারকারী যদি Chrome-এ "আপনি যখন সমস্ত উইন্ডো বন্ধ করেন তখন কুকিজ এবং সাইট ডেটা সাফ করুন" সক্ষম করে থাকেন, স্টোরেজ কোটা উল্লেখযোগ্যভাবে সর্বাধিক আনুমানিক 300MB-এ কমে যায়৷
    • Chrome এর বাস্তবায়ন সম্পর্কে বিস্তারিত জানার জন্য PR #3896 দেখুন।
  • Internet Explorer 10 এবং পরবর্তী 250MB পর্যন্ত সঞ্চয় করতে পারে এবং 10MB এর বেশি ব্যবহার করা হলে ব্যবহারকারীকে অনুরোধ করবে।
  • ফায়ারফক্স ব্রাউজারটিকে 50% পর্যন্ত বিনামূল্যে ডিস্ক স্থান ব্যবহার করার অনুমতি দেয়। একটি eTLD+1 গ্রুপ (যেমন, example.com , www.example.com এবং foo.bar.example.com ) 2GB পর্যন্ত ব্যবহার করতে পারে । এখনও কত জায়গা পাওয়া যায় তা নির্ধারণ করতে আপনি StorageManager API ব্যবহার করতে পারেন।
  • সাফারি (ডেস্কটপ এবং মোবাইল উভয়ই) প্রায় 1GB মঞ্জুরি দেয় বলে মনে হচ্ছে। সীমা পৌঁছে গেলে, সাফারি ব্যবহারকারীকে অনুরোধ করবে, 200MB বৃদ্ধিতে সীমা বাড়িয়ে দেবে। আমি এই বিষয়ে কোন অফিসিয়াল ডকুমেন্টেশন খুঁজে পেতে অক্ষম ছিল.
    • মোবাইল Safari-এর হোম স্ক্রিনে PWA যুক্ত করা হলে, এটি একটি নতুন স্টোরেজ কন্টেইনার তৈরি করবে বলে মনে হয় এবং PWA এবং মোবাইল Safari-এর মধ্যে কিছুই শেয়ার করা হয় না। একবার ইনস্টল করা PWA-এর জন্য কোটা হিট হয়ে গেলে, অতিরিক্ত স্টোরেজের জন্য অনুরোধ করার কোনো উপায় আছে বলে মনে হয় না।

অতীতে, যদি কোনো সাইট ডেটার একটি নির্দিষ্ট সীমা অতিক্রম করে থাকে, তাহলে ব্রাউজার ব্যবহারকারীকে আরও ডেটা ব্যবহারের অনুমতি দেওয়ার জন্য অনুরোধ করবে। উদাহরণস্বরূপ, যদি মূলটি 50MB-এর বেশি ব্যবহার করে, ব্রাউজার ব্যবহারকারীকে 100MB পর্যন্ত সঞ্চয় করার অনুমতি দেওয়ার জন্য অনুরোধ করবে, তারপর 50MB বৃদ্ধিতে আবার জিজ্ঞাসা করুন৷

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

আমি কিভাবে চেক করতে পারি কতটা স্টোরেজ পাওয়া যায়?

অনেক ব্রাউজারে , আপনি মূলে উপলব্ধ স্টোরেজের পরিমাণ এবং এটি কতটা স্টোরেজ ব্যবহার করছে তা নির্ধারণ করতে StorageManager API ব্যবহার করতে পারেন। এটি IndexedDB এবং Cache API দ্বারা ব্যবহৃত মোট বাইট সংখ্যা রিপোর্ট করে এবং উপলব্ধ আনুমানিক অবশিষ্ট স্টোরেজ স্পেস গণনা করা সম্ভব করে।

if (navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate();
  // quota.usage -> Number of bytes used.
  // quota.quota -> Maximum number of bytes available.
  const percentageUsed = (quota.usage / quota.quota) * 100;
  console.log(`You've used ${percentageUsed}% of the available storage.`);
  const remaining = quota.quota - quota.usage;
  console.log(`You can write up to ${remaining} more bytes.`);
}

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

পরিদর্শন করুন

বিকাশের সময়, আপনি আপনার ব্রাউজারের DevTools ব্যবহার করে বিভিন্ন ধরনের স্টোরেজ পরিদর্শন করতে পারেন এবং সহজেই সমস্ত সঞ্চিত ডেটা সাফ করতে পারেন৷

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

DevTools স্টোরেজ ফলক।

এই নিবন্ধে কাজ করার সময়, আমি যতটা সম্ভব দ্রুত স্টোরেজ ব্যবহার করার চেষ্টা করার জন্য একটি সহজ টুল লিখেছিলাম। এটি বিভিন্ন স্টোরেজ প্রক্রিয়া নিয়ে পরীক্ষা করার একটি দ্রুত এবং সহজ উপায়, এবং আপনি যখন আপনার সমস্ত কোটা ব্যবহার করেন তখন কী হয় তা দেখুন৷

কোটা পেরিয়ে যাওয়া কিভাবে সামলাবেন?

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

IndexedDB এবং Cache API উভয়ই QuotaExceededError নামে একটি DOMError নিক্ষেপ করে যখন আপনি উপলব্ধ কোটা অতিক্রম করেন।

ইনডেক্সডডিবি

যদি উৎপত্তি তার কোটা অতিক্রম করে থাকে, তাহলে IndexedDB-তে লেখার প্রচেষ্টা ব্যর্থ হবে। একটি ইভেন্ট পাস করে লেনদেনের onabort() হ্যান্ডলারকে ডাকা হবে। ইভেন্টটি ত্রুটি বৈশিষ্ট্যে একটি DOMException অন্তর্ভুক্ত করবে। ত্রুটির name চেক করলে QuotaExceededError ফিরে আসবে।

const transaction = idb.transaction(['entries'], 'readwrite');
transaction.onabort = function(event) {
  const error = event.target.error; // DOMException
  if (error.name == 'QuotaExceededError') {
    // Fallback code goes here
  }
};

ক্যাশে API

যদি মূল তার কোটা অতিক্রম করে থাকে, ক্যাশে API-তে লেখার প্রচেষ্টা একটি QuotaExceededError DOMException দিয়ে প্রত্যাখ্যান করবে।

try {
  const cache = await caches.open('my-cache');
  await cache.add(new Request('/sample1.jpg'));
} catch (err) {
  if (error.name === 'QuotaExceededError') {
    // Fallback code goes here
  }
}

কিভাবে উচ্ছেদ কাজ করে?

ওয়েব সঞ্চয়স্থান দুটি বালতিতে শ্রেণীবদ্ধ করা হয়েছে, "সেরা প্রচেষ্টা" এবং "নিরবিচ্ছিন্ন"। সর্বোত্তম প্রচেষ্টা মানে ব্যবহারকারীকে বাধা না দিয়ে ব্রাউজার দ্বারা স্টোরেজটি সাফ করা যেতে পারে, তবে দীর্ঘমেয়াদী বা সমালোচনামূলক ডেটার জন্য এটি কম টেকসই। যখন সঞ্চয়স্থান কম থাকে তখন স্থায়ী সঞ্চয়স্থান স্বয়ংক্রিয়ভাবে সাফ হয় না। ব্যবহারকারীকে ম্যানুয়ালি এই স্টোরেজটি সাফ করতে হবে (ব্রাউজার সেটিংসের মাধ্যমে)।

ডিফল্টরূপে, একটি সাইটের ডেটা (ইনডেক্সডডিবি, ক্যাশে এপিআই, ইত্যাদি সহ) সর্বোত্তম প্রচেষ্টা বিভাগে পড়ে, যার অর্থ হল যদি কোনও সাইট ক্রমাগত স্টোরেজের অনুরোধ না করে, ব্রাউজার তার বিবেচনার ভিত্তিতে সাইট ডেটা উচ্ছেদ করতে পারে, উদাহরণস্বরূপ, যখন ডিভাইসের সঞ্চয়স্থান কম থাকে .

সর্বোত্তম প্রচেষ্টার জন্য উচ্ছেদ নীতি হল:

  • ক্রোমিয়াম-ভিত্তিক ব্রাউজারগুলি ডেটা উচ্ছেদ করতে শুরু করবে যখন ব্রাউজারটির স্থান ফুরিয়ে যাবে, প্রথমে ন্যূনতম সম্প্রতি ব্যবহৃত উত্স থেকে সমস্ত সাইট ডেটা সাফ করে, তারপরে পরবর্তী, যতক্ষণ না ব্রাউজারটি আর সীমা অতিক্রম না করে।
  • Internet Explorer 10+ ডেটা উচ্ছেদ করবে না, কিন্তু উৎপত্তিকে আর লেখা থেকে আটকাবে।
  • ফায়ারফক্স ডাটা উচ্ছেদ করা শুরু করবে যখন উপলব্ধ ডিস্ক স্পেস পূর্ণ হবে, সর্বনিম্ন সম্প্রতি ব্যবহৃত মূল থেকে প্রথমে সমস্ত সাইট ডেটা সাফ করবে, তারপর পরবর্তী, যতক্ষণ না ব্রাউজার আর সীমা অতিক্রম না করে।
  • Safari পূর্বে ডেটা উচ্ছেদ করেনি, কিন্তু সম্প্রতি সমস্ত লিখনযোগ্য সঞ্চয়স্থানে একটি নতুন সাত দিনের ক্যাপ প্রয়োগ করেছে (নীচে দেখুন)।

MacOS-এ iOS এবং iPadOS 13.4 এবং Safari 13.1 থেকে শুরু করে, IndexedDB, পরিষেবা কর্মী নিবন্ধন এবং ক্যাশে API সহ সমস্ত স্ক্রিপ্ট লেখার যোগ্য স্টোরেজের উপর সাত দিনের ক্যাপ রয়েছে। এর মানে হল ব্যবহারকারী যদি সাইটের সাথে ইন্টারঅ্যাক্ট না করে তাহলে Safari ব্যবহারের সাত দিন পরে Safari ক্যাশে থেকে সমস্ত সামগ্রী উচ্ছেদ করবে৷ এই উচ্ছেদ নীতি হোম স্ক্রিনে যোগ করা ইনস্টল করা PWA-তে প্রযোজ্য নয় । সম্পূর্ণ বিশদ বিবরণের জন্য ওয়েবকিট ব্লগে সম্পূর্ণ তৃতীয়-পক্ষ কুকি ব্লকিং এবং আরও দেখুন।

বোনাস: কেন IndexedDB এর জন্য একটি মোড়ক ব্যবহার করুন

IndexedDB হল একটি নিম্ন স্তরের API যা ব্যবহারের আগে উল্লেখযোগ্য সেটআপের প্রয়োজন, যা সাধারণ ডেটা সংরক্ষণের জন্য বিশেষভাবে বেদনাদায়ক হতে পারে। বেশিরভাগ আধুনিক প্রতিশ্রুতি-ভিত্তিক API-এর বিপরীতে, এটি ইভেন্ট ভিত্তিক। IndexedDB-এর জন্য idb- এর মতো প্রতিশ্রুতিযুক্ত মোড়কগুলি কিছু শক্তিশালী বৈশিষ্ট্য লুকিয়ে রাখে কিন্তু আরও গুরুত্বপূর্ণ হল, IndexedDB লাইব্রেরির সাথে আসা জটিল যন্ত্রপাতি (যেমন লেনদেন, স্কিমা সংস্করণ) লুকিয়ে রাখে।

উপসংহার

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

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

ধন্যবাদ

এই নিবন্ধটি পর্যালোচনা করার জন্য জ্যারিড গুডম্যান, ফিল ওয়ালটন, ইজি কিটামুরা, ড্যানিয়েল মারফি, ডারউইন হুয়াং, জোশ বেল, মারিজান ক্রুইসেলব্রিঙ্ক এবং ভিক্টর কস্তানকে বিশেষ ধন্যবাদ। ধন্যবাদ Eiji Kitamura, Addy Osmani, এবং Marc Cohen কে যারা মূল নিবন্ধগুলি লিখেছেন যেগুলির উপর ভিত্তি করে এটি। Eiji ব্রাউজার স্টোরেজ অপব্যবহারকারী নামে একটি সহায়ক টুল লিখেছেন যা বর্তমান আচরণকে যাচাই করতে কার্যকর ছিল। এটি আপনাকে যতটা সম্ভব ডেটা সঞ্চয় করতে এবং আপনার ব্রাউজারে স্টোরেজ সীমা দেখতে দেয়। ফ্রাঙ্কোইস বিউফোর্টকে ধন্যবাদ যিনি সাফারির স্টোরেজ সীমা বের করার জন্য খনন করেছিলেন।

নায়কের ছবি আনস্প্ল্যাশে Guillaume Bolduc-এর।