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

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

পিট লেপেজ

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

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

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

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

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

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

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

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

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

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

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

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

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

  • ক্রোম ব্রাউজারটিকে মোট ডিস্কের 80% পর্যন্ত ব্যবহার করার অনুমতি দেয়। একটি অরিজিন মোট ডিস্ক স্পেসের 60% পর্যন্ত ব্যবহার করতে পারে। সর্বাধিক উপলব্ধ কোটা নির্ধারণ করতে আপনি StorageManager API ব্যবহার করতে পারেন। অন্যান্য Chromium-ভিত্তিক ব্রাউজারগুলি আলাদা হতে পারে৷
    • ছদ্মবেশী মোডে, ক্রোম মোট ডিস্ক স্পেসের প্রায় 5% একটি অরিজিন ব্যবহার করতে পারে এমন স্টোরেজের পরিমাণ কমিয়ে দেয়।
    • ব্যবহারকারী যদি Chrome-এ "আপনি যখন সমস্ত উইন্ডো বন্ধ করেন তখন কুকিজ এবং সাইট ডেটা সাফ করুন" সক্ষম করে থাকেন, স্টোরেজ কোটা উল্লেখযোগ্যভাবে সর্বাধিক আনুমানিক 300MB-এ কমে যায়৷
  • ফায়ারফক্স ব্রাউজারটিকে 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-এ একটি নতুন বৈশিষ্ট্য যোগ করা হয়েছে যা আপনাকে স্টোরেজ প্যানে সাইটের স্টোরেজ কোটা ওভাররাইড করতে দেয়। এই বৈশিষ্ট্যটি আপনাকে বিভিন্ন ডিভাইস অনুকরণ করার ক্ষমতা দেয় এবং কম ডিস্ক প্রাপ্যতার পরিস্থিতিতে আপনার অ্যাপগুলির আচরণ পরীক্ষা করে। অ্যাপ্লিকেশানে যান তারপর স্টোরেজ , সিমুলেট কাস্টম স্টোরেজ কোটা চেকবক্স সক্ষম করুন এবং স্টোরেজ কোটা অনুকরণ করতে যেকোনো বৈধ নম্বর লিখুন।

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

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

কোটা ছাড়িয়ে গেলে কী করবেন? সবচেয়ে গুরুত্বপূর্ণ, আপনি সর্বদা লেখার ত্রুটিগুলি ধরতে এবং পরিচালনা করা উচিত, তা একটি 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
  }
}

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

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

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

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

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

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

স্টোরেজ বালতি

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

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

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

বোনাস: SQLite Wasm

ওয়েব এসকিউএল অবচয় এবং ক্রোম থেকে সরানোর পরে, Google জনপ্রিয় SQLite ডাটাবেসের রক্ষণাবেক্ষণকারীদের সাথে SQLite-এর উপর ভিত্তি করে ওয়েব SQL এর প্রতিস্থাপনের প্রস্তাব দেয়। অরিজিন প্রাইভেট ফাইল সিস্টেম দ্বারা সমর্থিত ব্রাউজারে SQLite Wasm পড়ুন কীভাবে এটি ব্যবহার করবেন তার বিশদ বিবরণের জন্য।

উপসংহার

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

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

ধন্যবাদ

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

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