Behandeln von Dateien in einer PWA

Eine progressive Web-App (PWA), die Dateien verarbeiten kann, fühlt sich für Benutzer nativ an und ist besser in das Betriebssystem integriert.

Websites können es Benutzern bereits ermöglichen, Dateien mithilfe von <input type="file"> drag and drop hochzuladen, aber PWAs gehen noch einen Schritt weiter und können sich als Dateihandler auf dem Betriebssystem registrieren.

Wenn ein PWA als Dateihandler für bestimmte Dateitypen registriert ist, kann das Betriebssystem die App automatisch starten, wenn diese Dateien vom Benutzer geöffnet werden, ähnlich wie Microsoft Word Dateien behandelt.docx.

Definieren der Von der App verarbeiteten Dateien

Zunächst müssen Sie deklarieren, welche Dateitypen ihre App verarbeitet. Dies erfolgt in Ihrer App-Manifestdatei mithilfe des file_handlers Arrayelements. Jeder Eintrag im file_handlers Array muss über zwei Eigenschaften verfügen:

• action: Die URL, zu der das Betriebssystem navigieren soll, wenn Sie Ihre PWA starten.
• accept: Ein Objekt akzeptierter Dateitypen. Schlüssel sind MIME-Typen (Partielle Typen, die das Wildcardsymbol *verwenden, werden akzeptiert), und Werte sind Arrays akzeptierter Dateierweiterungen.

Betrachten Sie das folgende Beispiel:

{
    "file_handlers": [
        {
            "action": "/openFile",
            "accept": {
                "text/*": [
                    ".txt"
                ]
            }
        }
    ]
}

In diesem Beispiel registriert die App einen einzelnen Dateihandler für , der Textdateien akzeptiert. Wenn eine .txt Datei vom Benutzer z. B. durch Doppelklicken auf das Symbol auf dem Desktop geöffnet wird, startet das Betriebssystem die App mithilfe der /openFile URL.

Siehe auch:

• Ordnen Sie Ihrer PWA Dateien unter MDN > References > Progressive Web-Apps zu.
• file_handlers unter MDN > References > Web-App-Manifeste.

Ermitteln, ob die Dateibehandlungs-API verfügbar ist

Vor der Verarbeitung der Dateien muss Ihre App überprüfen, ob die Dateiverarbeitungs-API auf dem Gerät und im Browser verfügbar ist.

Um zu überprüfen, ob die Dateiverarbeitungs-API verfügbar ist, testen Sie wie folgt, ob das launchQueue Objekt vorhanden ist:

if ('launchQueue' in window) {
    console.log('File Handling API is supported!');
} else {
    console.error('File Handling API is not supported!');
}

Behandeln von Dateien beim Start

Wenn Ihre App vom Betriebssystem gestartet wird, nachdem eine Datei geöffnet wurde, können Sie das launchQueue -Objekt verwenden, um auf den Dateiinhalt zuzugreifen.

Verwenden Sie den folgenden JavaScript-Code, um den Textinhalt zu verarbeiten:

if ('launchQueue' in window) {
    console.log('File Handling API is supported!');

    launchQueue.setConsumer(launchParams => {
        handleFiles(launchParams.files);
    });
} else {
    console.error('File Handling API is not supported!');
}

async function handleFiles(files) {
    for (const file of files) {
        const blob = await file.getFile();
        blob.handle = file;
        const text = await blob.text();

        console.log(`${file.name} handled, content: ${text}`);
    }
}

Das launchQueue -Objekt stellt alle gestarteten Dateien in die Warteschlange, bis ein Consumer auf setConsumerfestgelegt ist. Weitere Informationen zu den launchQueue Objekten und launchParams finden Sie im Erläuterungsmodul zur Dateiverarbeitung.

Demo-App für PWA-Dateihandler

Die Demo-App für PWA-Dateihandler :

• /pwa-file-handlers/ – Infodatei und Quellcode.
• Demo zu PWA-Dateihandlern – Livedemo.

So verwenden Sie die Demo:

1. Wechseln Sie in einem neuen Fenster oder einer neuen Registerkarte zur Demo für PWA-Dateihandler .

   Installieren Sie die Demo-App:

2. Klicken Sie in der Adressleiste auf die verfügbare App. Installieren Sie die Demo für PWA-Dateihandler (").

   Das Dialogfeld Demo-App zum Installieren von PWA-Dateihandlern wird in Edge geöffnet.

3. Klicken Sie auf die Schaltfläche Installieren .

   Das Fenster der Demo-App für PWA-Dateihandler wird geöffnet. Das Dialogfeld App installiert wird geöffnet.

4. Klicken Sie auf die Schaltfläche Zulassen .

   Im Dialogfeld Windows-Apps werden Sie gefragt, ob Sie die Demo an die Taskleiste anheften möchten.

5. Klicken Sie auf die Schaltfläche Ja .

6. Schließen Sie die Demo-App für PWA-Dateihandler .

   Erstellen Sie eine Textdatei:

   Wenn Sie bereits über eine Textdatei verfügen, können Sie sie verwenden. In den folgenden Schritten verwenden wir Visual Studio Code, um eine Textdatei mit dem Namen test.txt im Documents Ordner zu erstellen.

7. Öffnen Sie Visual Studio Code.

8. Klicken Sie auf das Menü Datei und dann auf Neue Textdatei.

9. Fügen Sie der Datei Text hinzu, z. B.:

   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
   
   * Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
   
   * Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   
   

10. Klicken Sie auf das Menü Datei und dann auf Speichern.

    Das Dialogfeld Speichern unter wird geöffnet.

11. Navigieren Sie zu einem Verzeichnis wie C:\Users\localAccount\Documents\.

12. Geben Sie im Kombinationsfeld Dateiname ein test.

13. Wählen Sie im Kombinationsfeld Dateityp die Option Nur-Text (*.txt) aus.

14. Klicken Sie auf die Schaltfläche Speichern .

    Das Dialogfeld wird geschlossen.

15. Klicken Sie auf der Registerkartetest.txt auf die Schaltfläche Schließen ().

    Öffnen Sie die Textdatei, und geben Sie die App Öffnen mit an:

16. Klicken Sie auf der Windows-Taskleiste auf die Schaltfläche Start, geben Sie Explorer ein, und klicken Sie dann auf Öffnen.

    Explorer wird geöffnet.

17. Navigieren Sie zu dem Verzeichnis, das die Textdatei enthält, z C:\Users\localAccount\Documents\. B. .

18. Klicken Sie mit der rechten Maustaste auf die Textdatei (ztest.txt. B. ), und wählen Sie dannMit PWA-Dateihandler-Demoöffnen> aus.

    Alternativ können Sie auf die Textdatei doppelklicken.

    Ein Microsoft Edge-Dialogfeld wird geöffnet, in dem Sie gefragt werden, ob die Textdatei in dieser Web-App geöffnet und bearbeitet werden soll:

    

19. Klicken Sie auf die Schaltfläche Öffnen .

    Die Demo-App für PWA-Dateihandler wird geöffnet und zeigt den .txt Dateinamen und den Textinhalt der Datei an: