ফাইল সিস্টেম অবজারভার API অরিজিন ট্রায়াল

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

ফাইল সিস্টেম অবজারভার API, Chrome 129 থেকে অরিজিন ট্রায়ালে, এটি পরিবর্তন করে, এবং পরিবর্তনগুলি ঘটলে বিকাশকারীদের স্বয়ংক্রিয়ভাবে সতর্ক হতে দেয়। এই নির্দেশিকাটি ব্যাখ্যা করে যে এটি কীভাবে কাজ করে এবং কীভাবে বৈশিষ্ট্যটি চেষ্টা করতে হয়।

কেস ব্যবহার করুন

ফাইল সিস্টেম অবজারভার এপিআই ব্যবহার করুন অ্যাপগুলিতে যেগুলি ফাইল সিস্টেমের সম্ভাব্য পরিবর্তনগুলি হওয়ার সাথে সাথেই তাদের জানাতে হবে।

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

কিভাবে ফাইল সিস্টেম অবজারভার API ব্যবহার করবেন

বৈশিষ্ট্য সনাক্তকরণ

ফাইল সিস্টেম অবজারভার API সমর্থিত কিনা তা দেখতে, নিম্নলিখিত উদাহরণের মতো একটি বৈশিষ্ট্য পরীক্ষা চালান।

if ('FileSystemObserver' in self) {
  // The File System Observer API is supported.
}

একটি ফাইল সিস্টেম পর্যবেক্ষক শুরু করুন

new FileSystemObserver() কল করে একটি ফাইল সিস্টেম পর্যবেক্ষক শুরু করুন, এটি একটি আর্গুমেন্ট হিসাবে একটি callback ফাংশন প্রদান করুন।

const observer = new FileSystemObserver(callback);

একটি ফাইল বা ডিরেক্টরি পর্যবেক্ষণ শুরু করুন

একটি ফাইল বা ডিরেক্টরি পর্যবেক্ষণ শুরু করতে, FileSystemObserver ইনস্ট্যান্সের অ্যাসিঙ্ক্রোনাস observe() পদ্ধতিতে কল করুন। এই পদ্ধতিটি একটি আর্গুমেন্ট হিসাবে নির্বাচিত ফাইল বা ডিরেক্টরির FileSystemHandle প্রদান করুন। একটি ডিরেক্টরি পর্যবেক্ষণ করার সময়, একটি ঐচ্ছিক options আর্গুমেন্ট রয়েছে যা আপনাকে নির্বাচন করতে দেয় যে আপনি যদি ডিরেক্টরির পরিবর্তনগুলিকে পুনরাবৃত্তভাবে অবহিত করতে চান (অর্থাৎ, ডিরেক্টরির জন্য এবং সমস্ত সাবডিরেক্টরি এবং ফাইল রয়েছে)। ডিফল্ট বিকল্প হল শুধুমাত্র ডিরেক্টরি নিজেই এবং সরাসরি থাকা ফাইলগুলি পর্যবেক্ষণ করা।

// Observe a file.
await observer.observe(fileHandle);
// Observe a directory.
await observer.observe(directoryHandle);
// Observe a directory recursively.
await observer.observe(directoryHandle, {recursive: true});

কলব্যাক ফাংশন

ফাইল সিস্টেমে পরিবর্তন ঘটলে, একটি কলব্যাক ফাংশন ফাইল সিস্টেম পরিবর্তন records এবং observer নিজেই এর আর্গুমেন্ট সহ কল ​​করা হয়। আপনি observer যুক্তি ব্যবহার করতে পারেন, উদাহরণস্বরূপ, পর্যবেক্ষককে সংযোগ বিচ্ছিন্ন করতে ( ফাইল সিস্টেম পর্যবেক্ষণ বন্ধ করুন দেখুন) যখন আপনার আগ্রহের ফাইলগুলি মুছে ফেলা হয়।

const callback = (records, observer) => {
  for (const record of records) {
    console.log('Change detected', record);
  }
};

ফাইল সিস্টেম পরিবর্তন রেকর্ড

প্রতিটি ফাইল সিস্টেম পরিবর্তন রেকর্ড নিম্নলিখিত কাঠামো আছে. সমস্ত ক্ষেত্র শুধুমাত্র পঠনযোগ্য।

  • root (একটি FileSystemHandle ): হ্যান্ডেলটি FileSystemObserver.observe() ফাংশনে পাস করা হয়েছে।
  • changedHandle (একটি FileSystemHandle ): ফাইল সিস্টেম পরিবর্তন দ্বারা প্রভাবিত হ্যান্ডেল। এই ক্ষেত্রটি "errored" , "unknown" এবং "disappeared" ধরনের ইভেন্টের জন্য null হবে। কোন ফাইল বা ডিরেক্টরি অদৃশ্য হয়ে গেছে তা দেখতে, relativePathComponents ব্যবহার করুন।
  • relativePathComponents (একটি Array ): root সাথে সম্পর্কিত changedHandle হ্যান্ডেলের পথ।
  • type (a String ): পরিবর্তনের ধরন। নিম্নলিখিত ধরনের সম্ভব:
    • "appeared" : ফাইল বা ডিরেক্টরি তৈরি করা হয়েছে বা root সরানো হয়েছে।
    • "disappeared" : ফাইল বা ডিরেক্টরি মুছে ফেলা হয়েছে বা root থেকে সরানো হয়েছে।
    • "modified" : ফাইল বা ডিরেক্টরি পরিবর্তন করা হয়েছে।
    • "moved" : ফাইল বা ডিরেক্টরিটি root মধ্যে সরানো হয়েছে।
    • "unknown" : এটি নির্দেশ করে যে শূন্য বা তার বেশি ঘটনা মিস করা হয়েছে। এর প্রতিক্রিয়া হিসেবে ডেভেলপারদের প্রেক্ষিত ডিরেক্টরিতে পোল করা উচিত।
    • "errored" : পর্যবেক্ষণটি আর বৈধ নয়। এই ক্ষেত্রে, আপনি ফাইল সিস্টেম পর্যবেক্ষণ বন্ধ করতে চাইতে পারেন। প্রতি-অরিজিন পর্যবেক্ষণের সর্বোচ্চ সীমা পৌঁছে গেলেও এই মানটি পাঠানো হবে। এই সীমা অপারেটিং সিস্টেমের উপর নির্ভরশীল এবং আগে থেকে জানা নেই। যদি এটি ঘটে, তবে সাইটটি পুনরায় চেষ্টা করার সিদ্ধান্ত নিতে পারে, যদিও অপারেটিং সিস্টেমটি যথেষ্ট সম্পদ খালি করেছে এমন কোন গ্যারান্টি নেই। এই মানটি কখন পাঠানো হবে তার আরেকটি ক্ষেত্রে যখন পর্যবেক্ষণ করা হ্যান্ডেল (অর্থাৎ, পর্যবেক্ষণের মূল) মুছে ফেলা হয় বা সরানো হয়। এই ক্ষেত্রে, প্রথমে "disappeared" ইভেন্ট পাঠানো হয়, তারপরে একটি "errored" ইভেন্ট পাঠানো হয়, যা নির্দেশ করে যে পর্যবেক্ষণটি আর বৈধ নয়। অবশেষে, এই ইভেন্টটি পাঠানো হয় যখন ডিরেক্টরি বা ফাইল হ্যান্ডেলের অনুমতি সরানো হয়।
  • relativePathMovedFrom (একটি Array , ঐচ্ছিক): একটি সরানো হ্যান্ডেলের পূর্ববর্তী অবস্থান। type "moved" হলেই উপলভ্য।

একটি ফাইল বা ডিরেক্টরি পর্যবেক্ষণ বন্ধ করুন

একটি FileSystemHandle পর্যবেক্ষণ করা বন্ধ করতে, unobserve() পদ্ধতিতে কল করুন, এটিকে একটি আর্গুমেন্ট হিসাবে হ্যান্ডেল পাস করুন।

observer.unobserve(fileHandle);

ফাইল সিস্টেম পর্যবেক্ষণ করা বন্ধ করুন

ফাইল সিস্টেম পর্যবেক্ষণ করা বন্ধ করতে, নিচের মত FileSystemObserver উদাহরণটি সংযোগ বিচ্ছিন্ন করুন।

observer.disconnect();

API ব্যবহার করে দেখুন

স্থানীয়ভাবে ফাইল সিস্টেম অবজারভার API পরীক্ষা করতে, #file-system-observer পতাকা about:flags এ সেট করুন। আসল ব্যবহারকারীদের সাথে API পরীক্ষা করতে, অরিজিন ট্রায়ালের জন্য সাইন আপ করুন এবং গাইড Chrome অরিজিন ট্রায়াল অনুযায়ী নির্দেশাবলী অনুসরণ করুন। অরিজিন ট্রায়াল Chrome 129 (সেপ্টেম্বর 11, 2024) থেকে Chrome 134 (ফেব্রুয়ারি 26, 2025) পর্যন্ত চলবে।

ডেমো

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

প্রতিক্রিয়া

ফাইল সিস্টেম অবজারভার API-এর আকৃতি সম্পর্কে আপনার মতামত থাকলে, WHATWG/fs সংগ্রহস্থলে ইস্যু #123- এ মন্তব্য করুন।

স্বীকৃতি

এই নথিটি Daseul Lee , Nathan Memmott , Etienne Noël , এবং Rachel Andrew দ্বারা পর্যালোচনা করা হয়েছে।

,

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

ফাইল সিস্টেম অবজারভার API, Chrome 129 থেকে অরিজিন ট্রায়ালে, এটি পরিবর্তন করে, এবং পরিবর্তনগুলি ঘটলে বিকাশকারীদের স্বয়ংক্রিয়ভাবে সতর্ক হতে দেয়। এই নির্দেশিকাটি ব্যাখ্যা করে যে এটি কীভাবে কাজ করে এবং কীভাবে বৈশিষ্ট্যটি চেষ্টা করতে হয়।

কেস ব্যবহার করুন

ফাইল সিস্টেম অবজারভার এপিআই ব্যবহার করুন অ্যাপগুলিতে যেগুলি ফাইল সিস্টেমের সম্ভাব্য পরিবর্তনগুলি হওয়ার সাথে সাথেই তাদের জানাতে হবে।

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

কিভাবে ফাইল সিস্টেম অবজারভার API ব্যবহার করবেন

বৈশিষ্ট্য সনাক্তকরণ

ফাইল সিস্টেম অবজারভার API সমর্থিত কিনা তা দেখতে, নিম্নলিখিত উদাহরণের মতো একটি বৈশিষ্ট্য পরীক্ষা চালান।

if ('FileSystemObserver' in self) {
  // The File System Observer API is supported.
}

একটি ফাইল সিস্টেম পর্যবেক্ষক শুরু করুন

new FileSystemObserver() কল করে একটি ফাইল সিস্টেম পর্যবেক্ষক শুরু করুন, এটি একটি আর্গুমেন্ট হিসাবে একটি callback ফাংশন প্রদান করুন।

const observer = new FileSystemObserver(callback);

একটি ফাইল বা ডিরেক্টরি পর্যবেক্ষণ শুরু করুন

একটি ফাইল বা ডিরেক্টরি পর্যবেক্ষণ শুরু করতে, FileSystemObserver ইনস্ট্যান্সের অ্যাসিঙ্ক্রোনাস observe() পদ্ধতিতে কল করুন। এই পদ্ধতিটি একটি আর্গুমেন্ট হিসাবে নির্বাচিত ফাইল বা ডিরেক্টরির FileSystemHandle প্রদান করুন। একটি ডিরেক্টরি পর্যবেক্ষণ করার সময়, একটি ঐচ্ছিক options আর্গুমেন্ট রয়েছে যা আপনাকে নির্বাচন করতে দেয় যে আপনি যদি ডিরেক্টরির পরিবর্তনগুলিকে পুনরাবৃত্তভাবে অবহিত করতে চান (অর্থাৎ, ডিরেক্টরির জন্য এবং সমস্ত সাবডিরেক্টরি এবং ফাইল রয়েছে)। ডিফল্ট বিকল্প হল শুধুমাত্র ডিরেক্টরি নিজেই এবং সরাসরি থাকা ফাইলগুলি পর্যবেক্ষণ করা।

// Observe a file.
await observer.observe(fileHandle);
// Observe a directory.
await observer.observe(directoryHandle);
// Observe a directory recursively.
await observer.observe(directoryHandle, {recursive: true});

কলব্যাক ফাংশন

ফাইল সিস্টেমে পরিবর্তন ঘটলে, একটি কলব্যাক ফাংশন ফাইল সিস্টেম পরিবর্তন records এবং observer নিজেই এর আর্গুমেন্ট সহ কল ​​করা হয়। আপনি observer যুক্তি ব্যবহার করতে পারেন, উদাহরণস্বরূপ, পর্যবেক্ষককে সংযোগ বিচ্ছিন্ন করতে ( ফাইল সিস্টেম পর্যবেক্ষণ বন্ধ করুন দেখুন) যখন আপনার আগ্রহের ফাইলগুলি মুছে ফেলা হয়।

const callback = (records, observer) => {
  for (const record of records) {
    console.log('Change detected', record);
  }
};

ফাইল সিস্টেম পরিবর্তন রেকর্ড

প্রতিটি ফাইল সিস্টেম পরিবর্তন রেকর্ড নিম্নলিখিত কাঠামো আছে. সমস্ত ক্ষেত্র শুধুমাত্র পঠনযোগ্য।

  • root (একটি FileSystemHandle ): হ্যান্ডেলটি FileSystemObserver.observe() ফাংশনে পাস করা হয়েছে।
  • changedHandle (একটি FileSystemHandle ): ফাইল সিস্টেম পরিবর্তন দ্বারা প্রভাবিত হ্যান্ডেল। এই ক্ষেত্রটি "errored" , "unknown" এবং "disappeared" ধরনের ইভেন্টের জন্য null হবে। কোন ফাইল বা ডিরেক্টরি অদৃশ্য হয়ে গেছে তা দেখতে, relativePathComponents ব্যবহার করুন।
  • relativePathComponents (একটি Array ): root সাথে সম্পর্কিত changedHandle হ্যান্ডেলের পথ।
  • type (a String ): পরিবর্তনের ধরন। নিম্নলিখিত ধরনের সম্ভব:
    • "appeared" : ফাইল বা ডিরেক্টরি তৈরি করা হয়েছে বা root সরানো হয়েছে।
    • "disappeared" : ফাইল বা ডিরেক্টরি মুছে ফেলা হয়েছে বা root থেকে সরানো হয়েছে।
    • "modified" : ফাইল বা ডিরেক্টরি পরিবর্তন করা হয়েছে।
    • "moved" : ফাইল বা ডিরেক্টরিটি root মধ্যে সরানো হয়েছে।
    • "unknown" : এটি নির্দেশ করে যে শূন্য বা তার বেশি ঘটনা মিস করা হয়েছে। এর প্রতিক্রিয়া হিসেবে ডেভেলপারদের প্রেক্ষিত ডিরেক্টরিতে পোল করা উচিত।
    • "errored" : পর্যবেক্ষণটি আর বৈধ নয়। এই ক্ষেত্রে, আপনি ফাইল সিস্টেম পর্যবেক্ষণ বন্ধ করতে চাইতে পারেন। প্রতি-অরিজিন পর্যবেক্ষণের সর্বোচ্চ সীমা পৌঁছে গেলেও এই মানটি পাঠানো হবে। এই সীমা অপারেটিং সিস্টেমের উপর নির্ভরশীল এবং আগে থেকে জানা নেই। যদি এটি ঘটে, তবে সাইটটি পুনরায় চেষ্টা করার সিদ্ধান্ত নিতে পারে, যদিও অপারেটিং সিস্টেমটি যথেষ্ট সম্পদ খালি করেছে এমন কোন গ্যারান্টি নেই। এই মানটি কখন পাঠানো হবে তার আরেকটি ক্ষেত্রে যখন পর্যবেক্ষণ করা হ্যান্ডেল (অর্থাৎ, পর্যবেক্ষণের মূল) মুছে ফেলা হয় বা সরানো হয়। এই ক্ষেত্রে, প্রথমে "disappeared" ইভেন্ট পাঠানো হয়, তারপরে একটি "errored" ইভেন্ট পাঠানো হয়, যা নির্দেশ করে যে পর্যবেক্ষণটি আর বৈধ নয়। অবশেষে, এই ইভেন্টটি পাঠানো হয় যখন ডিরেক্টরি বা ফাইল হ্যান্ডেলের অনুমতি সরানো হয়।
  • relativePathMovedFrom (একটি Array , ঐচ্ছিক): একটি সরানো হ্যান্ডেলের পূর্ববর্তী অবস্থান। type "moved" হলেই উপলভ্য।

একটি ফাইল বা ডিরেক্টরি পর্যবেক্ষণ বন্ধ করুন

একটি FileSystemHandle পর্যবেক্ষণ করা বন্ধ করতে, unobserve() পদ্ধতিতে কল করুন, এটিকে একটি আর্গুমেন্ট হিসাবে হ্যান্ডেল পাস করুন।

observer.unobserve(fileHandle);

ফাইল সিস্টেম পর্যবেক্ষণ করা বন্ধ করুন

ফাইল সিস্টেম পর্যবেক্ষণ করা বন্ধ করতে, নিচের মত FileSystemObserver উদাহরণটি সংযোগ বিচ্ছিন্ন করুন।

observer.disconnect();

API ব্যবহার করে দেখুন

স্থানীয়ভাবে ফাইল সিস্টেম অবজারভার API পরীক্ষা করতে, #file-system-observer পতাকা about:flags এ সেট করুন। আসল ব্যবহারকারীদের সাথে API পরীক্ষা করতে, অরিজিন ট্রায়ালের জন্য সাইন আপ করুন এবং গাইড Chrome অরিজিন ট্রায়াল অনুযায়ী নির্দেশাবলী অনুসরণ করুন। অরিজিন ট্রায়াল Chrome 129 (সেপ্টেম্বর 11, 2024) থেকে Chrome 134 (ফেব্রুয়ারি 26, 2025) পর্যন্ত চলবে।

ডেমো

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

প্রতিক্রিয়া

ফাইল সিস্টেম অবজারভার API-এর আকৃতি সম্পর্কে আপনার মতামত থাকলে, WHATWG/fs সংগ্রহস্থলে ইস্যু #123- এ মন্তব্য করুন।

স্বীকৃতি

এই নথিটি Daseul Lee , Nathan Memmott , Etienne Noël , এবং Rachel Andrew দ্বারা পর্যালোচনা করা হয়েছে।

,

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

ফাইল সিস্টেম অবজারভার API, Chrome 129 থেকে অরিজিন ট্রায়ালে, এটি পরিবর্তন করে, এবং পরিবর্তনগুলি ঘটলে বিকাশকারীদের স্বয়ংক্রিয়ভাবে সতর্ক হতে দেয়। এই নির্দেশিকাটি ব্যাখ্যা করে যে এটি কীভাবে কাজ করে এবং কীভাবে বৈশিষ্ট্যটি চেষ্টা করতে হয়।

কেস ব্যবহার করুন

ফাইল সিস্টেম অবজারভার এপিআই ব্যবহার করুন অ্যাপগুলিতে যেগুলি ফাইল সিস্টেমের সম্ভাব্য পরিবর্তনগুলি হওয়ার সাথে সাথেই তাদের জানাতে হবে।

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

কিভাবে ফাইল সিস্টেম অবজারভার API ব্যবহার করবেন

বৈশিষ্ট্য সনাক্তকরণ

ফাইল সিস্টেম অবজারভার API সমর্থিত কিনা তা দেখতে, নিম্নলিখিত উদাহরণের মতো একটি বৈশিষ্ট্য পরীক্ষা চালান।

if ('FileSystemObserver' in self) {
  // The File System Observer API is supported.
}

একটি ফাইল সিস্টেম পর্যবেক্ষক শুরু করুন

new FileSystemObserver() কল করে একটি ফাইল সিস্টেম পর্যবেক্ষক শুরু করুন, এটি একটি আর্গুমেন্ট হিসাবে একটি callback ফাংশন প্রদান করুন।

const observer = new FileSystemObserver(callback);

একটি ফাইল বা ডিরেক্টরি পর্যবেক্ষণ শুরু করুন

একটি ফাইল বা ডিরেক্টরি পর্যবেক্ষণ শুরু করতে, FileSystemObserver ইনস্ট্যান্সের অ্যাসিঙ্ক্রোনাস observe() পদ্ধতিতে কল করুন। এই পদ্ধতিটি একটি আর্গুমেন্ট হিসাবে নির্বাচিত ফাইল বা ডিরেক্টরির FileSystemHandle প্রদান করুন। একটি ডিরেক্টরি পর্যবেক্ষণ করার সময়, একটি ঐচ্ছিক options আর্গুমেন্ট রয়েছে যা আপনাকে নির্বাচন করতে দেয় যে আপনি যদি ডিরেক্টরির পরিবর্তনগুলিকে পুনরাবৃত্তভাবে অবহিত করতে চান (অর্থাৎ, ডিরেক্টরির জন্য এবং সমস্ত সাবডিরেক্টরি এবং ফাইল রয়েছে)। ডিফল্ট বিকল্প হল শুধুমাত্র ডিরেক্টরি নিজেই এবং সরাসরি থাকা ফাইলগুলি পর্যবেক্ষণ করা।

// Observe a file.
await observer.observe(fileHandle);
// Observe a directory.
await observer.observe(directoryHandle);
// Observe a directory recursively.
await observer.observe(directoryHandle, {recursive: true});

কলব্যাক ফাংশন

ফাইল সিস্টেমে পরিবর্তন ঘটলে, একটি কলব্যাক ফাংশন ফাইল সিস্টেম পরিবর্তন records এবং observer নিজেই এর আর্গুমেন্ট সহ কল ​​করা হয়। আপনি observer যুক্তি ব্যবহার করতে পারেন, উদাহরণস্বরূপ, পর্যবেক্ষককে সংযোগ বিচ্ছিন্ন করতে ( ফাইল সিস্টেম পর্যবেক্ষণ বন্ধ করুন দেখুন) যখন আপনার আগ্রহের ফাইলগুলি মুছে ফেলা হয়।

const callback = (records, observer) => {
  for (const record of records) {
    console.log('Change detected', record);
  }
};

ফাইল সিস্টেম পরিবর্তন রেকর্ড

প্রতিটি ফাইল সিস্টেম পরিবর্তন রেকর্ড নিম্নলিখিত কাঠামো আছে. সমস্ত ক্ষেত্র শুধুমাত্র পঠনযোগ্য।

  • root (একটি FileSystemHandle ): হ্যান্ডেলটি FileSystemObserver.observe() ফাংশনে পাস করা হয়েছে।
  • changedHandle (একটি FileSystemHandle ): ফাইল সিস্টেম পরিবর্তন দ্বারা প্রভাবিত হ্যান্ডেল। এই ক্ষেত্রটি "errored" , "unknown" এবং "disappeared" ধরনের ইভেন্টের জন্য null হবে। কোন ফাইল বা ডিরেক্টরি অদৃশ্য হয়ে গেছে তা দেখতে, relativePathComponents ব্যবহার করুন।
  • relativePathComponents (একটি Array ): root সাথে সম্পর্কিত changedHandle হ্যান্ডেলের পথ।
  • type (a String ): পরিবর্তনের ধরন। নিম্নলিখিত ধরনের সম্ভব:
    • "appeared" : ফাইল বা ডিরেক্টরি তৈরি করা হয়েছে বা root সরানো হয়েছে।
    • "disappeared" : ফাইল বা ডিরেক্টরি মুছে ফেলা হয়েছে বা root থেকে সরানো হয়েছে।
    • "modified" : ফাইল বা ডিরেক্টরি পরিবর্তন করা হয়েছে।
    • "moved" : ফাইল বা ডিরেক্টরিটি root মধ্যে সরানো হয়েছে।
    • "unknown" : এটি নির্দেশ করে যে শূন্য বা তার বেশি ঘটনা মিস করা হয়েছে। এর প্রতিক্রিয়া হিসেবে ডেভেলপারদের প্রেক্ষিত ডিরেক্টরিতে পোল করা উচিত।
    • "errored" : পর্যবেক্ষণটি আর বৈধ নয়। এই ক্ষেত্রে, আপনি ফাইল সিস্টেম পর্যবেক্ষণ বন্ধ করতে চাইতে পারেন। প্রতি-অরিজিন পর্যবেক্ষণের সর্বোচ্চ সীমা পৌঁছে গেলেও এই মানটি পাঠানো হবে। এই সীমা অপারেটিং সিস্টেমের উপর নির্ভরশীল এবং আগে থেকে জানা নেই। যদি এটি ঘটে, তবে সাইটটি পুনরায় চেষ্টা করার সিদ্ধান্ত নিতে পারে, যদিও অপারেটিং সিস্টেমটি যথেষ্ট সম্পদ খালি করেছে এমন কোন গ্যারান্টি নেই। এই মানটি কখন পাঠানো হবে তার আরেকটি ক্ষেত্রে যখন পর্যবেক্ষণ করা হ্যান্ডেল (অর্থাৎ, পর্যবেক্ষণের মূল) মুছে ফেলা হয় বা সরানো হয়। এই ক্ষেত্রে, প্রথমে "disappeared" ইভেন্ট পাঠানো হয়, তারপরে একটি "errored" ইভেন্ট পাঠানো হয়, যা নির্দেশ করে যে পর্যবেক্ষণটি আর বৈধ নয়। অবশেষে, এই ইভেন্টটি পাঠানো হয় যখন ডিরেক্টরি বা ফাইল হ্যান্ডেলের অনুমতি সরানো হয়।
  • relativePathMovedFrom (একটি Array , ঐচ্ছিক): একটি সরানো হ্যান্ডেলের পূর্ববর্তী অবস্থান। type "moved" হলেই উপলভ্য।

একটি ফাইল বা ডিরেক্টরি পর্যবেক্ষণ বন্ধ করুন

একটি FileSystemHandle পর্যবেক্ষণ করা বন্ধ করতে, unobserve() পদ্ধতিতে কল করুন, এটিকে একটি আর্গুমেন্ট হিসাবে হ্যান্ডেল পাস করুন।

observer.unobserve(fileHandle);

ফাইল সিস্টেম পর্যবেক্ষণ করা বন্ধ করুন

ফাইল সিস্টেম পর্যবেক্ষণ করা বন্ধ করতে, নিচের মত FileSystemObserver উদাহরণটি সংযোগ বিচ্ছিন্ন করুন।

observer.disconnect();

API ব্যবহার করে দেখুন

স্থানীয়ভাবে ফাইল সিস্টেম অবজারভার API পরীক্ষা করতে, #file-system-observer পতাকা about:flags এ সেট করুন। আসল ব্যবহারকারীদের সাথে API পরীক্ষা করতে, অরিজিন ট্রায়ালের জন্য সাইন আপ করুন এবং গাইড Chrome অরিজিন ট্রায়াল অনুযায়ী নির্দেশাবলী অনুসরণ করুন। অরিজিন ট্রায়াল Chrome 129 (সেপ্টেম্বর 11, 2024) থেকে Chrome 134 (ফেব্রুয়ারি 26, 2025) পর্যন্ত চলবে।

ডেমো

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

প্রতিক্রিয়া

ফাইল সিস্টেম অবজারভার API-এর আকৃতি সম্পর্কে আপনার মতামত থাকলে, WHATWG/fs সংগ্রহস্থলে ইস্যু #123- এ মন্তব্য করুন।

স্বীকৃতি

এই নথিটি Daseul Lee , Nathan Memmott , Etienne Noël , এবং Rachel Andrew দ্বারা পর্যালোচনা করা হয়েছে।