Gérer des fichiers dans une PWA

Une application web progressive (PWA) capable de gérer des fichiers semble plus native pour les utilisateurs et mieux intégrée au système d’exploitation.

Les sites web peuvent déjà permettre aux utilisateurs de charger des fichiers à l’aide du <input type="file"> glisser-déplacer ou , mais les PWA vont encore plus loin et peuvent s’inscrire en tant que gestionnaires de fichiers sur le système d’exploitation.

Lorsqu’une PWA est inscrite en tant que gestionnaire de fichiers pour certains types de fichiers, le système d’exploitation peut lancer automatiquement l’application lorsque ces fichiers sont ouverts par l’utilisateur, comme Microsoft Word gère les .docx fichiers.

Définir les fichiers gérés par votre application

La première chose à faire consiste à déclarer les types de fichiers gérés par votre application. Cette opération s’effectue dans votre fichier manifeste d’application, à l’aide du membre du file_handlers tableau. Chaque entrée du file_handlers tableau doit avoir deux propriétés :

• action: URL vers laquelle le système d’exploitation doit accéder lors du lancement de votre PWA.
• accept: objet de types de fichiers acceptés. Les clés sont de type MIME (les types partiels, qui utilisent le symbole *générique , sont acceptés) et les valeurs sont des tableaux d’extensions de fichier acceptées.

Prenons l'exemple suivant :

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

Dans cet exemple, l’application inscrit un seul gestionnaire de fichiers pour qui accepte les fichiers texte. Lorsqu’un .txt fichier est ouvert par l’utilisateur, par exemple en double-cliquant sur son icône sur le bureau, le système d’exploitation lance l’application à l’aide de l’URL /openFile .

Voir aussi :

• Associez des fichiers à votre PWA sur MDN > References > Progressive web apps.
• file_handlers dans les manifestes d’application web références > MDN>.

Détecter si l’API de gestion des fichiers est disponible

Avant de gérer les fichiers, votre application doit case activée si l’API gestion des fichiers est disponible sur l’appareil et le navigateur.

Pour case activée si l’API de gestion de fichiers est disponible, testez si l’objet launchQueue existe, comme suit :

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

Gérer les fichiers au lancement

Lorsque votre application est lancée par le système d’exploitation après l’ouverture d’un fichier, vous pouvez utiliser l’objet launchQueue pour accéder au contenu du fichier.

Utilisez le code JavaScript suivant pour traiter le contenu du texte :

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}`);
    }
}

L’objet launchQueue met en file d’attente tous les fichiers lancés jusqu’à ce qu’un consommateur soit défini avec setConsumer. Pour en savoir plus sur les launchQueue objets et launchParams , accédez à l’explicatif Gestion des fichiers.

Application de démonstration des gestionnaires de fichiers PWA

L’application de démonstration des gestionnaires de fichiers PWA :

• /pwa-file-handlers/ - Fichier lisez-moi et code source.
• Démonstration des gestionnaires de fichiers PWA - démonstration en direct.

Pour utiliser la démonstration :

1. Accédez à la démonstration des gestionnaires de fichiers PWA dans une nouvelle fenêtre ou un nouvel onglet.

   Installez l’application de démonstration :

2. Dans la barre d’adresse, cliquez sur l’application disponible. Bouton Installer la démonstration des gestionnaires de fichiers PWA ().

   La boîte de dialogue Installer l’application de démonstration des gestionnaires de fichiers PWA s’ouvre dans Edge.

3. Cliquez sur le bouton Installer .

   La fenêtre d’application de démonstration des gestionnaires de fichiers PWA s’ouvre. La boîte de dialogue Application installée s’ouvre.

4. Cliquez sur le bouton Autoriser .

   La boîte de dialogue Applications Windows vous invite à épingler la démonstration à la barre des tâches.

5. Cliquez sur le bouton Oui .

6. Fermez l’application de démonstration des gestionnaires de fichiers PWA .

   Créez un fichier texte :

   Si vous avez un fichier texte existant, vous pouvez l’utiliser. Dans les étapes suivantes, nous allons utiliser Visual Studio Code pour créer un fichier texte nommé test.txt dans le Documents dossier .

7. Ouvrez Visual Studio Code.

8. Cliquez sur le menu Fichier , puis sur Nouveau fichier texte.

9. Ajoutez du texte dans le fichier, par exemple :

   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. Cliquez sur le menu Fichier , puis sur Enregistrer.

    La boîte de dialogue Enregistrer en tant que s’ouvre.

11. Accédez à un répertoire tel que C:\Users\localAccount\Documents\.

12. Dans la zone de liste déroulante Nom de fichier, tapez test.

13. Dans la zone de liste déroulante Type de fichier, sélectionnez Texte brut (*.txt).

14. Cliquez sur le bouton Enregistrer .

    La boîte de dialogue se ferme.

15. Sous l’onglet test.txt , cliquez sur le bouton Fermer ().

    Ouvrez le fichier texte et spécifiez l’application Ouvrir avec :

16. Dans la barre des tâches Windows, cliquez sur le bouton Démarrer, tapez Explorateur de fichiers, puis cliquez sur Ouvrir.

    Explorateur de fichiers s’ouvre.

17. Accédez au répertoire qui contient le fichier texte, par C:\Users\localAccount\Documents\exemple .

18. Cliquez avec le bouton droit sur le fichier texte (par test.txtexemple), puis sélectionnez Ouvrir avec> ladémonstration des gestionnaires de fichiers PWA.

    Ou double-cliquez sur le fichier texte.

    Une boîte de dialogue Microsoft Edge s’ouvre et vous demande s’il faut ouvrir et modifier le fichier texte dans cette application web :

    

19. Cliquez sur le bouton Ouvrir .

    L’application de démonstration des gestionnaires de fichiers PWA s’ouvre, affichant le .txt nom du fichier et le contenu texte du fichier :