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
Videospiel-Level-Editor-Tools

File Handling API verwenden

Progressive Enhancement

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 das neue Attribut "file_handlers", das ein Array von Datei-Handlern akzeptiert. Ein Datei-Handler ist ein Objekt mit den folgenden Eigenschaften:

Eine "action"-Property, die auf eine URL im Bereich der App als ihr Wert verweist.
Ein "accept"-Attribut mit einem Objekt mit MIME-Typen als Schlüssel und Listen mit Dateiendungen als Werte.
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 ist, wird mehr als ein App-Start ausgeführt. Bei jedem Start hat das LaunchParams.files-Array (siehe weiter unten) nur ein Element.

Im folgenden Beispiel, das nur den relevanten Ausschnitt des Web-App-Manifests zeigt, sollte das klarer werden:

{
  "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 Verbraucher 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. Auf diese Weise wird jeder Start durchgeführt, unabhängig davon, wann der Nutzer 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.

macOS-Suchfenster 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 „Mit… Excalidraw öffnen“ markiert ist. — Excalidraw ist der Standard-Datei-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 Manifestaktualisierungen und Änderungen im Abschnitt "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 des Standard-Handlers

Eine Ausnahme hiervon ist, wenn für einen bestimmten Dateityp keine Anwendungen auf dem Hostsystem vorhanden sind. In diesem Fall kann der neu registrierte Handler von einigen Hostbetriebssystemen automatisch zum Standard-Handler für diesen Dateityp hochgestuft werden, ohne dass der Nutzer eingreifen muss. 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

Laut Spezifikation sollten Browser nicht jede Website, die Dateien verarbeiten kann, als Datei-Handler registrieren. Stattdessen sollte die Registrierung für die Dateiverwaltung hinter der Installation gesteuert werden und nie ohne ausdrückliche Bestätigung durch den Nutzer erfolgen, 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 für die 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 bei der Implementierung von Chrome einen Fehler 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

Möchten Sie die File Handling API 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.