Diese Seite wurde von der Cloud Translation API übersetzt.

Installierte Webanwendungen als Datei-Handler verwenden

Registrieren einer App als Datei-Handler beim Betriebssystem.

Thomas Steiner

Da Webanwendungen nun Dateien lesen und schreiben können, besteht der nächste logische Schritt darin, Entwicklern zu ermöglichen, genau diese Webanwendungen als Datei-Handler für die Dateien zu deklarieren, die ihre Anwendungen erstellen und verarbeiten können. Mit der File Handling API ist genau das möglich. Nachdem Sie eine Texteditor-App als Datei-Handler registriert und diese installiert haben, können Sie unter macOS mit der rechten Maustaste auf eine .txt-Datei klicken und „Informationen abrufen“ auswählen. Dann weisen Sie das Betriebssystem an, .txt-Dateien immer standardmäßig mit dieser Anwendung zu öffnen.

Empfohlene Anwendungsfälle für die File Handling API

Beispiele für Websites, die diese API möglicherweise verwenden:

Office-Anwendungen wie Texteditoren, Tabellenkalkulations-Apps und Erstellung von Bildschirmpräsentationen.
Grafikeditoren und Zeichentools.
Editor-Tools für Videospielelevel

File Handling API verwenden

Progressive Enhancement

Die File Handling API kann nicht mit Polypen gefüllt werden. Das Öffnen von Dateien mit einer Webanwendung kann jedoch auf zwei andere Arten erreicht werden:

Mit der Web Share Target API können Entwickler ihre App als Freigabeziel angeben, damit Dateien über das Share Sheet des Betriebssystems geöffnet werden können.
Die File System Access API kann in das Drag-and-drop von Dateien integriert werden, damit Entwickler Dateien, die in der bereits geöffneten App abgelegt wurden, 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

Zuerst müssen Webanwendungen in ihrem Web App-Manifest deklarativ beschreiben, welche Art von Dateien sie verarbeiten können. Die File Handling API erweitert das Web-App-Manifest um ein neues Attribut namens "file_handlers", das ein Array von Datei-Handlern akzeptiert. Ein Datei-Handler ist ein Objekt mit folgenden Eigenschaften:

Ein "action"-Attribut, das auf eine URL im Bereich der App als Wert verweist.
Ein "accept"-Attribut mit einem Objekt von MIME-Typen als Schlüssel und Listen von Dateierweiterungen als Werte.
Eine "icons"-Eigenschaft mit einem Array von ImageResource-Symbolen. Bei einigen Betriebssystemen kann bei einer Dateitypverknüpfung ein Symbol angezeigt werden, das nicht nur das zugehörige Anwendungssymbol, sondern ein spezielles Symbol für die Verwendung des entsprechenden Dateityps in der Anwendung ist.
Eine "launch_type"-Eigenschaft, die definiert, ob mehrere Dateien in einem einzelnen Client 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" annotiert wurde, werden mehr als ein App-Start durchgeführt, und für jeden Start enthält das LaunchParams.files-Array (siehe weiter unten) nur ein Element.

Im folgenden Beispiel, das nur den relevanten Auszug des Web-App-Manifests zeigt, sollte dies klarer sein:

{
  "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 eine hypothetische Anwendung, die Dateien mit kommagetrennten Werten (.csv) unter /open-csv, skalierbare Vektorgrafikdateien (.svg) unter /open-svg und ein erfundenes Grafr-Dateiformat mit einer der beiden Endungen .grafr, .graf oder .graph als Erweiterung unter /open-graf verarbeitet. Die ersten beiden werden in einem einzelnen Client geöffnet. Falls mehrere Dateien verarbeitet werden, wird der letzte in mehreren Clients geöffnet.

Der unverzichtbare Teil der File Handling API

Nachdem die Anwendung deklariert hat, welche Dateien sie unter welcher URL im Geltungsbereich verarbeiten kann, muss sie in der Praxis sofort mit eingehenden Dateien umgehen. Hier kommt launchQueue ins Spiel. Für den Zugriff auf gestartete Dateien muss eine Website einen Nutzer für das window.launchQueue-Objekt angeben. Starts werden in die Warteschlange gestellt, bis sie vom angegebenen Nutzer verarbeitet werden. Dies wird bei jedem Start genau einmal 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 keinen Support für die Entwicklertools. Ich habe aber eine Funktionsanfrage gestellt.

Demo

Ich habe Excalidraw, eine Zeichen-App im Cartoonstil, Unterstützung für die Dateiverwaltung hinzugefügt. Um sie zu testen, müssen Sie zuerst Excalidraw installieren. Wenn Sie dann eine Datei erstellen und in Ihrem Dateisystem speichern, können Sie die Datei mit einem Doppelklick oder einem Rechtsklick öffnen und dann „Excalidraw“ im Kontextmenü auswählen. Die Implementierung findest du im Quellcode.

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

Das Kontextmenü, das beim Rechtsklick auf eine Datei mit hervorgehobenem Element Öffnen mit... angezeigt wird. — Excalidraw ist der Standard-Datei-Handler für `.excalidraw`-Dateien.

Sicherheit

Das Chrome-Team hat die File Handling API gemäß den unter Zugriff auf leistungsstarke Webplattformfunktionen steuern definierten grundlegenden Prinzipien wie Nutzersteuerung, Transparenz und Ergonomie entwickelt und implementiert.

Berechtigungen, Berechtigungspersistenz und Aktualisierungen von Datei-Handlern

Bevor eine PWA eine Datei ansehen kann, wird beim Öffnen der File Handling API eine Berechtigungsaufforderung angezeigt, um das Vertrauen der Nutzer zu stärken und die Dateien der Nutzer zu schützen. Diese Berechtigungsaufforderung wird angezeigt, sobald der Nutzer die PWA zum Öffnen einer Datei ausgewählt hat. So ist die Berechtigung eng mit dem Öffnen einer Datei über die PWA verknüpft, wodurch sie verständlicher und relevanter wird.

Diese Berechtigung wird jedes Mal angezeigt, bis der Nutzer auf Zulassen oder Blockieren der Dateiverarbeitung für die Website klickt oder die Aufforderung dreimal ignoriert. Danach wird Chromium ein Embargo verhängt und die Berechtigung blockiert. Die ausgewählte Einstellung bleibt beim Schließen und erneuten Öffnen der PWA bestehen.

Wenn die Manifestaktualisierungen und Änderungen im Abschnitt "file_handlers" erkannt werden, werden die Berechtigungen zurückgesetzt.

Dateibezogene Herausforderungen

Es gibt eine große Kategorie von Angriffsvektoren, die geöffnet werden, indem Websites Zugriff auf Dateien gewährt wird. Diese werden im Artikel zur File System Access API beschrieben. Die File Handling API bietet die Möglichkeit, Zugriff auf bestimmte Dateien über die integrierte Benutzeroberfläche des Betriebssystems zu gewähren, anstatt über die Dateiauswahl in einer Webanwendung.

Es besteht weiterhin das Risiko, dass Nutzer einer Webanwendung versehentlich Zugriff auf eine Datei gewähren, indem sie diese öffnen. Allgemein gilt jedoch, dass die Anwendung, mit der sie geöffnet wird, eine Datei öffnen kann, um 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 vertrauenswürdiges Signal der Anwendung ausgelesen werden.

Herausforderungen für Standard-Handler

Eine Ausnahme liegt vor, wenn auf dem Hostsystem keine Anwendungen für einen bestimmten Dateityp vorhanden sind. In diesem Fall können einige Host-Betriebssysteme den neu registrierten Handler automatisch und ohne Eingriff des Nutzers zum Standard-Handler für diesen Dateityp hochstufen. Wenn der Nutzer also doppelt auf eine Datei dieses Typs klickt, wird sie automatisch in der registrierten Webanwendung geöffnet. Wenn der User-Agent auf solchen Host-Betriebssystemen feststellt, dass kein Standard-Handler für den Dateityp vorhanden ist, ist möglicherweise eine explizite Berechtigungsaufforderung erforderlich, um zu verhindern, dass der Inhalt einer Datei ohne Zustimmung des Nutzers an eine Webanwendung gesendet wird.

Nutzersteuerung

Die Spezifikation besagt, dass Browser nicht jede Website registrieren sollten, die Dateien als Datei-Handler verarbeiten kann. Stattdessen sollte die Registrierung für die Dateiverarbeitung hinter der Installation geschützt sein und niemals ohne ausdrückliche Bestätigung durch den Nutzer erfolgen, insbesondere wenn eine Website als Standard-Handler verwendet werden soll. Anstatt vorhandene Erweiterungen wie .json zu hacken, für die der Nutzer wahrscheinlich bereits einen Standard-Handler registriert hat, sollten Websites eigene Erweiterungen entwickeln.

Transparenz

Bei allen Betriebssystemen können Nutzer die aktuellen Dateiverknüpfungen ändern. Das liegt außerhalb des Zuständigkeitsbereichs des Browsers.

Feedback

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

Informationen zum API-Design

Gibt es etwas an der API, das nicht so funktioniert, wie Sie es erwartet hatten? Oder fehlen Methoden oder Eigenschaften, um Ihre Idee zu implementieren? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell?

Melden Sie ein Spezifikationsproblem im entsprechenden GitHub-Repository oder fügen Sie Ihre Gedanken zu einem vorhandenen Problem hinzu.

Problem mit der Implementierung melden

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

Melden Sie einen Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich und eine einfache Anleitung zum Reproduzieren an. Geben Sie UI>Browser>WebAppInstalls>FileHandling in das Feld Komponenten ein. Glitch eignet sich hervorragend zum Teilen von schnellen und einfachen Reproduktionen.

Unterstützung für die API zeigen

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.

Teile uns im WICG Discourse-Thread mit, wie du es verwenden möchtest.
Sende einen Tweet mit dem Hashtag #FileHandling an @ChromiumDev und teile uns mit, wo und wie du es verwendest.

Nützliche Links

Danksagungen

Die File Handling API wurde von Eric Willigers, Jay Harris und Raymes Khoury definiert. Dieser Artikel wurde von Joe Medley gelesen.