Paikallisen tiedostojärjestelmän hyödyntäminen: Syväsukellus File System Access API -rajapintaan

Selain on ollut vuosikymmenien ajan hiekkalaatikkoympäristö, turvallinen mutta pohjimmiltaan rajoitettu tila. Yksi sen tiukimmista rajoista on ollut paikallinen tiedostojärjestelmä. Verkkosovellukset saattoivat pyytää sinua lataamaan tiedoston palvelimelle tai kehottaa sinua lataamaan sellaisen, mutta ajatus verkkopohjaisesta tekstieditorista, joka avaa tiedoston, antaa sinun muokata sitä ja tallentaa sen takaisin täsmälleen samaan paikkaan, oli pelkkää tieteiskirjallisuutta. Tämä rajoitus on ollut ensisijainen syy siihen, miksi natiivit työpöytäsovellukset ovat säilyttäneet etulyöntiasemansa intensiivistä tiedostonkäsittelyä vaativissa tehtävissä, kuten videoeditoinnissa, ohjelmistokehityksessä ja graafisessa suunnittelussa.

Tämä toimintamalli on nyt muuttumassa. File System Access API, aiemmalta nimeltään Native File System API, murentaa tämän pitkäaikaisen esteen. Se tarjoaa verkkokehittäjille standardoidun, turvallisen ja tehokkaan mekanismin tiedostojen ja hakemistojen lukemiseen, kirjoittamiseen ja hallintaan käyttäjän paikallisella koneella. Tämä ei ole tietoturva-aukko; se on huolellisesti suunniteltu evoluutio, joka antaa käyttäjälle täyden hallinnan nimenomaisten lupien kautta.

Tämä API on seuraavan sukupolven progressiivisten verkkosovellusten (PWA) kulmakivi, antaen niille valmiuksia, jotka olivat aiemmin yksinomaan natiiviohjelmistojen etuoikeus. Kuvittele verkkopohjainen IDE, joka voi hallita paikallista projektikansiota, kuvankäsittelyohjelma, joka työskentelee suoraan korkearesoluutioisilla kuvillasi ilman latauksia, tai muistiinpanosovellus, joka tallentaa markdown-tiedostoja suoraan dokumenttikansioosi. Tämän tulevaisuuden File System Access API mahdollistaa.

Tässä kattavassa oppaassa tutkimme tämän mullistavan API:n jokaista osa-aluetta. Perehdymme sen historiaan, ymmärrämme sen keskeiset turvallisuusperiaatteet, käymme läpi käytännön koodiesimerkkejä lukemisesta, kirjoittamisesta ja hakemistojen hallinnasta sekä keskustelemme edistyneistä tekniikoista ja todellisista käyttötapauksista, jotka inspiroivat seuraavaa projektiasi.

Tiedostojenkäsittelyn evoluutio verkossa

Jotta File System Access API:n merkityksen voi todella ymmärtää, on hyödyllistä tarkastella, miten selaimet ovat historiallisesti käsitelleet paikallisia tiedostoja. Matka on ollut asteittainen, tietoturvatietoinen kehitys.

Klassinen lähestymistapa: Input-elementit ja ankkurit

Alkuperäiset tiedostojen käsittelymenetelmät olivat yksinkertaisia ja tiukasti valvottuja:

• Tiedostojen lukeminen: <input type="file">-elementti on ollut tiedostojen lähettämisen työjuhta vuosia. Kun käyttäjä valitsee tiedoston (tai useita tiedostoja multiple-attribuutilla), sovellus saa FileList-olion. Kehittäjät voivat sitten käyttää FileReader-APIa lukeakseen näiden tiedostojen sisällön muistiin merkkijonona, ArrayBufferina tai data-URL:na. Sovellus ei kuitenkaan koskaan saa tietää tiedoston alkuperäistä polkua eikä voi kirjoittaa takaisin siihen. Jokainen 'tallenna'-toiminto on todellisuudessa 'lataus'.
• Tiedostojen tallentaminen: Tallentaminen oli vielä epäsuorempaa. Yleinen tekniikka sisältää <a> (ankkuri) -tagin luomisen, sen href-attribuutin asettamisen data-URI:ksi tai Blob-URL:ksi, download-attribuutin lisäämisen ehdotetulla tiedostonimellä ja sen ohjelmallisen napsauttamisen. Tämä toimenpide avaa käyttäjälle 'Tallenna nimellä...' -valintaikkunan, joka yleensä oletuksena avautuu 'Lataukset'-kansioon. Käyttäjän on navigoitava manuaalisesti oikeaan paikkaan, jos hän haluaa korvata olemassa olevan tiedoston.

Vanhojen menetelmien rajoitukset

Vaikka tämä klassinen malli oli toimiva, se asetti merkittäviä rajoituksia kehittyneiden sovellusten rakentamiselle:

• Tilaton vuorovaikutus: Yhteys tiedostoon katoaa heti sen lukemisen jälkeen. Jos käyttäjä muokkaa asiakirjaa ja haluaa tallentaa sen, sovellus ei voi yksinkertaisesti korvata alkuperäistä. Hänen on ladattava uusi kopio, usein muokatulla nimellä (esim. 'dokumentti(1).txt'), mikä johtaa tiedostosotkuun ja hämmentävään käyttäjäkokemukseen.
• Ei pääsyä hakemistoihin: Kansion käsitettä ei ollut olemassa. Sovellus ei voinut pyytää käyttäjää avaamaan koko projektihakemistoa sen sisällön käsittelemiseksi, mikä on perusvaatimus mille tahansa verkkopohjaiselle IDE:lle tai koodieditorille.
• Käyttäjän kitka: Jatkuva 'Avaa...' -> 'Muokkaa' -> 'Tallenna nimellä...' -> 'Navigoi...' -> 'Korvataanko?' -sykli on kömpelö ja tehoton verrattuna natiivisovellusten yksinkertaiseen 'Ctrl + S' tai 'Cmd + S' -kokemukseen.

Nämä rajoitukset pakottivat verkkosovellukset olemaan vain väliaikaisten tiedostojen kuluttajia ja luojia, eivätkä käyttäjän paikallisen datan pysyviä muokkaajia. File System Access API suunniteltiin suoraan korjaamaan nämä puutteet.

Esittelyssä File System Access API

File System Access API on moderni verkkostandardi, joka tarjoaa suoran, vaikkakin lupien takana olevan, sillan käyttäjän paikalliseen tiedostojärjestelmään. Se mahdollistaa kehittäjille rikkaiden, työpöytäsovellusten kaltaisten kokemusten rakentamisen, joissa tiedostoja ja hakemistoja kohdellaan ensisijaisina kansalaisina.

Ydinkäsitteet ja terminologia

API:n ymmärtäminen alkaa sen avainolioista, jotka toimivat kahvoina tai viittauksina tiedostojärjestelmän kohteisiin.

• FileSystemHandle: Tämä on perusrajapinta sekä tiedostoille että hakemistoille. Se edustaa yhtä kohdetta tiedostojärjestelmässä ja sillä on ominaisuuksia, kuten name ja kind ('file' tai 'directory').
• FileSystemFileHandle: Tämä rajapinta edustaa tiedostoa. Se periytyy FileSystemHandle-rajapinnasta ja tarjoaa metodeja tiedoston sisällön käsittelyyn, kuten getFile(), jolla saa standardin File-olion (metadatan tai sisällön lukemiseen), ja createWritable(), jolla saa virran datan kirjoittamista varten.
• FileSystemDirectoryHandle: Tämä edustaa hakemistoa. Se mahdollistaa hakemiston sisällön listaamisen tai kahvojen hankkimisen tiettyihin tiedostoihin tai alihakemistoihin sen sisällä käyttämällä metodeja, kuten getFileHandle() ja getDirectoryHandle(). Se tarjoaa myös asynkronisia iteraattoreita sen sisältämien kohteiden läpikäymiseen.
• FileSystemWritableFileStream: Tämä on tehokas virtapohjainen rajapinta datan kirjoittamiseen tiedostoon. Sen avulla voit kirjoittaa merkkijonoja, Blob-objekteja tai puskureita tehokkaasti ja se tarjoaa metodeja tiettyyn kohtaan siirtymiseen tai tiedoston katkaisemiseen. Sinun on kutsuttava sen close()-metodia varmistaaksesi, että muutokset kirjoitetaan levylle.

Turvallisuusmalli: Käyttäjäkeskeinen ja turvallinen

Verkkosivustolle suoran pääsyn myöntäminen tiedostojärjestelmääsi on merkittävä turvallisuusnäkökohta. Tämän API:n suunnittelijat ovat rakentaneet vankan, lupiin perustuvan turvallisuusmallin, joka priorisoi käyttäjän suostumuksen ja hallinnan.

1. Käyttäjän käynnistämät toiminnot: Sovellus ei voi spontaanisti käynnistää tiedostonvalitsinta. Pääsy on aloitettava suoralla käyttäjän eleellä, kuten painikkeen napsautuksella. Tämä estää haitallisia skriptejä hiljaa skannaamasta tiedostojärjestelmääsi.
2. Valitsin on portti: API:n sisäänpääsypisteitä ovat valitsinmetodit: window.showOpenFilePicker(), window.showSaveFilePicker() ja window.showDirectoryPicker(). Nämä metodit näyttävät selaimen natiivin tiedoston/hakemiston valintakäyttöliittymän. Käyttäjän valinta on nimenomainen luvan myöntäminen kyseiselle kohteelle.
3. Lupakyselyt: Kun kahva on hankittu, selain voi pyytää käyttäjältä 'luku'- tai 'luku-kirjoitus'-oikeuksia kyseiselle kahvalle. Käyttäjän on hyväksyttävä tämä kehote, ennen kuin sovellus voi jatkaa.
4. Lupien pysyvyys: Paremman käyttäjäkokemuksen vuoksi selaimet voivat säilyttää nämä luvat tietylle alkuperälle (verkkosivustolle). Tämä tarkoittaa, että kun käyttäjä on kerran myöntänyt pääsyn tiedostoon, häneltä ei kysytä lupaa uudelleen saman istunnon aikana tai edes myöhemmillä käyntikerroilla. Luvan tilaa voidaan tarkistaa handle.queryPermission()-metodilla ja pyytää uudelleen handle.requestPermission()-metodilla. Käyttäjät voivat peruuttaa nämä luvat milloin tahansa selaimensa asetusten kautta.
5. Vain suojatuissa konteksteissa: Kuten monet modernit web-APIt, File System Access API on käytettävissä vain suojatuissa konteksteissa, mikä tarkoittaa, että verkkosivustosi on tarjottava HTTPS-yhteyden kautta tai localhostista.

Tämä monikerroksinen lähestymistapa varmistaa, että käyttäjä on aina tietoinen ja hallitsee tilannetta, luoden tasapainon uusien tehokkaiden ominaisuuksien ja horjumattoman turvallisuuden välille.

Käytännön toteutus: Vaiheittainen opas

Siirrytään teoriasta käytäntöön. Näin voit aloittaa File System Access API:n käytön verkkosovelluksissasi. Kaikki API-metodit ovat asynkronisia ja palauttavat Promise-lupauksia, joten käytämme modernia async/await-syntaksia selkeämmän koodin aikaansaamiseksi.

Selaintuen tarkistaminen

Ennen API:n käyttöä sinun on tarkistettava, tukeeko käyttäjän selain sitä. Yksinkertainen ominaisuuksien tunnistustarkistus riittää.

            
if ('showOpenFilePicker' in window) {
  console.log('Hienoa! File System Access API on tuettu.');
} else {
  console.log('Valitettavasti tämä selain ei tue APIa.');
  // Tarjoa vararatkaisu <input type="file"> -elementillä
}

            

              
                Copy
              
            
          

Tiedoston lukeminen

Paikallisen tiedoston lukeminen on yleinen lähtökohta. Prosessi sisältää tiedostonvalitsimen näyttämisen, tiedostokahvan hankkimisen ja sen sisällön lukemisen.

            
const openFileButton = document.getElementById('open-file-btn');

openFileButton.addEventListener('click', async () => {
  try {
    // showOpenFilePicker()-metodi palauttaa taulukon kahvoja, 
    // mutta tässä esimerkissä olemme kiinnostuneita vain ensimmäisestä.
    const [fileHandle] = await window.showOpenFilePicker();

    // Hae File-olio kahvasta.
    const file = await fileHandle.getFile();

    // Lue tiedoston sisältö tekstinä.
    const content = await file.text();

    // Käytä sisältöä (esim. näytä se textarea-elementissä).
    document.getElementById('editor').value = content;

  } catch (err) {
    // Käsittele virheet, kuten käyttäjän peruuttaessa valitsimen.
    console.error('Virhe tiedostoa avattaessa:', err);
  }
});

            

              
                Copy
              
            
          

Tässä esimerkissä window.showOpenFilePicker() palauttaa lupauksen, joka ratkeaa taulukolla FileSystemFileHandle-olioita. Puramme ensimmäisen elementin fileHandle-muuttujaamme. Siitä eteenpäin fileHandle.getFile() tarjoaa standardin File-olion, jolla on tuttuja metodeja kuten .text(), .arrayBuffer() ja .stream().

Tiedostoon kirjoittaminen

Kirjoittaminen on osa-alue, jossa API todella loistaa, sillä se mahdollistaa sekä uusien tiedostojen tallentamisen että olemassa olevien saumattoman ylikirjoittamisen.

Muutosten tallentaminen olemassa olevaan tiedostoon

Laajennetaan edellistä esimerkkiämme. Meidän on tallennettava fileHandle, jotta voimme käyttää sitä myöhemmin muutosten tallentamiseen.

            
let currentFileHandle;

// ... 'openFileButton'-klikkikuuntelijan sisällä ...
// Saatuasi kahvan showOpenFilePickeristä:
currentFileHandle = fileHandle; 

// --- Määritä nyt tallennuspainike ---

const saveFileButton = document.getElementById('save-file-btn');

saveFileButton.addEventListener('click', async () => {
  if (!currentFileHandle) {
    alert('Avaa ensin tiedosto!');
    return;
  }

  try {
    // Luo FileSystemWritableFileStream, johon kirjoitetaan.
    const writable = await currentFileHandle.createWritable();

    // Hae sisältö editoristamme.
    const content = document.getElementById('editor').value;

    // Kirjoita sisältö virtaan.
    await writable.write(content);

    // Sulje tiedosto ja kirjoita sisältö levylle.
    // Tämä on ratkaiseva vaihe!
    await writable.close();

    alert('Tiedosto tallennettu onnistuneesti!');

  } catch (err) {
    console.error('Virhe tiedostoa tallennettaessa:', err);
  }
});

            

              
                Copy
              
            
          

Avainvaiheet ovat createWritable(), joka valmistelee tiedoston kirjoitusta varten, write(), joka lähettää datan, ja kriittinen close(), joka viimeistelee operaation ja sitoo muutokset levylle.

Uuden tiedoston tallentaminen ('Tallenna nimellä')

Uuden tiedoston tallentamiseksi käytetään window.showSaveFilePicker()-metodia. Tämä näyttää 'Tallenna nimellä' -valintaikkunan ja palauttaa uuden FileSystemFileHandle-kahvan valittuun sijaintiin.

            
const saveAsButton = document.getElementById('save-as-btn');

saveAsButton.addEventListener('click', async () => {
  try {
    const newFileHandle = await window.showSaveFilePicker({
      suggestedName: 'nimetön.txt',
      types: [{
        description: 'Tekstitiedostot',
        accept: {
          'text/plain': ['.txt'],
        },
      }],
    });

    // Nyt kun meillä on kahva, voimme käyttää samaa kirjoituslogiikkaa kuin aiemmin.
    const writable = await newFileHandle.createWritable();
    const content = document.getElementById('editor').value;
    await writable.write(content);
    await writable.close();

    // Valinnaisesti päivitä nykyinen kahvamme tähän uuteen tiedostoon.
    currentFileHandle = newFileHandle;

    alert('Tiedosto tallennettu uuteen sijaintiin!');

  } catch (err) {
    console.error('Virhe uutta tiedostoa tallennettaessa:', err);
  }
});

            

              
                Copy
              
            
          

Hakemistojen kanssa työskentely

Kyky työskennellä kokonaisten hakemistojen kanssa avaa tehokkaita käyttökohteita, kuten verkkopohjaisia IDE-ympäristöjä.

Ensin annamme käyttäjän valita hakemiston:

            
const openDirButton = document.getElementById('open-dir-btn');

openDirButton.addEventListener('click', async () => {
  try {
    const dirHandle = await window.showDirectoryPicker();
    
    // Nyt voimme käsitellä hakemiston sisältöä.
    await processDirectory(dirHandle);

  } catch (err) {
    console.error('Virhe hakemistoa avattaessa:', err);
  }
});

            

              
                Copy
              
            
          

Kun sinulla on FileSystemDirectoryHandle, voit iteroida sen sisällön läpi käyttämällä asynkronista for...of-silmukkaa. Seuraava funktio listaa rekursiivisesti kaikki tiedostot ja alihakemistot.

            
async function processDirectory(dirHandle) {
  const fileListElement = document.getElementById('file-list');
  fileListElement.innerHTML = ''; // Tyhjennä edellinen lista

  for await (const entry of dirHandle.values()) {
    const listItem = document.createElement('li');
    // 'kind'-ominaisuus on joko 'file' tai 'directory'
    listItem.textContent = `[${entry.kind}] ${entry.name}`;
    fileListElement.appendChild(listItem);

    if (entry.kind === 'directory') {
      // Tämä osoittaa, että yksinkertainen rekursiivinen kutsu on mahdollinen, 
      // vaikka täydellinen käyttöliittymä käsittelisi sisäkkäisyyden eri tavalla.
      console.log(`Löytyi alihakemisto: ${entry.name}`);
    }
  }
}

            

              
                Copy
              
            
          

Uusien tiedostojen ja hakemistojen luominen

Voit myös ohjelmallisesti luoda uusia tiedostoja ja alihakemistoja hakemistoon, johon sinulla on pääsy. Tämä tehdään antamalla { create: true } -optio getFileHandle()- tai getDirectoryHandle()-metodeille.

            
async function createNewFile(dirHandle, fileName) {
  try {
    // Hae kahva uuteen tiedostoon, luoden sen, jos sitä ei ole olemassa.
    const newFileHandle = await dirHandle.getFileHandle(fileName, { create: true });
    console.log(`Luotiin tai haettiin kahva tiedostolle: ${newFileHandle.name}`);
    // Voit nyt kirjoittaa tähän kahvaan.
  } catch (err) {
    console.error('Virhe tiedostoa luotaessa:', err);
  }
}

async function createNewFolder(dirHandle, folderName) {
  try {
    // Hae kahva uuteen hakemistoon, luoden sen, jos sitä ei ole olemassa.
    const newDirHandle = await dirHandle.getDirectoryHandle(folderName, { create: true });
    console.log(`Luotiin tai haettiin kahva hakemistolle: ${newDirHandle.name}`);
  } catch (err) {
    console.error('Virhe hakemistoa luotaessa:', err);
  }
}

            

              
                Copy
              
            
          

Edistyneet konseptit ja käyttötapaukset

Kun olet oppinut perusteet, voit tutustua edistyneempiin ominaisuuksiin rakentaaksesi todella saumattomia käyttäjäkokemuksia.

Pysyvyys IndexedDB:n avulla

Suuri haaste on, että FileSystemHandle-oliot eivät säily, kun käyttäjä päivittää sivun. Tämän ratkaisemiseksi voit tallentaa kahvat IndexedDB:hen, selaimen asiakaspuolen tietokantaan. Tämä antaa sovelluksellesi mahdollisuuden muistaa, mitä tiedostoja ja kansioita käyttäjä käsitteli istuntojen välillä.

Kahvan tallentaminen on yhtä helppoa kuin sen asettaminen IndexedDB-objektisäilöön. Sen noutaminen on yhtä helppoa. Kuitenkin, *luvat* eivät tallennu kahvan mukana. Kun sovelluksesi latautuu uudelleen ja hakee kahvan IndexedDB:stä, sinun on ensin tarkistettava, onko sinulla yhä lupa ja pyydettävä sitä tarvittaessa uudelleen.

            
// Funktio tallennetun kahvan hakemiseksi
async function getHandleFromDB(key) {
  // (Koodi IndexedDB:n avaamiseksi ja kahvan hakemiseksi)
  const handle = await getFromDB(key);

  if (!handle) return null;

  // Tarkista, onko meillä yhä lupa.
  if (await handle.queryPermission({ mode: 'readwrite' }) === 'granted') {
    return handle; // Lupa on jo myönnetty.
  }

  // Jos ei, meidän on pyydettävä lupa uudelleen.
  if (await handle.requestPermission({ mode: 'readwrite' }) === 'granted') {
    return handle; // Käyttäjä myönsi luvan.
  }

  // Lupa evättiin.
  return null;
}

            

              
                Copy
              
            
          

Tämä malli mahdollistaa 'Viimeisimmät tiedostot' tai 'Avaa viimeisin projekti' -ominaisuuden luomisen, joka tuntuu aivan natiivisovellukselta.

Vedä ja pudota -integraatio

API integroituu kauniisti natiivin Drag and Drop API:n kanssa. Käyttäjät voivat vetää tiedostoja tai kansioita työpöydältään ja pudottaa ne verkkosovellukseesi myöntääkseen pääsyn. Tämä saavutetaan DataTransferItem.getAsFileSystemHandle()-metodilla.

            
const dropZone = document.getElementById('drop-zone');

dropZone.addEventListener('dragover', (event) => {
  event.preventDefault(); // Välttämätön pudotuksen sallimiseksi
});

dropZone.addEventListener('drop', async (event) => {
  event.preventDefault();

  for (const item of event.dataTransfer.items) {
    if (item.kind === 'file') {
      const handle = await item.getAsFileSystemHandle();
      if (handle.kind === 'directory') {
        console.log(`Hakemisto pudotettu: ${handle.name}`);
        // Käsittele hakemistokahva
      } else {
        console.log(`Tiedosto pudotettu: ${handle.name}`);
        // Käsittele tiedostokahva
      }
    }
  }
});

            

              
                Copy
              
            
          

Tosielämän sovellukset

Tämän API:n mahdollistamat sovelluskohteet ovat laajat ja palvelevat globaalia yleisöä luovien alojen tekijöistä ammattilaisiin:

• Verkkopohjaiset IDEt ja koodieditorit: Työkalut, kuten VS Code for the Web (vscode.dev), voivat nyt avata paikallisen projektikansion, jolloin kehittäjät voivat muokata, luoda ja hallita koko koodikantaansa suoraan selaimessa.
• Luovat työkalut: Kuva-, video- ja äänieditorit voivat ladata suuria mediatiedostoja suoraan käyttäjän kiintolevyltä, suorittaa monimutkaisia muokkauksia ja tallentaa tuloksen ilman hidasta palvelimelle lataamisen ja sieltä lataamisen prosessia.
• Tuottavuus ja data-analyysi: Liiketoiminnan käyttäjä voisi avata suuren CSV- tai JSON-tiedoston verkkopohjaisessa datan visualisointityökalussa, analysoida dataa ja tallentaa raportteja ilman, että data koskaan poistuu hänen koneeltaan, mikä on erinomaista yksityisyyden ja suorituskyvyn kannalta.
• Pelaaminen: Verkkopohjaiset pelit voisivat antaa käyttäjien hallita tallennettuja pelejä tai asentaa modeja myöntämällä pääsyn tiettyyn pelikansioon.

Huomioitavaa ja parhaat käytännöt

Suuri voima tuo mukanaan suuren vastuun. Tässä on joitakin keskeisiä seikkoja, jotka kehittäjien tulisi ottaa huomioon käyttäessään tätä APIa.

Keskity käyttäjäkokemukseen (UX)

• Selkeys on avainasemassa: Sido API-kutsut aina selkeisiin, nimenomaisiin käyttäjän toimiin, kuten 'Avaa tiedosto' tai 'Tallenna muutokset' -nappeihin. Älä koskaan yllätä käyttäjää tiedostonvalitsimella.
• Anna palautetta: Käytä käyttöliittymäelementtejä kertoaksesi käyttäjälle toimintojen tilasta (esim. 'Tallennetaan...', 'Tiedosto tallennettu onnistuneesti', 'Lupa evätty').
• Sujuvat vararatkaisut: Koska API ei ole vielä yleisesti tuettu, tarjoa aina varamekanismi käyttämällä perinteisiä <input type="file">- ja ankkurilatausmenetelmiä vanhemmille selaimille.

Suorituskyky

API on suunniteltu suorituskykyiseksi. Poistamalla tarpeen palvelinlatauksille sovelluksista voi tulla merkittävästi nopeampia, erityisesti suurten tiedostojen käsittelyssä. Koska kaikki operaatiot ovat asynkronisia, ne eivät tuki selaimen pääsäiettä, pitäen käyttöliittymäsi reagoivana.

Rajoitukset ja selainyhteensopivuus

Suurin huomioitava seikka on selaintuki. Vuoden 2023 loppupuolella API on täysin tuettu Chromium-pohjaisissa selaimissa, kuten Google Chrome, Microsoft Edge ja Opera. Tuki Firefoxissa on kehitteillä lipun takana, eikä Safari ole vielä sitoutunut toteutukseen. Globaalille yleisölle tämä tarkoittaa, että et voi luottaa tähän APIin *ainoana* tapana käsitellä tiedostoja. Tarkista aina luotettavasta lähteestä, kuten CanIUse.com, viimeisimmät yhteensopivuustiedot.

Johtopäätös: Uusi aikakausi verkkosovelluksille

File System Access API edustaa monumentaalista harppausta eteenpäin verkkoympäristölle. Se vastaa suoraan yhteen merkittävimmistä toiminnallisista aukoista verkko- ja natiivisovellusten välillä, antaen kehittäjille voimaa rakentaa uuden luokan tehokkaita, suorituskykyisiä ja käyttäjäystävällisiä työkaluja, jotka toimivat kokonaan selaimessa.

Tarjoamalla turvallisen, käyttäjän hallitseman sillan paikalliseen tiedostojärjestelmään se parantaa sovellusten ominaisuuksia, lisää suorituskykyä vähentämällä riippuvuutta palvelimista ja virtaviivaistaa työnkulkuja käyttäjille ympäri maailmaa. Vaikka meidän on pysyttävä tietoisina selainyhteensopivuudesta ja toteutettava sujuvia vararatkaisuja, tie eteenpäin on selvä. Verkko on kehittymässä sisällön kulutusalustasta kypsäksi luomisalustaksi. Kannustamme sinua tutustumaan File System Access API:hin, kokeilemaan sen ominaisuuksia ja aloittamaan seuraavan sukupolven verkkosovellusten rakentamisen jo tänään.