Laat geïnstalleerde webapplicaties bestandsafhandelaars zijn,laat geïnstalleerde webapplicaties bestandsafhandelaars zijn

Registreer een app als bestandsbeheerder bij het besturingssysteem.

Nu webapps bestanden kunnen lezen en schrijven , is de volgende logische stap om ontwikkelaars de mogelijkheid te geven deze webapps aan te wijzen als bestandsverwerkers voor de bestanden die hun apps kunnen aanmaken en verwerken. De File Handling API maakt dit mogelijk. Nadat je een teksteditor-app als bestandsverwerker hebt geregistreerd en geïnstalleerd, kun je op macOS met de rechtermuisknop op een .txt bestand klikken en 'Info ophalen' selecteren om het besturingssysteem te laten weten dat .txt bestanden standaard altijd met deze app moeten worden geopend.

Voorgestelde gebruiksscenario's voor de API voor bestandsverwerking

Voorbeelden van sites die deze API kunnen gebruiken zijn:

  • Kantoorapplicaties zoals tekstverwerkers, spreadsheetprogramma's en programma's voor het maken van presentaties.
  • Grafische editors en tekenprogramma's.
  • Tools voor het bewerken van videogame-levels.

Hoe gebruik je de API voor bestandsverwerking?

Progressieve verbetering

De File Handling API zelf kan niet worden gepolyfilled. De functionaliteit om bestanden te openen met een webapplicatie kan echter op twee andere manieren worden bereikt:

  • Met de Web Share Target API kunnen ontwikkelaars hun app als deeldoel opgeven, zodat bestanden vanuit het deelmenu van het besturingssysteem kunnen worden geopend.
  • De File System Access API kan worden geïntegreerd met het slepen en neerzetten van bestanden, zodat ontwikkelaars neergezette bestanden kunnen verwerken in de reeds geopende app.

Browserondersteuning

Browser Support

  • Chrome: 102.
  • Rand: 102.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Source

Kenmerkdetectie

Om te controleren of de File Handling API wordt ondersteund, gebruikt u:

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  // The File Handling API is supported.
}

Het declaratieve deel van de API voor bestandsverwerking

Als eerste stap moeten webapplicaties in hun manifest declaratief beschrijven welke soorten bestanden ze kunnen verwerken. De File Handling API breidt het manifest uit met een nieuwe eigenschap genaamd "file_handlers" die een array van, jawel, bestandshandlers accepteert. Een bestandshandler is een object met de volgende eigenschappen:

  • Een "action" -eigenschap die als waarde verwijst naar een URL binnen het bereik van de app.
  • Een "accept" -eigenschap met een object van MIME-typen als sleutels en lijsten van bestandsextensies als waarden.
  • Een eigenschap "icons" met een array van ImageResource -pictogrammen. Sommige besturingssystemen staan ​​toe dat een bestandstype-associatie een pictogram weergeeft dat niet alleen het bijbehorende toepassingspictogram is, maar een speciaal pictogram dat verband houdt met het gebruik van dat bestandstype met de toepassing.
  • Een eigenschap "launch_type" die definieert of meerdere bestanden in één client of in meerdere clients moeten worden geopend. De standaardwaarde is "single-client" . Als de gebruiker meerdere bestanden opent en als de bestandshandler is geannoteerd met "multiple-clients" als "launch_type" , zullen er meer dan één applicatiestart plaatsvinden en zal de array LaunchParams.files (zie verderop ) voor elke start slechts één element bevatten.

Het onderstaande voorbeeld, dat alleen het relevante gedeelte van het webapplicatiemanifest toont, zou dit moeten verduidelijken:

{
  "file_handlers": [
    {
      "action": "/open-csv",
      "accept": {
        "text/csv": [".csv"]
      },
      "icons": [
        {
          "src": "csv-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-svg",
      "accept": {
        "image/svg+xml": ".svg"
      },
      "icons": [
        {
          "src": "svg-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-graf",
      "accept": {
        "application/vnd.grafr.graph": [".grafr", ".graf"],
        "application/vnd.alternative-graph-app.graph": ".graph"
      },
      "icons": [
        {
          "src": "graf-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "multiple-clients"
    }
  ]
}

Dit is voor een hypothetische toepassing die bestanden met door komma's gescheiden waarden ( .csv ) verwerkt op /open-csv , schaalbare vectorafbeeldingen ( .svg ) op /open-svg , en een fictief Grafr-bestandsformaat met de extensie .grafr , .graf of .graph op /open-graf . De eerste twee bestanden worden in één client geopend, het laatste bestand in meerdere clients als er meerdere bestanden worden verwerkt.

Het essentiële onderdeel van de API voor bestandsverwerking

Nu de app in theorie heeft aangegeven welke bestanden op welke URL binnen het bereik kunnen worden verwerkt, moet er in de praktijk iets met de binnenkomende bestanden gebeuren. Dit is waar de launchQueue in beeld komt. Om toegang te krijgen tot gestarte bestanden, moet een site een consumer specificeren voor het window.launchQueue -object. Starten worden in de wachtrij geplaatst totdat ze worden verwerkt door de gespecificeerde consumer, die precies één keer per start wordt aangeroepen. Op deze manier wordt elke start verwerkt, ongeacht wanneer de consumer is gespecificeerd.

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  launchQueue.setConsumer((launchParams) => {
    // Nothing to do when the queue is empty.
    if (!launchParams.files.length) {
      return;
    }
    for (const fileHandle of launchParams.files) {
      // Handle the file.
    }
  });
}

DevTools-ondersteuning

Er is op het moment van schrijven geen ondersteuning voor DevTools, maar ik heb een functieverzoek ingediend om deze ondersteuning toe te voegen.

Demo

Ik heb bestandsbeheerfunctionaliteit toegevoegd aan Excalidraw , een tekenprogramma in cartoonstijl. Om het te testen, moet je eerst Excalidraw installeren. Wanneer je vervolgens een bestand aanmaakt en opslaat op je bestandssysteem, kun je het bestand openen door erop te dubbelklikken, of door met de rechtermuisknop te klikken en vervolgens "Excalidraw" te selecteren in het contextmenu. Je kunt de implementatie bekijken in de broncode.

Het Finder-venster van macOS met een Excalidraw-bestand.
Dubbelklik of klik met de rechtermuisknop op een bestand in de bestandsverkenner van uw besturingssysteem.
Het contextmenu dat verschijnt wanneer je met de rechtermuisknop op een bestand klikt terwijl het item 'Openen met…' van Excalidraw is geselecteerd.
Excalidraw is de standaard bestandsverwerker voor .excalidraw -bestanden.

Beveiliging

Het Chrome-team heeft de API voor bestandsverwerking ontworpen en geïmplementeerd op basis van de kernprincipes die zijn vastgelegd in 'Toegang tot krachtige webplatformfuncties beheren' , waaronder gebruikerscontrole, transparantie en ergonomie.

Machtigingen, het behoud van machtigingen en updates van bestandshandlers

Om het vertrouwen van de gebruiker en de veiligheid van hun bestanden te waarborgen, wordt er, wanneer de File Handling API een bestand opent, een toestemmingsprompt weergegeven voordat een PWA het bestand kan bekijken. Deze toestemmingsprompt verschijnt direct nadat de gebruiker de PWA selecteert om een ​​bestand te openen, zodat de toestemming nauw verbonden is met de actie van het openen van een bestand via de PWA, waardoor deze begrijpelijker en relevanter is.

Deze toestemming wordt elke keer weergegeven totdat de gebruiker klikt op 'Bestandsverwerking voor de site toestaan ' of ' Blokkeren' , of de prompt drie keer negeert (waarna Chromium deze toestemming zal blokkeren). De geselecteerde instelling blijft behouden, ook na het sluiten en opnieuw openen van de PWA.

Wanneer er updates in het manifest plaatsvinden en er wijzigingen worden gedetecteerd in de sectie "file_handlers" , worden de machtigingen gereset.

Er bestaat een grote categorie aanvalsvectoren die ontstaan ​​door websites toegang te geven tot bestanden. Deze worden beschreven in het artikel over de File System Access API . De extra, voor de beveiliging relevante, mogelijkheid die de File Handling API biedt ten opzichte van de File System Access API is de mogelijkheid om toegang te verlenen tot bepaalde bestanden via de ingebouwde gebruikersinterface van het besturingssysteem, in plaats van via een bestandsselector die door een webapplicatie wordt weergegeven.

Er bestaat nog steeds een risico dat gebruikers onbedoeld een webapplicatie toegang geven tot een bestand door het te openen. Het is echter algemeen bekend dat het openen van een bestand de applicatie waarmee het wordt geopend, in staat stelt dat bestand te lezen en/of te bewerken. Daarom kan de expliciete keuze van een gebruiker om een ​​bestand te openen in een geïnstalleerde applicatie, bijvoorbeeld via een contextmenu "Openen met...", worden beschouwd als een voldoende teken van vertrouwen in de applicatie.

Standaard handler uitdagingen

De uitzondering hierop is wanneer er geen applicaties op het hostsysteem beschikbaar zijn voor een bepaald bestandstype. In dat geval kunnen sommige hostbesturingssystemen de nieuw geregistreerde handler automatisch en zonder tussenkomst van de gebruiker als standaardhandler voor dat bestandstype instellen. Dit betekent dat als de gebruiker dubbelklikt op een bestand van dat type, het automatisch wordt geopend in de geregistreerde webapplicatie. Op dergelijke hostbesturingssystemen kan, wanneer de user agent vaststelt dat er geen standaardhandler voor het bestandstype bestaat, een expliciete toestemmingsprompt nodig zijn om te voorkomen dat de inhoud van een bestand per ongeluk naar een webapplicatie wordt verzonden zonder toestemming van de gebruiker.

Gebruikersbesturing

De specificatie stelt dat browsers niet elke site die bestanden kan verwerken, als bestandsafhandelaar moeten registreren. In plaats daarvan moet de registratie van bestandsafhandeling pas na installatie plaatsvinden en nooit zonder expliciete gebruikersbevestiging, vooral niet als een site de standaardafhandelaar moet worden. In plaats van bestaande extensies zoals .json te kapen, waarvoor de gebruiker waarschijnlijk al een standaardafhandelaar heeft geregistreerd, zouden sites moeten overwegen om hun eigen extensies te ontwikkelen.

Transparantie

Alle besturingssystemen stellen gebruikers in staat de huidige bestandskoppelingen te wijzigen. Dit valt buiten het bereik van de browser.

Feedback

Het Chrome-team wil graag meer horen over uw ervaringen met de File Handling API.

Vertel ons iets over het API-ontwerp.

Werkt er iets aan de API niet zoals je had verwacht? Of ontbreken er methoden of eigenschappen die je nodig hebt om je idee te implementeren? Heb je een vraag of opmerking over het beveiligingsmodel?

  • Dien een specificatieprobleem in bij de betreffende GitHub-repository , of voeg je gedachten toe aan een bestaand probleem.

Meld een probleem met de implementatie.

Heb je een bug gevonden in de implementatie van Chrome? Of wijkt de implementatie af van de specificatie?

  • Meld een bug op new.crbug.com . Vermeld daarbij zoveel mogelijk details, eenvoudige instructies voor het reproduceren van het probleem en voer UI>Browser>WebAppInstalls>FileHandling in bij het veld Components .

Toon je steun voor de API

Ben je van plan de File Handling API te gebruiken? Jouw publieke steun helpt het Chrome-team bij het prioriteren van functies en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

Handige links

Dankbetuigingen

De File Handling API is ontwikkeld door Eric Willigers , Jay Harris en Raymes Khoury . Dit artikel is beoordeeld door Joe Medley .