Installierte Webanwendungen als Datei-Handler verwenden

Registrieren Sie eine Anwendung als Datei-Handler beim Betriebssystem.

Thomas Steiner

Da Webanwendungen nun Dateien lesen und schreiben können, bietet die nächste logische können Entwickler genau diese Web-Apps als Datei-Handler für die Dateien deklarieren, die ihre Apps zu erstellen und zu verarbeiten. Mit der File Handling API können Sie genau das tun. Nach dem Registrieren eines Textes als Datei-Handler verwenden. Nach der Installation können Sie mit der rechten Maustaste auf eine .txt-Datei unter macOS und wählen Sie „Informationen“ aus. um das Betriebssystem anzuweisen, .txt-Dateien immer mit dieser App als Standardeinstellung.

Empfohlene Anwendungsfälle für die File Handling API

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

• Office-Anwendungen wie Texteditoren, Tabellen-Apps und zum Erstellen von Diashows
• Grafikeditoren und Zeichentools
• Videospiel-Level-Editor-Tools

File Handling API verwenden

Progressive Enhancement

Die File Handling API an sich kann nicht mit Polyfills gefüllt werden. Die Funktion zum Öffnen von Dateien mit einem App ist jedoch auf zweierlei Weise möglich:

• 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 per Drag-and-drop von Dateien integriert werden, können Entwickler verworfene Dateien in der bereits geöffneten App verarbeiten.

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

In einem ersten Schritt müssen Web-Apps eine deklarative Beschreibung in ihrem Web-App-Manifest angeben. welche Dateien sie verarbeiten können. Die File Handling API erweitert das Web-App-Manifest um namens "file_handlers", die ein Array mit Datei-Handlern akzeptiert. Ein Datei-Handler Ein -Objekt mit diesen 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 von Dateiendungen als ihre Werte.
• Ein "icons"-Attribut mit einem Array von ImageResource Symbole. Bei einigen Betriebssystemen kann in einer Dateitypverknüpfung ein Symbol angezeigt werden, das nicht nur das zugehörige App-Symbol, sondern ein spezielles Symbol für die Verwendung dieses Dateityps mit der Anwendung.
• Ein "launch_type"-Attribut, das definiert, ob mehrere Dateien in einem einzigen geöffnet werden sollen oder in mehreren Clients. Der Standardwert ist "single-client". Wenn der Nutzer mehrere Dateien öffnet und der Datei-Handler mit "multiple-clients" als "launch_type" wird mehr als eine App-Einführung stattfinden. Bei jedem Start wird der Wert LaunchParams.files-Array (siehe weiter unten) nur ein Element haben.

Im Beispiel unten, in dem nur der relevante Auszug des Web-App-Manifests zu sehen ist, sollte es klarer formuliert:

{
  "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 Dateien mit kommagetrennten Werten (.csv) an folgendem Speicherort verarbeitet: /open-csv, skalierbare Vektorgrafikdateien (.svg) unter /open-svg und ein eigenes Grafr-Dateiformat mit .grafr, .graf oder .graph als Erweiterung unter /open-graf. Die ersten beiden werden geöffnet, in einem einzelnen Client und dem letzten in mehreren Clients, wenn mehrere Dateien verarbeitet werden.

Der zwingende Teil der File Handling API

Nachdem die App erklärt hat, welche Dateien sie unter welcher URL innerhalb des Geltungsbereichs verarbeiten kann, muss sie theoretisch mit eingehenden Dateien arbeiten. Hier kommt die launchQueue ins Spiel. Für den Zugriff auf gestartete Dateien muss eine Website einen Nutzer für die window.launchQueue angeben -Objekt enthält. Starts werden in die Warteschlange gestellt, bis sie vom angegebenen Nutzer verarbeitet werden, der aufgerufen wird. genau einmal pro Start. Auf diese Weise wird jeder Start durchgeführt, unabhängig davon, wann Verbraucher angegeben.

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

Zum Zeitpunkt der Veröffentlichung dieses Dokuments wird die Entwicklertools-Funktion nicht unterstützt, aber ich habe eine Funktionsanfrage für den hinzugefügt.

Demo

Ich habe die Dateiverwaltung für Excalidraw unterstützt, eine Zeichen-App im Cartoonstil. Um sie zu testen, müssen Sie zuerst Excalidraw installieren. Wenn Sie dann eine Datei damit erstellen und sie irgendwo auf Ihrem Dateisystem durch einen Doppelklick oder einen Rechtsklick „Excalidraw“ im Kontextmenü. Sie können sich die Implementierung in der Quelle Code.

</ph> <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Sicherheit

Das Chrome-Team hat die File Handling API gemäß den hier definierten Grundprinzipien entwickelt und implementiert. Zugriff auf leistungsstarke Webplattform-Funktionen steuern, einschließlich Nutzersteuerung, Transparenz und Ergonomie.

Berechtigungen, Persistenz von Berechtigungen und Updates von Datei-Handlern

Um das Vertrauen der Nutzer und die Sicherheit der wenn die File Handling API eine Datei öffnet, wird eine Berechtigungsaufforderung angezeigt, bevor eine PWA eine Datei ansehen kann. Diese Berechtigungsaufforderung wird angezeigt direkt nachdem der Nutzer die PWA zum Öffnen einer Datei ausgewählt hat, sodass die Berechtigung eng mit dem eine Datei mit der PWA zu öffnen, sodass sie verständlicher und relevanter wird.

Diese Berechtigung wird immer dann angezeigt, bis der Nutzer auf Zulassen oder Blockieren für die Dateiverwaltung klickt. für die Website oder ignoriert die Aufforderung dreimal. Danach blockiert Chromium diese Aufforderung Berechtigung) erhalten. Die ausgewählte Einstellung bleibt für die gesamte PWA bestehen, die geschlossen und wieder geöffnet wird.

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

Dateibezogene Herausforderungen

Es gibt eine große Kategorie von Angriffsvektoren, die Websites öffnen, indem sie Websites den Zugriff auf Dateien erlauben. Diese sind im Artikel zur File System Access API. Die zusätzliche Sicherheitsfunktionen, die die File Handling API über das Dateisystem bietet Mit der Access API kann über die integrierte API des Betriebssystems Benutzeroberfläche, im Gegensatz zu einer Dateiauswahl, die in einer Webanwendung angezeigt wird

Es besteht weiterhin das Risiko, dass Nutzer einer Webanwendung ungewollt Zugriff auf eine Datei gewähren, indem sie wenn ich es öffne. Es ist jedoch allgemein bekannt, dass durch das Öffnen einer Datei die Anwendung, zu der sie ist, zugelassen wird. zum Lesen und/oder Bearbeiten der Datei geöffnet. Die explizite Entscheidung eines Nutzers, eine Datei zu öffnen, in einer installierten Anwendung, z. B. über die Schaltfläche "Öffnen mit..." Kontextmenü, kann als ausreichend ein Zeichen für Vertrauen in die Anwendung.

Herausforderungen des Standard-Handlers

Eine Ausnahme hiervon ist, wenn für einen bestimmten Dateityp keine Anwendungen auf dem Hostsystem vorhanden sind. In In diesem Fall können einige Hostbetriebssysteme den neu registrierten Handler automatisch zum Standard-Handler für diesen Dateityp automatisch und ohne Zutun des Nutzers zu öffnen. Dies würde Wenn der Nutzer auf eine Datei dieses Typs doppelklickt, wird sie automatisch im registrierten Web-App. Wenn der User-Agent unter solchen Host-Betriebssystemen feststellt, dass Standard-Handler für den Dateityp verwendet werden, ist eine explizite Berechtigungsaufforderung möglicherweise erforderlich, um Der Inhalt einer Datei wird versehentlich ohne Zustimmung des Nutzers an eine Webanwendung gesendet.

Nutzersteuerung

Laut Spezifikation sollten Browser nicht jede Website, die Dateien verarbeiten kann, als Datei registrieren. -Handler. Stattdessen sollte die Registrierung für die Dateiverwaltung hinter der Installation gesteuert werden und nie erfolgen. ohne ausdrückliche Bestätigung durch den Nutzer, insbesondere wenn eine Website zum Standard-Handler werden soll. Stattdessen als vorhandene Erweiterungen wie .json zu hacken, sodass der Nutzer wahrscheinlich bereits einen Standard-Handler hat Websites sollten erwägen, ihre eigenen Erweiterungen zu erstellen.

Transparenz

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

Feedback

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

Informationen zum API-Design

Funktioniert die API nicht wie erwartet? Oder fehlen Methoden, oder Eigenschaften, die Sie für die Umsetzung Ihrer Idee benötigen? Fragen oder Kommentare zur Sicherheit haben Modell?

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

Problem mit der Implementierung melden

Haben Sie bei der Implementierung von Chrome einen Fehler gefunden? Oder weicht die Implementierung von der Spezifikation ab?

• Melde einen Fehler unter new.crbug.com. Achten Sie darauf, so viele Details wie und eine einfache Anleitung zum ReproduzierenUI>Browser>WebAppInstalls>FileHandling das Feld Komponenten aus. Mit Glitch lassen sich Inhalte schnell und einfach teilen. Repros.

Unterstützung für die API anzeigen

Möchten Sie die File Handling API verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team, Funktionen priorisieren und anderen Browseranbietern zeigen, wie wichtig es für ihre Unterstützung ist.

• Im WICG Discourse-Thread können Sie uns mitteilen, wie Sie den Dienst verwenden möchten.
• Sende einen Tweet mit dem Hashtag an @ChromiumDev #FileHandling und lassen Sie uns wo und wie Sie es nutzen.

Nützliche Links

• Öffentliche Erläuterung
• Demo zur File Handling API | Demo-Quelle für die File Handling API
• Fehler beim Tracking in Chromium
• ChromeStatus.com-Eintrag
• Blink-Komponente: UI>Browser>WebAppInstalls>FileHandling
• TAG-Überprüfung
• Position von Mozilla-Standards

Danksagungen

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