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

Registreer een app als bestandsverwerker bij het besturingssysteem.

Thomas Steiner

Nu webapps bestanden kunnen lezen en schrijven , is de volgende logische stap om ontwikkelaars juist deze webapps te laten declareren als bestandshandlers voor de bestanden die hun apps kunnen maken en verwerken. Met de File Handling API kunt u precies dit doen. Nadat u een teksteditor-app als bestandshandler hebt geregistreerd en deze hebt geïnstalleerd, kunt u met de rechtermuisknop op een .txt bestand op macOS klikken en 'Info ophalen' selecteren om vervolgens het besturingssysteem te instrueren dat het standaard .txt bestanden altijd met deze app moet openen .

Voorgestelde gebruiksscenario's voor de File Handling API

Voorbeelden van sites die deze API kunnen gebruiken zijn:

  • Office-toepassingen zoals teksteditors, spreadsheet-apps en makers van diavoorstellingen.
  • Grafische editors en tekenhulpmiddelen.
  • Hulpmiddelen voor het bewerken van videogames.

Hoe u de File Handling API gebruikt

Progressieve verbetering

De File Handling API kan op zichzelf niet polygevuld worden. De functionaliteit van het openen van bestanden met een webapp kan echter op twee andere manieren worden bereikt:

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

Browser-ondersteuning

Browserondersteuning

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

Bron

Functiedetectie

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 File Handling API

Als eerste stap moeten webapps in hun webapp-manifest declaratief beschrijven wat voor soort bestanden ze kunnen verwerken. De File Handling API breidt het webapp-manifest uit met een nieuwe eigenschap genaamd "file_handlers" die een reeks bestandshandlers accepteert. Een bestandshandler is een object met deze 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 met bestandsextensies als hun waarden.
  • Een eigenschap "icons" met een reeks ImageResource pictogrammen. Sommige besturingssystemen staan ​​toe dat een bestandstypekoppeling een pictogram weergeeft dat niet alleen het bijbehorende toepassingspictogram is, maar eerder 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 zijn "launch_type" , zal er meer dan één app worden gestart, en voor elke start zal de LaunchParams.files -array (zie verderop ) slechts één element bevatten.

Het onderstaande voorbeeld, waarin alleen het relevante fragment van het webapp-manifest wordt weergegeven, zou het duidelijker moeten maken:

{
  "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 verzonnen Grafr-bestandsindeling met een van de volgende .grafr , .graf of .graph als de extensie op /open-graf . De eerste twee worden geopend in één client, de laatste in meerdere clients als er meerdere bestanden worden verwerkt.

Het dwingende onderdeel van de File Handling API

Nu de app heeft aangegeven welke bestanden hij in theorie op welke in-scope URL kan verwerken, moet hij in de praktijk absoluut iets met binnenkomende bestanden doen. Dit is waar de launchQueue in het spel komt. Om toegang te krijgen tot gelanceerde bestanden, moet een site een consument opgeven voor het window.launchQueue -object. Lanceringen worden in de wachtrij geplaatst totdat ze worden afgehandeld door de opgegeven consument, die voor elke lancering precies één keer wordt aangeroepen. Op deze manier wordt elke lancering afgehandeld, ongeacht wanneer de consument is opgegeven.

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 geen DevTools-ondersteuning op het moment dat ik dit schrijf, maar ik heb een functieverzoek ingediend om ondersteuning toe te voegen.

Demo

Ik heb ondersteuning voor bestandsverwerking toegevoegd aan Excalidraw , een tekenapp in cartoonstijl. Om het te testen, moet u eerst Excalidraw installeren. Wanneer u er vervolgens een bestand mee aanmaakt en het ergens op uw bestandssysteem opslaat, kunt u het bestand openen door te dubbelklikken, of door met de rechtermuisknop te klikken en vervolgens "Excalidraw" te selecteren in het contextmenu. U kunt de implementatie bekijken in de broncode.

Het macOS-zoekvenster met een Excalidraw-bestand.
Dubbelklik of klik met de rechtermuisknop op een bestand in de bestandsverkenner van uw besturingssysteem.
Het contextmenu dat verschijnt wanneer u met de rechtermuisknop op een bestand klikt terwijl het item Openen met... Excalidraw gemarkeerd is.
Excalidraw is de standaard bestandshandler voor .excalidraw bestanden.

Beveiliging

Het Chrome-team heeft de File Handling API ontworpen en geïmplementeerd met behulp van de kernprincipes die zijn gedefinieerd in Toegangscontrole tot krachtige webplatformfuncties , waaronder gebruikerscontrole, transparantie en ergonomie.

Machtigingen, persistentie van machtigingen en updates van bestandshandlers

Om het vertrouwen van de gebruiker en de veiligheid van de bestanden van gebruikers te garanderen, wordt er, wanneer de File Handling API een bestand opent, een toestemmingsprompt weergegeven voordat een PWA een bestand kan bekijken. Deze toestemmingsprompt wordt weergegeven direct nadat de gebruiker de PWA heeft geselecteerd om een ​​bestand te openen, zodat de toestemming nauw gekoppeld is aan de actie van het openen van een bestand met behulp van de PWA, waardoor het begrijpelijker en relevanter wordt.

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 een ​​embargo zal instellen en deze toestemming zal blokkeren). De geselecteerde instelling blijft behouden tijdens het sluiten en heropenen van de PWA.

Wanneer de manifestupdates en wijzigingen in de sectie "file_handlers" worden gedetecteerd, worden de machtigingen opnieuw ingesteld.

Er is een grote categorie aanvalsvectoren die worden geopend door websites toegang te geven tot bestanden. Deze worden beschreven in het artikel over de File System Access API . De extra beveiligingsrelevante 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 tegenstelling tot via een bestandskiezer die wordt weergegeven door een webapplicatie.

Het risico bestaat nog steeds dat gebruikers een webapplicatie onbedoeld toegang verlenen tot een bestand door dit te openen. Het is echter algemeen bekend dat het openen van een bestand de toepassing waarmee het bestand wordt geopend, in staat stelt dat bestand te lezen en/of te manipuleren. 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 gelezen als een voldoende signaal van vertrouwen in de applicatie.

Standaard handler-uitdagingen

De uitzondering hierop is wanneer er voor een bepaald bestandstype geen toepassingen op het hostsysteem aanwezig zijn. In dit geval kunnen sommige hostbesturingssystemen automatisch de nieuw geregistreerde handler promoveren naar de standaardhandler voor dat bestandstype, stil en zonder enige tussenkomst van de gebruiker. Dit zou betekenen dat als de gebruiker dubbelklikt op een bestand van dat type, dit automatisch wordt geopend in de geregistreerde web-app. Wanneer de user-agent op dergelijke hostbesturingssystemen vaststelt dat er geen bestaande standaardhandler voor het bestandstype bestaat, kan een expliciete toestemmingsprompt nodig zijn om te voorkomen dat de inhoud van een bestand per ongeluk naar een webtoepassing wordt verzonden zonder toestemming van de gebruiker.

Gebruikerscontrole

De specificatie stelt dat browsers niet elke site die bestanden kan verwerken als bestandshandler mogen registreren. In plaats daarvan moet de registratie van bestandsafhandeling achter de installatie plaatsvinden en mag deze nooit plaatsvinden zonder expliciete bevestiging van de gebruiker, vooral als een site de standaardhandler moet worden. In plaats van bestaande extensies zoals .json te kapen waarvoor de gebruiker waarschijnlijk al een standaardhandler heeft geregistreerd, zouden sites moeten overwegen om hun eigen extensies te maken.

Transparantie

Met alle besturingssystemen kunnen gebruikers de huidige bestandsassociaties wijzigen. Dit valt buiten het bereik van de browser.

Feedback

Het Chrome-team wil graag horen wat uw ervaringen zijn met de File Handling API.

Vertel ons over het API-ontwerp

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

  • Dien een spec issue in op de corresponderende GitHub repo , of voeg uw gedachten toe aan een bestaand issue.

Meld een probleem met de implementatie

Heeft u een bug gevonden in de implementatie van Chrome? Of wijkt de uitvoering af van de specificaties?

  • Dien een bug in op new.crbug.com . Zorg ervoor dat u zoveel mogelijk details en eenvoudige instructies voor het reproduceren opneemt, en voer UI>Browser>WebAppInstalls>FileHandling in het vak Componenten in. Glitch werkt uitstekend voor het delen van snelle en gemakkelijke reproducties.

Toon ondersteuning voor de API

Bent u van plan de File Handling API te gebruiken? Uw publieke steun helpt het Chrome-team prioriteiten te stellen voor functies en laat andere browserleveranciers zien hoe belangrijk het is om deze te ondersteunen.

Handige links

Dankbetuigingen

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