File System Observer एपीआई का ऑरिजिन ट्रायल

Thomas Steiner

फ़ाइल सिस्टम ऐक्सेस एपीआई और ऑरिजिन प्राइवेट फ़ाइल सिस्टम एपीआई, दोनों ही डेवलपर को उपयोगकर्ता के डिवाइस पर मौजूद फ़ाइलों और डायरेक्ट्री को ऐक्सेस करने की अनुमति देते हैं. पहले विकल्प की मदद से, डेवलपर सामान्य और उपयोगकर्ता को दिखने वाले फ़ाइल सिस्टम को पढ़ और उसमें बदलाव कर सकते हैं. वहीं, दूसरे विकल्प की मदद से, उपयोगकर्ता को दिखने वाले फ़ाइल सिस्टम के अलावा, एक खास फ़ाइल सिस्टम भी खोला जा सकता है. यह फ़ाइल सिस्टम, हर साइट के ऑरिजिन के लिए निजी होता है और इससे परफ़ॉर्मेंस से जुड़े कुछ फ़ायदे मिलते हैं. डेवलपर, दोनों ही मामलों में फ़ाइलों और डायरेक्ट्री के साथ FileSystemHandle ऑब्जेक्ट की मदद से इंटरैक्ट करते हैं. खास तौर पर, फ़ाइलों के लिए FileSystemFileHandle और डायरेक्ट्री के लिए FileSystemDirectoryHandle. अब तक, किसी भी फ़ाइल सिस्टम में फ़ाइल या डायरेक्ट्री में हुए बदलावों के बारे में जानकारी पाने के लिए, पोलिंग की ज़रूरत होती थी. साथ ही, lastModified टाइमस्टैंप या फ़ाइल के कॉन्टेंट की तुलना करनी पड़ती थी.

Chrome 129 के ऑरिजिन ट्रायल में, फ़ाइल सिस्टम ऑब्ज़र्वर एपीआई ने इस प्रोसेस में बदलाव किया है. साथ ही, बदलाव होने पर डेवलपर को अपने-आप सूचना देने की सुविधा भी दी है. इस गाइड में बताया गया है कि यह सुविधा कैसे काम करती है और इसे आज़माने का तरीका क्या है.

उपयोग के उदाहरण

File System Observer API का इस्तेमाल उन ऐप्लिकेशन में करें जिन्हें फ़ाइल सिस्टम में होने वाले बदलावों के बारे में तुरंत जानकारी चाहिए.

  • वेब-आधारित इंटिग्रेटेड डेवलपमेंट एनवायरमेंट (आईडीई), जो प्रोजेक्ट के फ़ाइल सिस्टम ट्री को दिखाते हैं.
  • ऐसे ऐप्लिकेशन जो फ़ाइल सिस्टम में हुए बदलावों को सर्वर के साथ सिंक करते हैं. उदाहरण के लिए, SQLite डेटाबेस फ़ाइल.
  • ऐसे ऐप्लिकेशन जिन्हें वर्कर्स या किसी दूसरे टैब से, फ़ाइल सिस्टम में हुए बदलावों की सूचना मुख्य थ्रेड को देनी होती है.
  • ऐसे ऐप्लिकेशन जो रिसॉर्स की डायरेक्ट्री को देखते हैं. उदाहरण के लिए, इमेज को अपने-आप ऑप्टिमाइज़ करने के लिए.
  • ऐसे अनुभव जिनमें हॉट-रिलोड करने से फ़ायदा मिलता है. जैसे, एचटीएमएल पर आधारित स्लाइड डेक, जहां फ़ाइल में बदलाव होने पर रीलोड ट्रिगर होता है.

फ़ाइल सिस्टम ऑब्ज़र्वर एपीआई का इस्तेमाल करने का तरीका

फ़ीचर का पता लगाना

यह देखने के लिए कि File System Observer 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 (a FileSystemHandle): FileSystemObserver.observe() फ़ंक्शन में पास किया गया हैंडल.
  • changedHandle (a 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();

एपीआई आज़माना

फ़ाइल सिस्टम ऑब्ज़र्वर एपीआई को स्थानीय तौर पर टेस्ट करने के लिए, about:flags में #file-system-observer फ़्लैग सेट करें. असल उपयोगकर्ताओं के साथ एपीआई की जांच करने के लिए, ऑरिजिन ट्रायल के लिए साइन अप करें. इसके बाद, Chrome के ऑरिजिन ट्रायल की गाइड में दिए गए निर्देशों का पालन करें. ऑरिजिन ट्रायल, Chrome 129 (11 सितंबर, 2024) से Chrome 134 (26 फ़रवरी, 2025) तक चलेगा.

डेमो

एम्बेड किए गए डेमो में, फ़ाइल सिस्टम ऑब्ज़र्वर एपीआई को काम करते हुए देखा जा सकता है. सोर्स कोड देखें या Glitch पर डेमो कोड को रीमिक्स करें. डेमो, निगरानी में रखी गई डायरेक्ट्री में फ़ाइलें बनाता है, मिटाता है या उनमें बदलाव करता है. साथ ही, ऐप्लिकेशन विंडो के ऊपरी हिस्से में अपनी गतिविधि को लॉग करता है. इसके बाद, ऐप्लिकेशन विंडो के निचले हिस्से में होने वाले बदलावों को लॉग किया जाता है. अगर आपने यह लेख ऐसे ब्राउज़र पर पढ़ा है जो File System Observer API के साथ काम नहीं करता, तो डेमो का स्क्रीनशॉट देखें.

सुझाव/राय दें या शिकायत करें

अगर आपको File System Observer API के बारे में कोई सुझाव/राय देनी है या शिकायत करनी है, तो WHATWG/fs रिपॉज़िटरी में मौजूद समस्या #123 पर टिप्पणी करें.

आभार

इस दस्तावेज़ की समीक्षा दासेल ली, नाथन मेमॉट, एटिएन नोएल, और रेचल एंड्रयू ने की है.