Controlar archivos en un PWA

Una aplicación web progresiva (PWA) que puede controlar archivos se siente más nativa para los usuarios y mejor integrada en el sistema operativo.

Los sitios web ya pueden permitir a los usuarios cargar archivos mediante o <input type="file"> arrastrar y colocar, pero las PWA van un paso más allá y pueden registrarse como controladores de archivos en el sistema operativo.

Cuando un PWA se registra como controlador de archivos para determinados tipos de archivo, el sistema operativo puede iniciar automáticamente la aplicación cuando el usuario abre esos archivos, de forma similar a como Microsoft Word controla .docx los archivos.

Definir qué archivos controla la aplicación

Lo primero que hay que hacer es declarar qué tipos de archivos controla la aplicación. Esto se hace en el archivo de manifiesto de la aplicación, mediante el miembro de file_handlers matriz. Cada entrada de la file_handlers matriz debe tener dos propiedades:

• action: dirección URL a la que debe navegar el sistema operativo al iniciar la PWA.
• accept: objeto de tipos de archivo aceptados. Las claves son tipos MIME (se aceptan tipos parciales, con el símbolo *comodín , y los valores son matrices de extensiones de archivo aceptadas.

Veamos el ejemplo siguiente:

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

En este ejemplo, la aplicación registra un único controlador de archivos para que acepte archivos de texto. Cuando el usuario abre un .txt archivo; por ejemplo, al hacer doble clic en su icono en el escritorio, el sistema operativo inicia la aplicación mediante la /openFile dirección URL.

Vea también:

• Asocie archivos con su PWA en las aplicaciones web progresivas de referencias > de MDN>.
• file_handlers en los manifiestos de la aplicación web referencias > de MDN>.

Detectar si la API de control de archivos está disponible

Antes de controlar los archivos, la aplicación debe comprobar si la API de control de archivos está disponible en el dispositivo y el explorador.

Para comprobar si la API de control de archivos está disponible, compruebe si el launchQueue objeto existe, como se indica a continuación:

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

Control de archivos al iniciar

Cuando el sistema operativo inicia la aplicación después de abrir un archivo, puede usar el launchQueue objeto para acceder al contenido del archivo.

Use el siguiente código JavaScript para procesar el contenido de texto:

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

El launchQueue objeto pone en cola todos los archivos iniciados hasta que se establece un consumidor con setConsumer. Para obtener más información sobre los launchQueue objetos y launchParams , vaya al explicador de control de archivos.

Aplicación de demostración de controladores de archivos PWA

La aplicación de demostración de controladores de archivos PWA :

• /pwa-file-handlers/ - Léame y código fuente.
• Demostración de controladores de archivos PWA : demostración en vivo.

Para usar la demostración:

1. Vaya a la demostración de controladores de archivos PWA en una nueva ventana o pestaña.

   Instale la aplicación de demostración:

2. En la barra De direcciones, haga clic en la aplicación disponible. Instalar el botón demostración de controladores de archivos PWA ().

   Se abre el cuadro de diálogo Instalar aplicación de demostración de controladores de archivos PWA en Edge.

3. Haga clic en el botón Instalar .

   Se abre la ventana de la aplicación de demostración de controladores de archivos PWA . Se abre el cuadro de diálogo Aplicación instalada .

4. Haga clic en el botón Permitir .

   El cuadro de diálogo Aplicaciones de Windows le pregunta si desea anclar la demostración a la barra de tareas.

5. Haga clic en el botón Sí .

6. Cierre la aplicación de demostración de controladores de archivos PWA .

   Cree un archivo de texto:

   Si tiene un archivo de texto existente, puede usarlo. En los pasos siguientes, usaremos Visual Studio Code para crear un archivo de texto denominado test.txt en la Documents carpeta .

7. Abrir Visual Studio Code.

8. Haga clic en el menú Archivo y, a continuación, haga clic en Nuevo archivo de texto.

9. Agregue texto en el archivo, como:

   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. Haga clic en el menú Archivo y, a continuación, haga clic en Guardar.

    Se abrirá el cuadro de diálogo Guardar como.

11. Vaya a un directorio como C:\Users\localAccount\Documents\.

12. En el cuadro combinado Nombre de archivo, escriba test.

13. En el cuadro combinado Guardar como tipo , seleccione Texto sin formato (*.txt).

14. Haga clic en el botón Guardar .

    Se cierra el cuadro de diálogo.

15. En la pestaña test.txt , haga clic en el botón Cerrar ().

    Abra el archivo de texto y especifique la aplicación Abrir con:

16. En la barra de tareas de Windows, haga clic en el botón Inicio, escriba Explorador de archivos y, a continuación, haga clic en Abrir.

    Explorador de archivos se abre.

17. Vaya al directorio que contiene el archivo de texto, como C:\Users\localAccount\Documents\.

18. Haga clic con el botón derecho en el archivo de texto (como test.txt) y, a continuación, seleccione Open withPWA file handlers demo (Abrir con> controladores de archivos PWA).

    O bien, haga doble clic en el archivo de texto.

    Se abre un cuadro de diálogo de Microsoft Edge que le pregunta si desea abrir y editar el archivo de texto en esta aplicación web:

    

19. Haga clic en el botón Abrir .

    Se abre la aplicación de demostración de controladores de archivos PWA , que muestra el .txt nombre de archivo y el contenido de texto del archivo: