Eine App als Dateihandler beim Betriebssystem registrieren.
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
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 vonImageResource
-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 dasLaunchParams.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.
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
- Öffentliche Erläuterung
- File Handling API-Demo | File Handling API-Demoquelle
- Fehler beim Tracking in Chromium
- Eintrag in ChromeStatus.com
- Blink-Komponente:
UI>Browser>WebAppInstalls>FileHandling
- TAG-Überprüfung
- Position von Mozilla-Standards
Danksagungen
Die File Handling API wurde von Eric Willigers, Jay Harris und Raymes Khoury spezifiziert. Dieser Artikel wurde von Joe Medley überprüft.