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): वह हैंडल जिस पर फ़ाइल सिस्टम में हुए बदलाव का असर पड़ा है.
  • relativePathComponents (Array): root के हिसाब से changedHandle का पाथ.
  • type (a String): बदलाव का टाइप. इस तरह के विकल्प उपलब्ध हैं:
    • "appeared": फ़ाइल या डायरेक्ट्री बनाई गई या root में ले जाई गई.
    • "disappeared": फ़ाइल या डायरेक्ट्री को मिटा दिया गया है या root से बाहर ले जाया गया है.
    • "modified": फ़ाइल या डायरेक्ट्री में बदलाव किया गया था.
    • "moved": फ़ाइल या डायरेक्ट्री को root में ले जाया गया था.
    • "unknown": इससे पता चलता है कि शून्य या उससे ज़्यादा इवेंट रिकॉर्ड नहीं किए गए. डेवलपर को इस जवाब के तौर पर, देखे गए वीडियो की डायरेक्ट्री को पोल करना चाहिए.
    • "errored": निगरानी अब मान्य नहीं है. ऐसे में, फ़ाइल सिस्टम को निगरानी करने की सुविधा बंद की जा सकती है.
  • relativePathMovedFrom (Array, ज़रूरी नहीं): किसी हैंडल की पिछली जगह. यह विकल्प सिर्फ़ तब उपलब्ध होता है, जब type की वैल्यू "moved" होती है.

किसी फ़ाइल या डायरेक्ट्री को निगरानी करने की सुविधा बंद करना

किसी FileSystemHandle को निगरानी में रखने की प्रोसेस को बंद करने के लिए, unobserve() तरीके को कॉल करें. साथ ही, उसे आर्ग्युमेंट के तौर पर हैंडल दें.

observer.unobserve(fileHandle);

फ़ाइल सिस्टम को मॉनिटर करना बंद करें

फ़ाइल सिस्टम को निगरानी करने की सुविधा बंद करने के लिए, FileSystemObserver इंस्टेंस को इस तरह से डिसकनेक्ट करें.

observer.disconnect();

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

File System Observer API को स्थानीय तौर पर टेस्ट करने के लिए, 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 पर टिप्पणी करें.

स्वीकार की गई

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