Dateien mit Ihrer PWA verknüpfen

Auf einem Gerät sind Dateien normalerweise mit Apps verknüpft, sodass beim Öffnen der Datei das Betriebssystem die entsprechende App startet und die Datei an sie übergibt. Zum Beispiel werden HTML-Dateien oft in einem Webbrowser geöffnet, Textdateien in einem Texteditor und Videos in einem Videoplayer.

Progressive Web Apps können an dieser Funktion teilnehmen, sodass wenn der Benutzer Dateien bestimmter Typen anklickt, die PWA gestartet werden kann, um diese zu verarbeiten.

Es gibt zwei Teile zur Unterstützung des Datei-Handling:

  • Deklarieren Sie die Unterstützung bestimmter Dateitypen über das file_handlers-Mitglied der Web-App-Manifests.
  • Dateien über das LaunchQueue-Interface verarbeiten.

Hinweis: Derzeit ist diese Funktion nur in Chromium-basierten Browsern und nur auf Desktop-Betriebssystemen verfügbar.

Unterstützung für Dateitypen deklarieren

Um die Unterstützung für bestimmte Dateitypen zu deklarieren, fügen Sie das file_handlers-Mitglied in Ihre Manifestdatei ein.

Das file_handlers-Mitglied ist ein Array von Datei-Handler-Objekten. Jedes Datei-Handler-Objekt hat zwei obligatorische Eigenschaften: action und accept.

  • Die accept-Eigenschaft enthält MIME-Typen und zugehörige Dateiendungen für Dateien, die der Handler verarbeiten kann.
  • Die action-Eigenschaft ist eine URL, zu der die PWA navigiert, wenn der Benutzer die Datei öffnet. Diese Seite muss im Geltungsbereich ("scope") der PWA liegen.

Das untenstehende Beispiel der Manifestdatei enthält ein file_handlers-Mitglied mit einem einzelnen Handler, der JPEG- und PNG-Dateien verarbeiten kann und zur Root-Seite der PWA navigiert, wenn der Benutzer eine dieser Dateien klickt.

json
{
  "name": "File handling demo",
  "icons": [
    {
      "src": "icons/lightbulb.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "file_handlers": [
    {
      "action": "/",
      "accept": {
        "image/jpeg": [".jpg", ".jpeg"],
        "image/png": [".png"]
      }
    }
  ]
}

Mit diesem Manifest kann die PWA, sobald sie installiert ist, geöffnet werden, wenn der Benutzer Dateien dieser Typen öffnet.

In der Regel können mehrere Apps Dateien eines bestimmten Typs öffnen, daher stellt das Betriebssystem meist eine Funktion bereit, die es dem Benutzer ermöglicht, auszuwählen, welche App er zum Öffnen einer Datei verwenden möchte, und einen Standard-Handler festzulegen. Zum Beispiel kann der Benutzer auf macOS mit einem Rechtsklick auf eine Datei "Informationen" auswählen und den Standard-Handler im resultierenden Dialogfeld konfigurieren:

Standard-Handler auf macOS auswählen

Berechtigung anfordern

Das erste Mal, wenn der Browser Ihre PWA startet, um eine oder mehrere Dateien zu verarbeiten, die der Benutzer geöffnet hat, wird der Benutzer gefragt, ob er Ihre PWA dafür verwenden möchte. Zum Beispiel sieht der Chrome-Dialog folgendermaßen aus:

Chrome-Warnungsdialog zum Starten der PWA zum Verarbeiten einer Datei

Dateien verarbeiten

Wenn der Browser Ihre PWA startet und zu der Seite navigiert, die Sie in der action-Eigenschaft des file_handlers-Manifestmitglieds angegeben haben, müssen Sie Code ausführen, um die Datei zu verarbeiten. Dieser Code läuft auf der Seite, die in der action-Eigenschaft spezifiziert wurde.

Das zentrale Interface hierfür ist LaunchQueue, das als Eigenschaft des globalen Window-Objekts verfügbar ist.

Das LaunchQueue-Interface hat eine einzige Methode, setConsumer(), die eine Callback-Funktion als Argument übernimmt. Diese wird aufgerufen, wenn der Browser die PWA mit einer oder mehreren zu verarbeitenden Dateien gestartet hat.

Der Callback wird ein LaunchParams-Objekt übergeben, das eine files-Eigenschaft enthält, in der ein Array von FileSystemHandle-Objekten enthalten ist, von denen jedes eines der vom Benutzer geöffneten Dateien repräsentiert.

Das folgende Beispiel liest die Dateien ein und weist ihre Inhalte <img>-Elementen zu, die es der Seite hinzufügt:

js
const imageContainer = document.querySelector("#container");

if ("launchQueue" in window) {
  launchQueue.setConsumer(async (launchParams) => {
    for (const file of launchParams.files) {
      const img = document.createElement("img");
      img.src = URL.createObjectURL(await file.getFile());
      imageContainer.appendChild(img);
    }
  });
}

Beachten Sie, dass der Code überprüft, ob launchQueue existiert, bevor er es verwendet, um sicherzustellen, dass die App in Browsern, die die API nicht unterstützen, fehlerfrei funktioniert.

Siehe auch