file_handlers

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das file_handlers-Mitglied spezifiziert ein Array von Objekten, die die Arten von Dateien darstellen, die eine installierte Progressive Web App (PWA) verarbeiten kann.

Das file_handlers-Mitglied wird vom Browser gelesen, wenn die PWA installiert wird, und wird verwendet, um die Anwendung mit einer bestimmten Reihe von Dateitypen auf Betriebssystemebene zu verknüpfen.

Zum Beispiel kann eine PWA registriert werden, um Dateien zu verarbeiten, die dem text/plain MIME-Typ entsprechen. Sobald diese PWA installiert ist, kann das Betriebssystem sie verwenden, um Textdateien zu handhaben und die PWA zu öffnen, wenn der Benutzer eine Datei dieses Typs öffnet. Beachten Sie, dass auch andere Anwendungen als Textdatei-Handler registriert sein können und dass die Art und Weise, wie Betriebssysteme die Verknüpfung zwischen Dateitypen und Anwendungen verwalten und Benutzern erlauben, eine Anwendung zur Handhabung einer bestimmten Datei auszuwählen, von Gerät zu Gerät variieren kann.

Hinweis: Während das file_handlers-Mitglied verwendet wird, um eine PWA mit einer bestimmten Reihe von Dateitypen zu registrieren, führt dies nur dazu, dass das Betriebssystem die PWA startet, wenn eine passende Datei geöffnet wird. Die PWA muss dann tatsächlich die Datei mit JavaScript-Code verarbeiten. Siehe Handhabung der Dateien für weitere Informationen.

Werte

Ein Array von Objekten. Jedes Objekt im Array muss die folgenden Werte enthalten (action und accept sind erforderlich):

action

Ein String, der die URL enthält, zu der navigiert wird, wenn eine Datei gehandhabt wird. Diese URL muss innerhalb des Navigationsbereichs der PWA liegen, der die Menge von URLs darstellt, zu denen die PWA navigieren kann. Der Navigationsbereich einer PWA standardmäßig ist ihr start_url-Mitglied, kann aber auch durch Verwendung des scope-Mitglieds definiert werden.

accept

Ein Objekt. Für jede Eigenschaft im Objekt:

  • Der Eigenschaftsschlüssel ist ein MIME-Typ.
  • Der Eigenschaftswert ist ein Array von Strings, die Dateierweiterungen darstellen, die mit diesem MIME-Typ verbunden sind.

Beispiele

In diesem Beispiel deklariert ein Webapp-Manifest einen Datei-Handler, der die App registriert, um Audiodateien zu verarbeiten. Andere Manifest-Mitglieder wie name oder icons sind in diesem Beispiel zur Kürze nicht enthalten:

json
{
  "file_handlers": [
    {
      "action": "/handle-audio-file",
      "accept": {
        "audio/wav": [".wav"],
        "audio/x-wav": [".wav"],
        "audio/mpeg": [".mp3"],
        "audio/mp4": [".mp4"],
        "audio/aac": [".adts"],
        "audio/ogg": [".ogg"],
        "application/ogg": [".ogg"],
        "audio/webm": [".webm"],
        "audio/flac": [".flac"],
        "audio/mid": [".rmi", ".mid"]
      }
    }
  ]
}

Handhabung der Dateien

Um tatsächlich Datei-Handling in einer PWA zu implementieren, müssen Webentwickler auch window.launchQueue verwenden, um die eingehenden Dateien in ihrem Anwendungs-JavaScript-Code zu verarbeiten.

Die Handhabung von Dateien erfolgt im Anwendungscode, der auf dem Hauptthread läuft, nicht im Service Worker der Anwendung.

Im folgenden Beispiel wird window.launchQueue.setConsumer() verwendet, um eine Callback-Funktion festzulegen, die eingehende Audiodateien empfängt und die erste mit einem Audio-Element abspielt:

js
async function playSong(handledFile) {
  const blob = await handledFile.getFile();
  const url = window.URL.createObjectURL(blob);
  const audio = new Audio(url);
  audio.play();
}

if ("launchQueue" in window) {
  window.launchQueue.setConsumer((launchParams) => {
    if (launchParams.files && launchParams.files.length) {
      playSong(launchParams.files[0]);
    }
  });
}

Spezifikationen

Specification
Manifest Incubations
# file_handlers-member

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch