Manipular arquivos no Aplicativos Web Progressivo

Os Aplicativos Web progressivos que podem lidar com arquivos parecem mais nativos para os usuários e melhor integrados ao sistema operacional.

Os sites já podem permitir que os usuários carreguem arquivos usando o <input type="file"> ou arraste e solte, mas as PWAs vão mais longe e podem se registrar como manipuladores de arquivos no sistema operacional.

Quando um PWA é registrado como um manipulador de arquivos para determinados tipos de arquivo, o sistema operacional pode iniciar automaticamente o aplicativo quando esses arquivos são abertos .docx pelo usuário, semelhante à forma como o Microsoft Word manipula arquivos.

Definir quais arquivos seu aplicativo manipula

A primeira coisa a fazer é declarar quais tipos de arquivos seu aplicativo manipula. Isso é feito no arquivo de manifesto do aplicativo, usando o membro da file_handlers matriz.

Cada entrada na file_handlers matriz precisa ter duas propriedades:

• action: a URL para a qual o sistema operacional deve navegar ao iniciar seu PWA.
• accept: um objeto de tipos de arquivo aceitos. As chaves são tipos MIME (tipos parciais, usando o símbolo *curinga , são aceitos) e os valores são matrizes de extensões de arquivo aceitas.

Considere o exemplo seguinte:

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

Neste exemplo, o aplicativo registra um único manipulador de arquivos para o qual aceita arquivos de texto. Quando um .txt arquivo é aberto pelo usuário, por exemplo, clicando duas vezes em seu ícone na área de trabalho, o sistema operacional inicia o aplicativo usando a /openFile URL.

Detectar se a API de Tratamento de Arquivos está disponível

Antes de lidar com os arquivos, seu aplicativo precisa marcar se a API de Tratamento de Arquivos está disponível no dispositivo e no navegador.

Para marcar se a API de Tratamento de Arquivos está disponível, teste se o launchQueue objeto existe, da seguinte maneira:

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

Manipular arquivos no início

Quando seu aplicativo é iniciado pelo sistema operacional após a abertura de um arquivo, você pode usar o launchQueue objeto para acessar o conteúdo do arquivo.

Use o seguinte código JavaScript para processar o conteúdo do 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}`);
    }
}

O launchQueue objeto enfileira todos os arquivos iniciados até que um consumidor seja definido com setConsumer. Para saber mais sobre os launchQueue objetos e launchParams , acesse o explicador de Tratamento de Arquivos.

Demonstração

My Tracks é um aplicativo de demonstração PWA que usa o recurso Tratamento de Arquivos para manipular .gpx arquivos. Para experimentar o recurso com este aplicativo de demonstração:

• Acesse Minhas Faixas e instale o aplicativo.
• Baixe um arquivo GPX no computador. Você pode usar este arquivo GPX de teste.
• Abra o arquivo GPX baixado.

Observe que o aplicativo é iniciado automaticamente e que o Microsoft Edge solicita sua permissão para lidar com esse arquivo.

Se você permitir que o aplicativo manipule o arquivo, uma nova entrada será exibida na barra lateral do aplicativo e poderá clicar na caixa de seleção ao lado dele para visualizar a faixa de GPS correspondente.

O código-fonte deste aplicativo pode ser acessado no repositório GitHub Minhas Faixas.

• O arquivo de origem manifest.json usa a file_handlers matriz para solicitar o tratamento de .gpx arquivos.
• O arquivo de origemfile.jsusa o launchQueue objeto para lidar com arquivos de entrada.