Diese Seite wurde von der Cloud Translation API übersetzt.

Installierte Webanwendungen als Datei-Handler verwenden

Eine App als Dateihandler beim Betriebssystem registrieren.

Thomas Steiner

Da Webanwendungen jetzt Dateien lesen und schreiben können, ist der nächste logische Schritt, dass Entwickler diese Webanwendungen als Datei-Handler für die Dateien deklarieren können, die ihre Apps erstellen und verarbeiten können. Genau das ist mit der File Handling API möglich. Nachdem Sie einen Texteditor als Datei-Handler registriert und installiert haben, können Sie unter macOS mit der rechten Maustaste auf eine .txt-Datei klicken und „Info anzeigen“ auswählen, um dem Betriebssystem zu sagen, dass .txt-Dateien standardmäßig immer mit dieser App geöffnet werden sollen.

Anwendungsfälle für die File Handling API

Beispiele für Websites, die diese API verwenden können:

Office-Anwendungen wie Texteditoren, Tabellenanwendungen und Tools zum Erstellen von Präsentationen
Grafikeditoren und Zeichentools
Tools zum Erstellen von Videospiellevels.

File Handling API verwenden

Progressive Verbesserung

Die File Handling API kann nicht polyfilled werden. Es gibt jedoch zwei weitere Möglichkeiten, Dateien mit einer Webanwendung zu öffnen:

Mit der Web Share Target API können Entwickler ihre App als Freigabeziel angeben, damit Dateien über das Freigabe-Sheet des Betriebssystems geöffnet werden können.
Die File System Access API kann in das Drag-and-drop von Dateien eingebunden werden, damit Entwickler abgelegte Dateien in der bereits geöffneten App verarbeiten können.

Unterstützte Browser

Quelle

Funktionserkennung

So prüfen Sie, ob die File Handling API unterstützt wird:

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

Der deklarative Teil der File Handling API

Als ersten Schritt müssen Web-Apps in ihrem Web-App-Manifest deklarativ angeben, welche Art von Dateien sie verarbeiten können. Die File Handling API erweitert das Manifest der Webanwendung um eine neue Eigenschaft namens "file_handlers", die ein Array von Dateihandlern akzeptiert. Ein Datei-Handler ist ein Objekt mit den folgenden Eigenschaften:

Eine "action"-Property, die als Wert auf eine URL innerhalb der App verweist.
Eine "accept"-Eigenschaft mit einem Objekt von MIME-Typen als Schlüsseln und Listen von Dateiendungen als Werten.
Eine "icons"-Property mit einem Array von ImageResource-Symbolen. Bei einigen Betriebssystemen kann für eine Dateitypverknüpfung nicht nur das Symbol der zugehörigen Anwendung, sondern auch ein spezielles Symbol für die Verwendung dieses Dateityps mit der Anwendung angezeigt werden.
Eine "launch_type"-Property, die festlegt, ob mehrere Dateien in einem oder in mehreren Clients geöffnet werden sollen. Der Standardwert ist "single-client". Wenn der Nutzer mehrere Dateien öffnet und der Datei-Handler mit "multiple-clients" als "launch_type" gekennzeichnet wurde, wird die App mehrmals gestartet. Bei jedem Start enthält das LaunchParams.files-Array (siehe unten) nur ein Element.

Das folgende Beispiel, das nur den relevanten Ausschnitt des Web-App-Manifests zeigt, sollte es klarer machen:

{
  "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"
    }
  ]
}

Dies ist für eine hypothetische Anwendung, die CSV-Dateien (.csv) unter /open-csv, Scalable Vector Graphics-Dateien (.svg) unter /open-svg und ein fiktives Grafr-Dateiformat mit einer der Endungen .grafr, .graf oder .graph unter /open-graf verarbeitet. Die ersten beiden werden in einem einzigen Client geöffnet, die letzte in mehreren Clients, wenn mehrere Dateien verarbeitet werden.

Der imperative Teil der File Handling API

Nachdem die App theoretisch erklärt hat, welche Dateien sie an welcher URL verarbeiten kann, muss sie in der Praxis unbedingt etwas mit den eingehenden Dateien tun. Hier kommt die launchQueue ins Spiel. Damit eine Website auf gestartete Dateien zugreifen kann, muss sie einen Nutzer für das window.launchQueue-Objekt angeben. Starts werden in der Warteschlange platziert, bis sie vom angegebenen Verbraucher verarbeitet werden. Dieser wird genau einmal für jeden Start aufgerufen. So wird jeder Start verarbeitet, unabhängig davon, wann der Verbraucher angegeben wurde.

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.
    }
  });
}

Unterstützung für Entwicklertools

Derzeit gibt es keine Unterstützung für DevTools. Ich habe jedoch einen Feature-Request eingereicht, um die Unterstützung zu erweitern.

Demo

Ich habe Excalidraw, einer Zeichenanwendung im Cartoon-Stil, die Unterstützung für die Dateiverwaltung hinzugefügt. Zum Testen müssen Sie zuerst Excalidraw installieren. Wenn Sie dann eine Datei damit erstellen und an einem beliebigen Ort in Ihrem Dateisystem speichern, können Sie die Datei per Doppelklick oder Rechtsklick öffnen und dann im Kontextmenü „Excalidraw“ auswählen. Die Implementierung finden Sie im Quellcode.

Das macOS-Finderfenster mit einer Excalidraw-Datei — Doppelklicken oder klicken Sie mit der rechten Maustaste auf eine Datei im Datei-Explorer Ihres Betriebssystems.

Das Kontextmenü, das durch einen Rechtsklick auf eine Datei angezeigt wird, wobei das Element „Öffnen mit… Excalidraw“ markiert ist. — Excalidraw ist der Standarddatei-Handler für `.excalidraw`-Dateien.

Sicherheit

Das Chrome-Team hat die File Handling API anhand der in Controlling Access to Powerful Web Platform Features (Zugriff auf leistungsstarke Funktionen der Webplattform steuern) definierten Grundprinzipien entwickelt und implementiert, darunter Nutzersteuerung, Transparenz und Ergonomie.

Berechtigungen, Berechtigungsspeicherung und Aktualisierungen von Datei-Handlern

Um das Vertrauen der Nutzer und die Sicherheit ihrer Dateien zu gewährleisten, wird beim Öffnen einer Datei durch die File Handling API eine Berechtigungsanfrage angezeigt, bevor eine PWA eine Datei aufrufen kann. Diese Berechtigungsanfrage wird angezeigt, direkt nachdem der Nutzer die PWA zum Öffnen einer Datei ausgewählt hat. So ist die Berechtigung eng mit der Aktion zum Öffnen einer Datei über die PWA verknüpft, was sie verständlicher und relevanter macht.

Diese Berechtigung wird jedes Mal angezeigt, bis der Nutzer auf Zulassen oder Blockieren für die Dateiverwaltung für die Website klickt oder die Aufforderung dreimal ignoriert. Danach wird diese Berechtigung von Chromium unter Embargo gestellt und blockiert. Die ausgewählte Einstellung bleibt erhalten, wenn die PWA geschlossen und wieder geöffnet wird.

Wenn das Manifest aktualisiert wird und Änderungen im Bereich "file_handlers" erkannt werden, werden die Berechtigungen zurückgesetzt.

Dateibezogene Probleme

Es gibt eine große Kategorie von Angriffsvektoren, die sich dadurch öffnen, dass Websites Zugriff auf Dateien erhalten. Diese werden im Artikel zur File System Access API beschrieben. Die File Handling API bietet im Vergleich zur File System Access API eine zusätzliche sicherheitsrelevante Funktion: Sie können über die integrierte Benutzeroberfläche des Betriebssystems Zugriff auf bestimmte Dateien gewähren, anstatt über eine Dateiauswahl, die von einer Webanwendung angezeigt wird.

Es besteht weiterhin das Risiko, dass Nutzer einer Webanwendung versehentlich Zugriff auf eine Datei gewähren, indem sie sie öffnen. Es ist jedoch allgemein bekannt, dass das Öffnen einer Datei es der Anwendung, mit der sie geöffnet wird, ermöglicht, diese Datei zu lesen und/oder zu bearbeiten. Daher kann die explizite Entscheidung eines Nutzers, eine Datei in einer installierten Anwendung zu öffnen, z. B. über das Kontextmenü „Öffnen mit…“, als ausreichendes Signal für das Vertrauen in die Anwendung angesehen werden.

Herausforderungen beim Standard-Handler

Eine Ausnahme besteht, wenn auf dem Hostsystem keine Anwendungen für einen bestimmten Dateityp vorhanden sind. In diesem Fall kann es sein, dass einige Hostbetriebssysteme den neu registrierten Handler automatisch und ohne Nutzereingriff zum Standard-Handler für diesen Dateityp machen. Wenn der Nutzer also auf eine Datei dieses Typs doppelklickt, wird sie automatisch in der registrierten Webanwendung geöffnet. Wenn der User-Agent auf solchen Hostbetriebssystemen feststellt, dass kein Standard-Handler für den Dateityp vorhanden ist, ist möglicherweise eine explizite Berechtigungsanfrage erforderlich, um zu verhindern, dass der Inhalt einer Datei versehentlich ohne die Einwilligung des Nutzers an eine Webanwendung gesendet wird.

Nutzersteuerung

Die Spezifikation besagt, dass Browser nicht jede Website, die Dateien verarbeiten kann, als Datei-Handler registrieren sollten. Stattdessen sollte die Registrierung der Dateibehandlung erst nach der Installation erfolgen und niemals ohne ausdrückliche Nutzerbestätigung, insbesondere wenn eine Website zum Standard-Handler werden soll. Anstatt vorhandene Erweiterungen wie .json zu missbrauchen, für die der Nutzer wahrscheinlich bereits einen Standard-Handler registriert hat, sollten Websites eigene Erweiterungen erstellen.

Transparenz

Unter allen Betriebssystemen können Nutzer die vorhandenen Dateiverknüpfungen ändern. Dies liegt außerhalb des Browsers.

Feedback

Das Chrome-Team möchte mehr über Ihre Erfahrungen mit der File Handling API erfahren.

Informationen zum API-Design

Funktioniert die API nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie zur Implementierung Ihrer Idee benötigen? Haben Sie Fragen oder Kommentare zum Sicherheitsmodell?

Reichen Sie ein Problem mit der Spezifikation im entsprechenden GitHub-Repository ein oder fügen Sie Ihre Gedanken zu einem vorhandenen Problem hinzu.

Problem mit der Implementierung melden

Haben Sie einen Fehler in der Chrome-Implementierung gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation?

Melden Sie den Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich an, eine einfache Anleitung zur Reproduktion und geben Sie UI>Browser>WebAppInstalls>FileHandling in das Feld Components ein. Glitch eignet sich hervorragend, um schnell und einfach Repros zu teilen.

Unterstützung für die API anzeigen

Beabsichtigen Sie, die File Handling API zu verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.

Teilen Sie im WICG-Discourse-Thread mit, wie Sie es verwenden möchten.
Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag #FileHandling und teilen Sie uns mit, wo und wie Sie ihn verwenden.

Nützliche Links

Danksagungen

Die File Handling API wurde von Eric Willigers, Jay Harris und Raymes Khoury spezifiziert. Dieser Artikel wurde von Joe Medley überprüft.