ഫ്രണ്ട്എൻഡ് ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ: ബ്രൗസറിലെ ലോക്കൽ ഫയൽ മാനേജ്മെന്റ്

ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ (മുമ്പ് നേറ്റീവ് ഫയൽ സിസ്റ്റം എപിഐ അല്ലെങ്കിൽ ഫയൽ സിസ്റ്റം എപിഐ എന്ന് അറിയപ്പെട്ടിരുന്നു) വെബ് ആപ്ലിക്കേഷനുകളെ ഉപയോക്താവിൻ്റെ ലോക്കൽ ഫയൽ സിസ്റ്റത്തിലെ ഫയലുകളുമായും ഡയറക്ടറികളുമായും ബ്രൗസറിൽ നിന്ന് നേരിട്ട് സംവദിക്കാൻ അനുവദിക്കുന്ന ഒരു ശക്തമായ വെബ് എപിഐകളുടെ കൂട്ടമാണ്. ഇത് വെബ് അധിഷ്ഠിത ആപ്ലിക്കേഷനുകൾക്ക് പുതിയ സാധ്യതകൾ തുറക്കുന്നു, മുമ്പ് നേറ്റീവ് ആപ്ലിക്കേഷനുകളിൽ മാത്രം ഒതുങ്ങിയിരുന്ന ജോലികൾ ചെയ്യാൻ അവയെ പ്രാപ്തരാക്കുന്നു.

എന്താണ് ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ?

ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ, വെബ് ആപ്ലിക്കേഷനുകൾക്ക് ഉപയോക്താക്കളുടെ ലോക്കൽ ഫയൽ സിസ്റ്റത്തിലേക്ക് ആക്‌സസ് നൽകാനുള്ള ഒരു മാർഗ്ഗം നൽകുന്നു. പഴയ ഫയൽ അപ്‌ലോഡ്/ഡൗൺലോഡ് രീതികളിൽ നിന്ന് വ്യത്യസ്തമായി, ഈ എപിഐ ഉപയോക്താവിൻ്റെ വ്യക്തമായ അനുമതിയോടെ ഫയലുകളും ഡയറക്ടറികളും നേരിട്ട് വായിക്കാനും എഴുതാനും കൈകാര്യം ചെയ്യാനും ആപ്ലിക്കേഷനുകളെ അനുവദിക്കുന്നു. ഇത് കൂടുതൽ സുഗമവും സംയോജിതവുമായ അനുഭവം നൽകുന്നു, പ്രത്യേകിച്ചും വലിയ അളവിലുള്ള ലോക്കൽ ഡാറ്റ കൈകാര്യം ചെയ്യുന്നതോ സ്ഥിരമായ സ്റ്റോറേജ് ആവശ്യമുള്ളതോ ആയ ആപ്ലിക്കേഷനുകൾക്ക്.

ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐയുടെ പ്രധാന സവിശേഷതകൾ ഇവയാണ്:

• ഉപയോക്താവ് നൽകുന്ന അനുമതികൾ: ഉപയോക്താവ് അഭ്യർത്ഥനയ്ക്ക് വ്യക്തമായി അംഗീകാരം നൽകിയതിന് ശേഷം മാത്രമേ ഫയൽ സിസ്റ്റത്തിലേക്കുള്ള ആക്‌സസ് അനുവദിക്കൂ, ഇത് ഉപയോക്താവിൻ്റെ സ്വകാര്യതയും സുരക്ഷയും ഉറപ്പാക്കുന്നു.
• സ്ഥിരമായ സ്റ്റോറേജ്: വെബ് ആപ്ലിക്കേഷനുകൾക്ക് സ്ഥിരമായ സ്റ്റോറേജിനായി അഭ്യർത്ഥിക്കാം, ബ്രൗസർ അടയ്ക്കുകയോ റീഫ്രഷ് ചെയ്യുകയോ ചെയ്താലും ഫയലുകളിലേക്കും ഡയറക്ടറികളിലേക്കും ആക്‌സസ് നിലനിർത്താൻ ഇത് സഹായിക്കുന്നു.
• അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ: എപിഐ പ്രധാനമായും അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ ഉപയോഗിക്കുന്നു, ഇത് ഫയൽ സിസ്റ്റം ഇടപെടലുകൾക്കിടയിൽ യൂസർ ഇൻ്റർഫേസ് (UI) നിശ്ചലമാകുന്നത് തടയുന്നു.
• സ്ട്രീം അടിസ്ഥാനമാക്കിയുള്ള ആക്‌സസ്: സ്ട്രീമുകൾക്കുള്ള പിന്തുണ, മുഴുവൻ ഫയലും മെമ്മറിയിലേക്ക് ലോഡ് ചെയ്യാതെ തന്നെ വലിയ ഫയലുകൾ കാര്യക്ഷമമായി കൈകാര്യം ചെയ്യാൻ സഹായിക്കുന്നു.
• ഡയറക്‌ടറി ആക്‌സസ്: ആപ്ലിക്കേഷനുകൾക്ക് മുഴുവൻ ഡയറക്ടറികളിലേക്കും ആക്‌സസ് അഭ്യർത്ഥിക്കാം, ഇത് ഒന്നിലധികം ഫയലുകളും ഫോൾഡറുകളും കൈകാര്യം ചെയ്യാൻ അവരെ പ്രാപ്തരാക്കുന്നു.
• ഒറിജിൻ പ്രൈവറ്റ് ഫയൽ സിസ്റ്റം (OPFS): വെബ്സൈറ്റ് ഒറിജിന് മാത്രമുള്ള, ഫയൽ സിസ്റ്റത്തിൻ്റെ ഒരു പ്രത്യേക ഇൻസുലേറ്റഡ് ഭാഗം, ഇത് പ്രത്യേക ഉപയോഗങ്ങൾക്കായി മെച്ചപ്പെട്ട പ്രകടനവും സുരക്ഷയും നൽകുന്നു.

ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐയുടെ ഉപയോഗങ്ങൾ

ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ വെബ് ആപ്ലിക്കേഷനുകൾക്ക് നിരവധി സാധ്യതകൾ തുറന്നു നൽകുന്നു. ചില സാധാരണ ഉപയോഗങ്ങൾ താഴെ നൽകുന്നു:

1. ലോക്കൽ ഫയൽ എഡിറ്ററുകളും ഐഡിഇകളും (IDEs)

വെബ് അധിഷ്ഠിത കോഡ് എഡിറ്ററുകൾ, ടെക്സ്റ്റ് എഡിറ്ററുകൾ, ഐഡിഇകൾ എന്നിവയ്ക്ക് ഉപയോക്താവിൻ്റെ ലോക്കൽ ഫയൽ സിസ്റ്റത്തിലെ ഫയലുകൾ നേരിട്ട് തുറക്കാനും എഡിറ്റ് ചെയ്യാനും സേവ് ചെയ്യാനും ഈ എപിഐ ഉപയോഗിക്കാം. പരമ്പരാഗത ഫയൽ അപ്‌ലോഡ്/ഡൗൺലോഡ് രീതികളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഇത് കൂടുതൽ സ്വാഭാവികമായ അനുഭവം നൽകുന്നു. വെബ് അധിഷ്ഠിത ഐഡിഇ ആയ വിഎസ് കോഡ് (VS Code) നിങ്ങളുടെ ലോക്കലായി സംഭരിച്ചിരിക്കുന്ന പ്രോജക്റ്റ് ഫയലുകൾ നേരിട്ട് എഡിറ്റ് ചെയ്യുന്നത് സങ്കൽപ്പിക്കുക.

2. ഇമേജ്, വീഡിയോ എഡിറ്റിംഗ് ടൂളുകൾ

ഉപയോക്താവിൻ്റെ ഉപകരണത്തിൽ സംഭരിച്ചിരിക്കുന്ന വലിയ മീഡിയ ഫയലുകൾ കാര്യക്ഷമമായി പ്രോസസ്സ് ചെയ്യാൻ ഇമേജ്, വീഡിയോ എഡിറ്റിംഗ് ആപ്ലിക്കേഷനുകൾക്ക് ഈ എപിഐ ഉപയോഗിക്കാം. സ്ട്രീം അടിസ്ഥാനമാക്കിയുള്ള ആക്‌സസ്, മുഴുവൻ ഉള്ളടക്കവും മെമ്മറിയിലേക്ക് ലോഡ് ചെയ്യാതെ തന്നെ ഫയലുകൾ എഡിറ്റ് ചെയ്യാൻ അനുവദിക്കുന്നു, ഇത് പ്രകടനം മെച്ചപ്പെടുത്തുകയും മെമ്മറി ഉപഭോഗം കുറയ്ക്കുകയും ചെയ്യുന്നു. ഉദാഹരണത്തിന്, ഒരു ഓൺലൈൻ ഫോട്ടോ എഡിറ്ററിന് നിങ്ങളുടെ കമ്പ്യൂട്ടറിൽ നിന്ന് ചിത്രങ്ങൾ അപ്‌ലോഡ് ചെയ്യാതെ തന്നെ നേരിട്ട് തുറക്കാനും സേവ് ചെയ്യാനും കഴിയും.

3. ഡോക്യുമെൻ്റ് മാനേജ്മെൻ്റ് സിസ്റ്റങ്ങൾ

വെബ് അധിഷ്ഠിത ഡോക്യുമെൻ്റ് മാനേജ്മെൻ്റ് സിസ്റ്റങ്ങൾക്ക് ഉപയോക്താവിൻ്റെ ലോക്കൽ ഫയൽ സിസ്റ്റവുമായി തടസ്സമില്ലാത്ത സംയോജനം നൽകാൻ കഴിയും, ഇത് ബ്രൗസറിൽ നിന്ന് നേരിട്ട് അവരുടെ ഡോക്യുമെൻ്റുകൾ എളുപ്പത്തിൽ ആക്‌സസ് ചെയ്യാനും ഓർഗനൈസ് ചെയ്യാനും കൈകാര്യം ചെയ്യാനും അവരെ അനുവദിക്കുന്നു. ഒരു ക്ലൗഡ് സ്റ്റോറേജ് സേവനം അവരുടെ വെബ് ഇൻ്റർഫേസിൽ ലോക്കൽ ഡോക്യുമെൻ്റുകൾ നേരിട്ട് തുറക്കാനും എഡിറ്റ് ചെയ്യാനും നിങ്ങളെ അനുവദിക്കുന്നത് സങ്കൽപ്പിക്കുക.

4. ഗെയിം ഡെവലപ്‌മെൻ്റ്

ഗെയിം ഡെവലപ്പർമാർക്ക് ഗെയിം അസറ്റുകൾ സംഭരിക്കാനും, ഗെയിം പുരോഗതി സേവ് ചെയ്യാനും, ഉപയോക്താവിൻ്റെ ഫയൽ സിസ്റ്റത്തിൽ നിന്ന് നേരിട്ട് കസ്റ്റം ഉള്ളടക്കം ലോഡ് ചെയ്യാനും ഈ എപിഐ ഉപയോഗിക്കാം. ഇത് വെബിൽ കൂടുതൽ സമ്പന്നവും ആഴത്തിലുള്ളതുമായ ഗെയിമിംഗ് അനുഭവങ്ങൾ സാധ്യമാക്കുന്നു. നിങ്ങളുടെ പുരോഗതി നേരിട്ട് കമ്പ്യൂട്ടറിലേക്ക് സേവ് ചെയ്യുന്ന ഒരു വെബ് അധിഷ്ഠിത ഗെയിം സങ്കൽപ്പിക്കുക.

5. ഓഫ്‌ലൈൻ ആപ്ലിക്കേഷനുകൾ

ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ, സർവീസ് വർക്കറുകൾ പോലുള്ള മറ്റ് സാങ്കേതികവിദ്യകളുമായി ചേർന്ന്, ഉപയോക്താവ് ഇൻ്റർനെറ്റുമായി ബന്ധിപ്പിക്കാത്തപ്പോഴും പ്രവർത്തിക്കാൻ കഴിയുന്ന ഓഫ്‌ലൈൻ-ശേഷിയുള്ള വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ സഹായിക്കുന്നു. എപിഐ ഉപയോഗിച്ച് ഡാറ്റ ലോക്കലായി സംഭരിക്കാനും കണക്റ്റിവിറ്റി പുനഃസ്ഥാപിക്കുമ്പോൾ ഒരു റിമോട്ട് സെർവറുമായി സിൻക്രൊണൈസ് ചെയ്യാനും കഴിയും. ഓൺലൈൻ, ഓഫ്‌ലൈൻ സാഹചര്യങ്ങളിൽ ഒരുപോലെ പ്രവർത്തിക്കേണ്ട പ്രൊഡക്ടിവിറ്റി ആപ്പുകൾക്ക് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. ഉദാഹരണത്തിന്, ഒരു നോട്ട്-ടേക്കിംഗ് ആപ്പ് നോട്ടുകൾ ലോക്കലായി സംഭരിക്കുകയും കണക്ഷൻ ലഭ്യമാകുമ്പോൾ അവയെ ക്ലൗഡിലേക്ക് സിങ്ക് ചെയ്യുകയും ചെയ്തേക്കാം.

6. ഡാറ്റാ പ്രോസസ്സിംഗും വിശകലനവും

ലോക്കലായി സംഭരിച്ചിരിക്കുന്ന വലിയ ഡാറ്റാസെറ്റുകൾ പ്രോസസ്സ് ചെയ്യാനും വിശകലനം ചെയ്യാനും വെബ് ആപ്ലിക്കേഷനുകൾക്ക് ഈ എപിഐ പ്രയോജനപ്പെടുത്താം. ശാസ്ത്രീയ ഗവേഷണം, ഡാറ്റാ വിശകലനം, മറ്റ് വലിയ അളവിലുള്ള ഡാറ്റ പ്രോസസ്സ് ചെയ്യേണ്ട ആപ്ലിക്കേഷനുകൾ എന്നിവയ്ക്ക് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. നിങ്ങളുടെ ഹാർഡ് ഡ്രൈവിൽ നിന്നുള്ള ഒരു CSV ഫയൽ നേരിട്ട് പ്രോസസ്സ് ചെയ്യുന്ന ഒരു വെബ് അധിഷ്ഠിത ഡാറ്റാ വിഷ്വലൈസേഷൻ ടൂൾ സങ്കൽപ്പിക്കുക.

ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ എങ്ങനെ ഉപയോഗിക്കാം

ഫയൽ സിസ്റ്റവുമായി സംവദിക്കുന്നതിന് ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ നിരവധി ഫംഗ്ഷനുകൾ നൽകുന്നു. ചില പ്രധാന സവിശേഷതകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്നതിൻ്റെ ഒരു അടിസ്ഥാന അവലോകനം ഇതാ:

1. ഫയൽ സിസ്റ്റം ആക്‌സസ് അഭ്യർത്ഥിക്കുന്നു

ആദ്യ ഘട്ടം ഉപയോക്താവിൽ നിന്ന് ഫയൽ സിസ്റ്റത്തിലേക്കുള്ള ആക്‌സസ് അഭ്യർത്ഥിക്കുക എന്നതാണ്. ഇത് സാധാരണയായി showOpenFilePicker() അല്ലെങ്കിൽ showSaveFilePicker() മെത്തേഡുകൾ ഉപയോഗിച്ചാണ് ചെയ്യുന്നത്.

showOpenFilePicker()

showOpenFilePicker() മെത്തേഡ് ഒന്നോ അതിലധികമോ ഫയലുകൾ തിരഞ്ഞെടുക്കാൻ ഉപയോക്താവിനോട് ആവശ്യപ്പെടുന്നു. ഇത് തിരഞ്ഞെടുത്ത ഫയലുകളെ പ്രതിനിധീകരിക്കുന്ന FileSystemFileHandle ഒബ്ജക്റ്റുകളുടെ ഒരു അറേയുമായി റിസോൾവ് ചെയ്യുന്ന ഒരു പ്രോമിസ് (promise) നൽകുന്നു.

            
async function openFile() {
  try {
    const [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    const contents = await file.text();
    console.log(contents);
  } catch (err) {
    console.error(err.name, err.message);
  }
}

            

              
                Copy
              
            
          

ഉദാഹരണത്തിൻ്റെ വിശദീകരണം:

• `async function openFile() { ... }`: ഫയൽ തുറക്കുന്ന പ്രക്രിയ കൈകാര്യം ചെയ്യുന്നതിനായി ഒരു അസിൻക്രണസ് ഫംഗ്ഷൻ നിർവചിക്കുന്നു.
• `const [fileHandle] = await window.showOpenFilePicker();`: ഒരു ഫയൽ തിരഞ്ഞെടുക്കൽ ഡയലോഗ് പ്രദർശിപ്പിക്കുന്നതിന് `showOpenFilePicker()` ഉപയോഗിക്കുന്നു. ഉപയോക്താവ് ഒരു ഫയൽ തിരഞ്ഞെടുക്കുന്നത് വരെ (അല്ലെങ്കിൽ പ്രവർത്തനം റദ്ദാക്കുന്നത് വരെ) `await` കീവേഡ് പ്രവർത്തനം താൽക്കാലികമായി നിർത്തുന്നു. ഫലം `FileSystemFileHandle` ഒബ്ജക്റ്റുകൾ അടങ്ങിയ ഒരു അറേ ആണ്; നമ്മൾ അതിലെ ആദ്യത്തെ ഘടകത്തെ `fileHandle` വേരിയബിളിലേക്ക് ഡീസ്ട്രക്ചർ ചെയ്യുന്നു.
• `const file = await fileHandle.getFile();`: `FileSystemFileHandle`-ൽ നിന്ന് ഒരു `File` ഒബ്ജക്റ്റ് വീണ്ടെടുക്കുന്നു. ഈ `File` ഒബ്ജക്റ്റ് ഫയലിൻ്റെ ഗുണങ്ങളിലേക്കും ഉള്ളടക്കത്തിലേക്കും ആക്‌സസ് നൽകുന്നു.
• `const contents = await file.text();`: `text()` മെത്തേഡ് ഉപയോഗിച്ച് ഫയലിൻ്റെ മുഴുവൻ ഉള്ളടക്കവും ഒരു ടെക്സ്റ്റ് സ്ട്രിംഗായി വായിക്കുന്നു. ഫയൽ വായിക്കുന്ന പ്രവർത്തനം പൂർത്തിയാകുന്നതുവരെ `await` കീവേഡ് കാത്തിരിക്കുന്നു.
• `console.log(contents);`: ഫയലിൻ്റെ ഉള്ളടക്കം കൺസോളിൽ ലോഗ് ചെയ്യുന്നു.
• `} catch (err) { ... }`: ഫയൽ തുറക്കുന്നതിനോ വായിക്കുന്നതിനോ ഇടയിൽ സംഭവിക്കാനിടയുള്ള ഏതെങ്കിലും പിശകുകൾ കണ്ടെത്തുന്നു. ഡീബഗ്ഗിംഗിനായി ഇത് പിശകിൻ്റെ പേരും സന്ദേശവും കൺസോളിൽ ലോഗ് ചെയ്യുന്നു. ഉപയോക്താവ് ഫയൽ തിരഞ്ഞെടുക്കൽ റദ്ദാക്കുക, ഫയൽ ആക്‌സസ് ചെയ്യാൻ കഴിയാതെ വരിക, അല്ലെങ്കിൽ ഫയലിൻ്റെ ഉള്ളടക്കം വായിക്കുന്നതിൽ പ്രശ്നങ്ങളുണ്ടാവുക തുടങ്ങിയ സാഹചര്യങ്ങൾ കൈകാര്യം ചെയ്യാൻ ഇത് അത്യന്താപേക്ഷിതമാണ്.

showSaveFilePicker()

showSaveFilePicker() മെത്തേഡ് ഒരു ഫയൽ സേവ് ചെയ്യാനുള്ള സ്ഥലം തിരഞ്ഞെടുക്കാൻ ഉപയോക്താവിനോട് ആവശ്യപ്പെടുന്നു. ഇത് തിരഞ്ഞെടുത്ത ഫയലിനെ പ്രതിനിധീകരിക്കുന്ന ഒരു FileSystemFileHandle ഒബ്ജക്റ്റുമായി റിസോൾവ് ചെയ്യുന്ന ഒരു പ്രോമിസ് നൽകുന്നു.

            
async function saveFile(data) {
  try {
    const fileHandle = await window.showSaveFilePicker({
      suggestedName: 'my-file.txt',
      types: [{
        description: 'Text files',
        accept: {
          'text/plain': ['.txt'],
        },
      }],
    });
    const writable = await fileHandle.createWritable();
    await writable.write(data);
    await writable.close();
  } catch (err) {
    console.error(err.name, err.message);
  }
}

            

              
                Copy
              
            
          

ഉദാഹരണത്തിൻ്റെ വിശദീകരണം:

• `async function saveFile(data) { ... }`: `data` (സേവ് ചെയ്യേണ്ട ഉള്ളടക്കം) ഒരു ആർഗ്യുമെൻ്റായി എടുക്കുന്ന `saveFile` എന്ന ഒരു അസിൻക്രണസ് ഫംഗ്ഷൻ നിർവചിക്കുന്നു.
• `const fileHandle = await window.showSaveFilePicker({ ... });`: ഒരു സേവ് ഡയലോഗ് പ്രദർശിപ്പിക്കുന്നതിന് `showSaveFilePicker()` വിളിക്കുന്നു. ഉപയോക്താവിൻ്റെ പ്രതികരണത്തിനായി ഫംഗ്ഷൻ കാത്തിരിക്കുന്നുവെന്ന് `await` കീവേഡ് ഉറപ്പാക്കുന്നു. * `suggestedName: 'my-file.txt'` ഒരു ഡിഫോൾട്ട് ഫയൽനാമം നിർദ്ദേശിക്കുന്നു. * `types: [...]` ഫയൽ ടൈപ്പ് ഫിൽട്ടറുകൾ വ്യക്തമാക്കുന്നു: * `description: 'Text files'` ഫയൽ ടൈപ്പിന് ഉപയോക്താവിന് മനസ്സിലാകുന്ന ഒരു വിവരണം നൽകുന്നു. * `accept: { 'text/plain': ['.txt'] }` ഡയലോഗ് `text/plain` എന്ന മൈം ടൈപ്പുള്ള `.txt` ഫയലുകൾക്കായി ഫിൽട്ടർ ചെയ്യണമെന്ന് സൂചിപ്പിക്കുന്നു.
• `const writable = await fileHandle.createWritable();`: ഫയൽ ഹാൻഡിലുമായി ബന്ധപ്പെട്ട ഒരു `FileSystemWritableFileStream` സൃഷ്ടിക്കുന്നു. ഈ സ്ട്രീം ഫയലിലേക്ക് ഡാറ്റ എഴുതാൻ അനുവദിക്കുന്നു.
• `await writable.write(data);`: `data` (സേവ് ചെയ്യേണ്ട ഉള്ളടക്കം) റൈറ്റബിൾ സ്ട്രീമിലേക്ക് എഴുതുന്നു.
• `await writable.close();`: റൈറ്റബിൾ സ്ട്രീം അടയ്ക്കുന്നു, എല്ലാ ഡാറ്റയും ഫയലിലേക്ക് എഴുതിയെന്നും ഫയൽ ശരിയായി അന്തിമമാക്കിയെന്നും ഉറപ്പാക്കുന്നു.
• `} catch (err) { ... }`: സേവ് പ്രക്രിയയിൽ ഉണ്ടാകാനിടയുള്ള പിശകുകൾ കണ്ടെത്താനും ലോഗ് ചെയ്യാനും പിശക് കൈകാര്യം ചെയ്യൽ ഉൾപ്പെടുത്തിയിരിക്കുന്നു.

2. ഫയൽ ഉള്ളടക്കം വായിക്കുന്നു

നിങ്ങൾക്ക് ഒരു FileSystemFileHandle ഒബ്ജക്റ്റ് ലഭിച്ചുകഴിഞ്ഞാൽ, getFile() മെത്തേഡ് ഉപയോഗിച്ച് ഫയലിൻ്റെ ഉള്ളടക്കം ആക്‌സസ് ചെയ്യാൻ കഴിയും. ഇത് ഒരു File ഒബ്ജക്റ്റ് നൽകുന്നു, ഇത് ഫയലിൻ്റെ ഉള്ളടക്കം ടെക്സ്റ്റ്, ബൈനറി ഡാറ്റ, അല്ലെങ്കിൽ ഒരു സ്ട്രീം ആയി വായിക്കുന്നതിനുള്ള മെത്തേഡുകൾ നൽകുന്നു.

            
async function readFileContents(fileHandle) {
  const file = await fileHandle.getFile();
  const contents = await file.text();
  return contents;
}

            

              
                Copy
              
            
          

3. ഫയലുകളിലേക്ക് എഴുതുന്നു

ഒരു ഫയലിലേക്ക് എഴുതാൻ, നിങ്ങൾ FileSystemFileHandle ഒബ്ജക്റ്റിൻ്റെ createWritable() മെത്തേഡ് ഉപയോഗിച്ച് ഒരു FileSystemWritableFileStream ഒബ്ജക്റ്റ് സൃഷ്ടിക്കേണ്ടതുണ്ട്. തുടർന്ന് നിങ്ങൾക്ക് സ്ട്രീമിലേക്ക് ഡാറ്റ എഴുതാൻ write() മെത്തേഡും, സ്ട്രീം അടച്ച് മാറ്റങ്ങൾ സേവ് ചെയ്യാൻ close() മെത്തേഡും ഉപയോഗിക്കാം.

            
async function writeFileContents(fileHandle, data) {
  const writable = await fileHandle.createWritable();
  await writable.write(data);
  await writable.close();
}

            

              
                Copy
              
            
          

4. ഡയറക്ടറികൾ ആക്‌സസ് ചെയ്യുന്നു

ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ ഡയറക്ടറികളിലേക്ക് ആക്‌സസ് അഭ്യർത്ഥിക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് showDirectoryPicker() മെത്തേഡ് ഉപയോഗിച്ചാണ് ചെയ്യുന്നത്.

            
async function openDirectory() {
  try {
    const directoryHandle = await window.showDirectoryPicker();
    console.log('directoryHandle', directoryHandle);
    // Now you can interact with the directoryHandle to list files, create new files, etc.
  } catch (err) {
    console.error(err.name, err.message);
  }
}

            

              
                Copy
              
            
          

നിങ്ങൾക്ക് ഒരു FileSystemDirectoryHandle ഒബ്ജക്റ്റ് ലഭിച്ചുകഴിഞ്ഞാൽ, ഡയറക്ടറി ഘടനയിലൂടെ നാവിഗേറ്റ് ചെയ്യാനും ഫയലുകളും സബ്ഡയറക്ടറികളും ആക്‌സസ് ചെയ്യാനും നിങ്ങൾക്ക് entries(), getFileHandle(), getDirectoryHandle() പോലുള്ള മെത്തേഡുകൾ ഉപയോഗിക്കാം.

5. ഒറിജിൻ പ്രൈവറ്റ് ഫയൽ സിസ്റ്റം (OPFS)

ഒറിജിൻ പ്രൈവറ്റ് ഫയൽ സിസ്റ്റം (OPFS) വെബ് ആപ്ലിക്കേഷൻ്റെ ഒറിജിനുമായി ഒറ്റപ്പെട്ട, ഫയൽ സിസ്റ്റത്തിൻ്റെ ഒരു പ്രത്യേക സാൻഡ്‌ബോക്‌സ് ചെയ്ത ഭാഗമാണ്. OPFS-നുള്ളിലെ ഫയലുകൾ ആക്‌സസ് ചെയ്യുന്നത് പ്രകടനത്തിനായി ഒപ്റ്റിമൈസ് ചെയ്തിരിക്കുന്നു. ഇത് എങ്ങനെ ആക്‌സസ് ചെയ്യാമെന്ന് താഴെക്കൊടുക്കുന്നു:

            
async function accessOPFS() {
  try {
    const root = await navigator.storage.getDirectory();
    console.log('OPFS root directory handle:', root);

    // Create a file in the OPFS
    const fileHandle = await root.getFileHandle('my-opfs-file.txt', { create: true });
    const writable = await fileHandle.createWritable();
    await writable.write('This is data in the OPFS!');
    await writable.close();

    // Read the file back
    const file = await fileHandle.getFile();
    const contents = await file.text();
    console.log('Contents from OPFS file:', contents);
  } catch (err) {
    console.error('Error accessing OPFS:', err);
  }
}

accessOPFS();

            

              
                Copy
              
            
          

വിശദീകരണം:

• `navigator.storage.getDirectory()`: OPFS-നുള്ള റൂട്ട് ഡയറക്ടറി ഹാൻഡിൽ വീണ്ടെടുക്കുന്നു. ഒറിജിൻ്റെ പ്രൈവറ്റ് ഫയൽ സിസ്റ്റത്തിനുള്ളിലെ ഫയലുകൾ ആക്‌സസ് ചെയ്യുന്നതിനുള്ള എൻട്രി പോയിൻ്റാണിത്.
• `root.getFileHandle('my-opfs-file.txt', { create: true })`: 'my-opfs-file.txt' എന്ന് പേരുള്ള ഫയലിനായി ഒരു ഫയൽ ഹാൻഡിൽ വീണ്ടെടുക്കുന്നു. `{ create: true }` എന്ന ഓപ്ഷൻ ഫയൽ നിലവിലില്ലെങ്കിൽ അത് സൃഷ്ടിക്കുമെന്ന് ഉറപ്പാക്കുന്നു.
• ബാക്കിയുള്ള കോഡ്, മുമ്പത്തെ ഉദാഹരണങ്ങൾക്ക് സമാനമായി, ഫയലിലേക്ക് ഡാറ്റ എഴുതുന്നതും തുടർന്ന് അത് തിരികെ വായിക്കുന്നതും കാണിക്കുന്നു.

സുരക്ഷാ പരിഗണനകൾ

ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ, ഡെവലപ്പർമാർ അറിഞ്ഞിരിക്കേണ്ട പുതിയ സുരക്ഷാ പരിഗണനകൾ അവതരിപ്പിക്കുന്നു:

• ഉപയോക്തൃ അനുമതികൾ: എപ്പോഴും ആവശ്യമായ അനുമതികൾ മാത്രം അഭ്യർത്ഥിക്കുക, നിങ്ങളുടെ ആപ്ലിക്കേഷന് അവരുടെ ഫയൽ സിസ്റ്റത്തിലേക്ക് എന്തിന് ആക്‌സസ് ആവശ്യമാണെന്ന് ഉപയോക്താവിനോട് വ്യക്തമായി വിശദീകരിക്കുക.
• ഇൻപുട്ട് മൂല്യനിർണ്ണയം: ക്രോസ്-സൈറ്റ് സ്ക്രിപ്റ്റിംഗ് (XSS) അല്ലെങ്കിൽ കോഡ് ഇഞ്ചക്ഷൻ പോലുള്ള സുരക്ഷാ പാളിച്ചകൾ തടയുന്നതിന് ഫയലുകളിൽ നിന്ന് വായിക്കുന്ന ഏത് ഡാറ്റയും സാനിറ്റൈസ് ചെയ്യുകയും സാധൂകരിക്കുകയും ചെയ്യുക.
• പാത്ത് ട്രാവേഴ്സൽ: ഉദ്ദേശിച്ച ഡയറക്ടറിക്ക് പുറത്തുള്ള ഫയലുകളിലേക്ക് ഒരു ആക്രമണകാരിക്ക് ആക്‌സസ് നേടാൻ കഴിയുന്ന പാത്ത് ട്രാവേഴ്സൽ ആക്രമണങ്ങൾ തടയുന്നതിന് ഫയൽ പാതകൾ നിർമ്മിക്കുമ്പോൾ ശ്രദ്ധിക്കുക.
• ഡാറ്റാ സെൻസിറ്റിവിറ്റി: നിങ്ങൾ കൈകാര്യം ചെയ്യുന്ന ഡാറ്റയുടെ സെൻസിറ്റിവിറ്റിയെക്കുറിച്ച് ശ്രദ്ധാലുവായിരിക്കുക, എൻക്രിപ്ഷൻ, ആക്‌സസ് കൺട്രോളുകൾ പോലുള്ള ഉചിതമായ നടപടികൾ സ്വീകരിച്ച് അതിനെ സംരക്ഷിക്കുക.
• സെൻസിറ്റീവ് ഡാറ്റ സംഭരിക്കുന്നത് ഒഴിവാക്കുക: സാധ്യമെങ്കിൽ, ഉപയോക്താവിൻ്റെ ഫയൽ സിസ്റ്റത്തിൽ സെൻസിറ്റീവ് വിവരങ്ങൾ സംഭരിക്കുന്നത് ഒഴിവാക്കുക. ബ്രൗസറിൻ്റെ സാൻഡ്‌ബോക്‌സിനുള്ളിൽ ഡാറ്റ സംഭരിക്കുന്നതിന് ബ്രൗസർ സ്റ്റോറേജ് എപിഐകൾ (IndexedDB പോലുള്ളവ) ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

ബ്രൗസർ അനുയോജ്യത

ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐക്കുള്ള ബ്രൗസർ പിന്തുണ ഇപ്പോഴും വികസിച്ചുകൊണ്ടിരിക്കുകയാണ്. മിക്ക ആധുനിക ബ്രൗസറുകളും എപിഐയുടെ പ്രധാന സവിശേഷതകളെ പിന്തുണയ്ക്കുന്നുണ്ടെങ്കിലും, ചില സവിശേഷതകൾ പരീക്ഷണാത്മകമോ പ്രത്യേക ഫ്ലാഗുകൾ പ്രവർത്തനക്ഷമമാക്കേണ്ടതോ ആകാം. പ്രൊഡക്ഷനിൽ എപിഐ ഉപയോഗിക്കുന്നതിന് മുമ്പ് എല്ലായ്പ്പോഴും ഏറ്റവും പുതിയ ബ്രൗസർ അനുയോജ്യത വിവരങ്ങൾ പരിശോധിക്കുക. കാലികമായ അനുയോജ്യത വിശദാംശങ്ങൾക്കായി നിങ്ങൾക്ക് MDN വെബ് ഡോക്സ് പോലുള്ള ഉറവിടങ്ങൾ പരിശോധിക്കാം.

പോളിഫില്ലുകളും ഫാൾബാക്കുകളും

ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ പൂർണ്ണമായി പിന്തുണയ്ക്കാത്ത ബ്രൗസറുകൾക്ക്, കൂടുതൽ മികച്ച അനുഭവം നൽകുന്നതിന് നിങ്ങൾക്ക് പോളിഫില്ലുകളോ ഫാൾബാക്കുകളോ ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, showOpenFilePicker() അല്ലെങ്കിൽ showSaveFilePicker() മെത്തേഡുകളെ പിന്തുണയ്ക്കാത്ത ബ്രൗസറുകൾക്ക് ഒരു ഫാൾബാക്ക് ആയി നിങ്ങൾക്ക് ഒരു പരമ്പരാഗത ഫയൽ അപ്‌ലോഡ്/ഡൗൺലോഡ് രീതി ഉപയോഗിക്കാം. നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ക്രമേണ മെച്ചപ്പെടുത്തുന്നതും പരിഗണിക്കുക. എപിഐ ഇല്ലാതെ പ്രധാന പ്രവർത്തനം നൽകുക, തുടർന്ന് അതിനെ പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകൾക്കായി അനുഭവം മെച്ചപ്പെടുത്തുക.

ഉദാഹരണം: ഒരു ലളിതമായ ടെക്സ്റ്റ് എഡിറ്റർ നിർമ്മിക്കുന്നു

ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ ഉപയോഗിച്ച് ഒരു അടിസ്ഥാന ടെക്സ്റ്റ് എഡിറ്റർ എങ്ങനെ നിർമ്മിക്കാം എന്നതിൻ്റെ ഒരു ലളിതമായ ഉദാഹരണം ഇതാ:

            
<textarea id="editor" style="width: 100%; height: 300px;"></textarea>
<button id="openBtn">Open File</button>
<button id="saveBtn">Save File</button>

            

              
                Copy
              
            
          

            
const editor = document.getElementById('editor');
const openBtn = document.getElementById('openBtn');
const saveBtn = document.getElementById('saveBtn');

let fileHandle;

openBtn.addEventListener('click', async () => {
  try {
    [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    editor.value = await file.text();
  } catch (err) {
    console.error(err.name, err.message);
  }
});

saveBtn.addEventListener('click', async () => {
  try {
    if (!fileHandle) {
      fileHandle = await window.showSaveFilePicker();
    }
    const writable = await fileHandle.createWritable();
    await writable.write(editor.value);
    await writable.close();
  } catch (err) {
    console.error(err.name, err.message);
  }
});

            

              
                Copy
              
            
          

ഈ ഉദാഹരണം ഒരു ഫയൽ എങ്ങനെ തുറക്കാമെന്നും, അതിൻ്റെ ഉള്ളടക്കം ഒരു ടെക്സ്റ്റ് ഏരിയയിൽ പ്രദർശിപ്പിക്കാമെന്നും, മാറ്റങ്ങൾ ഫയലിലേക്ക് തിരികെ സേവ് ചെയ്യാമെന്നും കാണിക്കുന്നു. ഇത് വളരെ അടിസ്ഥാനപരമായ ഒരു ഉദാഹരണമാണ്, ഒരു യഥാർത്ഥ ആപ്ലിക്കേഷനായി അധിക പിശക് കൈകാര്യം ചെയ്യലും സവിശേഷതകളും ആവശ്യമായി വരും.

ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച രീതികൾ

• പ്രോഗ്രസ്സീവ് എൻഹാൻസ്മെൻ്റ്: ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ ഇല്ലാതെ പോലും പ്രവർത്തിക്കാൻ നിങ്ങളുടെ ആപ്ലിക്കേഷൻ രൂപകൽപ്പന ചെയ്യുക. ലഭ്യമാകുമ്പോൾ ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്താൻ എപിഐ ഉപയോഗിക്കുക.
• വ്യക്തമായ വിശദീകരണങ്ങൾ നൽകുക: നിങ്ങളുടെ ആപ്ലിക്കേഷന് അവരുടെ ഫയൽ സിസ്റ്റത്തിലേക്ക് എന്തിന് ആക്‌സസ് ആവശ്യമാണെന്നും ഫയലുകൾ ഉപയോഗിച്ച് നിങ്ങൾ എന്തുചെയ്യാൻ ഉദ്ദേശിക്കുന്നുവെന്നും ഉപയോക്താവിനോട് വ്യക്തമായി വിശദീകരിക്കുക.
• പിശകുകൾ ഭംഗിയായി കൈകാര്യം ചെയ്യുക: ഉപയോക്താവ് അനുമതി നിഷേധിക്കുക, ഫയൽ കണ്ടെത്താനാകാതെ വരിക, അല്ലെങ്കിൽ മറ്റ് പിശകുകൾ ഉണ്ടാകുക തുടങ്ങിയ സാഹചര്യങ്ങൾ ഭംഗിയായി കൈകാര്യം ചെയ്യുന്നതിന് ശക്തമായ പിശക് കൈകാര്യം ചെയ്യൽ നടപ്പിലാക്കുക.
• അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ ഉപയോഗിക്കുക: ഫയൽ സിസ്റ്റം ഇടപെടലുകൾക്കിടയിൽ UI നിശ്ചലമാകുന്നത് തടയാൻ എപ്പോഴും അസിൻക്രണസ് പ്രവർത്തനങ്ങൾ ഉപയോഗിക്കുക.
• പ്രകടനത്തിനായി ഒപ്റ്റിമൈസ് ചെയ്യുക: പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിനും മെമ്മറി ഉപഭോഗം കുറയ്ക്കുന്നതിനും വലിയ ഫയലുകൾക്കായി സ്ട്രീം അടിസ്ഥാനമാക്കിയുള്ള ആക്‌സസ് ഉപയോഗിക്കുക.
• ഉപയോക്തൃ സ്വകാര്യതയെ മാനിക്കുക: ഉപയോക്തൃ സ്വകാര്യതയെക്കുറിച്ച് ശ്രദ്ധാലുവായിരിക്കുക, നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പ്രവർത്തിക്കാൻ ആവശ്യമായ ഫയലുകളും ഡയറക്ടറികളും മാത്രം ആക്‌സസ് ചെയ്യുക.
• സമഗ്രമായി പരിശോധിക്കുക: അനുയോജ്യതയും സ്ഥിരതയും ഉറപ്പാക്കാൻ നിങ്ങളുടെ ആപ്ലിക്കേഷൻ വിവിധ ബ്രൗസറുകളിലും ഓപ്പറേറ്റിംഗ് സിസ്റ്റങ്ങളിലും സമഗ്രമായി പരിശോധിക്കുക.
• ഒറിജിൻ പ്രൈവറ്റ് ഫയൽ സിസ്റ്റം (OPFS) പരിഗണിക്കുക: പ്രകടന-നിർണ്ണായകമായ പ്രവർത്തനങ്ങൾക്ക്, പ്രത്യേകിച്ച് വലിയ ഫയലുകൾ ഉൾപ്പെടുന്നവയ്ക്ക്, OPFS ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക.

ഉപസംഹാരം

മെച്ചപ്പെട്ട ഫയൽ സിസ്റ്റം കഴിവുകളുള്ള വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ ഫ്രണ്ട്എൻഡ് ഡെവലപ്പർമാരെ ശാക്തീകരിക്കുന്ന ഒരു ശക്തമായ ഉപകരണമാണ് ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ. ഉപയോക്താക്കൾക്ക് അവരുടെ ലോക്കൽ ഫയലുകളിലേക്കും ഡയറക്ടറികളിലേക്കും വെബ് ആപ്ലിക്കേഷനുകൾക്ക് ആക്‌സസ് നൽകാൻ അനുവദിക്കുന്നതിലൂടെ, ഈ എപിഐ വെബ് അധിഷ്ഠിത പ്രൊഡക്ടിവിറ്റി ടൂളുകൾക്കും ക്രിയേറ്റീവ് ആപ്ലിക്കേഷനുകൾക്കും അതിലേറെ കാര്യങ്ങൾക്കും പുതിയ സാധ്യതകൾ തുറക്കുന്നു. ബ്രൗസർ പിന്തുണ ഇപ്പോഴും വികസിച്ചുകൊണ്ടിരിക്കുകയാണെങ്കിലും, വെബ് ഡെവലപ്‌മെൻ്റിൻ്റെ പരിണാമത്തിലെ ഒരു സുപ്രധാന ചുവടുവെപ്പാണ് ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ. ബ്രൗസർ പിന്തുണ മെച്ചപ്പെടുകയും ഡെവലപ്പർമാർക്ക് എപിഐയിൽ കൂടുതൽ അനുഭവം ലഭിക്കുകയും ചെയ്യുന്നതിനനുസരിച്ച്, അതിൻ്റെ കഴിവുകൾ പ്രയോജനപ്പെടുത്തുന്ന കൂടുതൽ നൂതനവും ആകർഷകവുമായ വെബ് ആപ്ലിക്കേഷനുകൾ നമുക്ക് പ്രതീക്ഷിക്കാം.

ഫയൽ സിസ്റ്റം ആക്‌സസ് എപിഐ ഉപയോഗിക്കുമ്പോൾ എപ്പോഴും ഉപയോക്തൃ സുരക്ഷയ്ക്കും സ്വകാര്യതയ്ക്കും മുൻഗണന നൽകാൻ ഓർമ്മിക്കുക. മികച്ച രീതികൾ പിന്തുടരുകയും സുരക്ഷാ പ്രത്യാഘാതങ്ങൾ ശ്രദ്ധാപൂർവ്വം പരിഗണിക്കുകയും ചെയ്യുന്നതിലൂടെ, നിങ്ങൾക്ക് ശക്തവും സുരക്ഷിതവുമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ കഴിയും.