Processar ficheiros em Aplicações Web Progressivas

As Aplicações Web Progressivas que conseguem processar ficheiros sentem-se mais nativas dos utilizadores e melhor integradas no sistema operativo.

Os sites já podem permitir que os utilizadores carreguem ficheiros com o <input type="file"> ou arrastem e larguem, mas os PWAs vão um passo mais além e podem registar-se como processadores de ficheiros no sistema operativo.

Quando um PWA é registado como um processador de ficheiros para determinados tipos de ficheiro, o sistema operativo pode iniciar automaticamente a aplicação quando esses ficheiros são abertos pelo utilizador, de forma semelhante à forma como o Microsoft Word processa ficheiros .docx .

Definir os ficheiros que a sua aplicação processa

A primeira coisa a fazer é declarar os tipos de ficheiros que a sua aplicação processa. Isto é feito no ficheiro de manifesto da aplicação com o membro da file_handlers matriz. Cada entrada na file_handlers matriz tem de ter duas propriedades:

• action: o URL para o qual o sistema operativo deve navegar ao iniciar o PWA.
• accept: um objeto de tipos de ficheiro aceites. As chaves são tipos mime (tipos parciais, com o símbolo *de caráter universal , são aceites) e os valores são matrizes de extensões de ficheiro aceites.

Considere o exemplo seguinte:

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

Neste exemplo, a aplicação regista um único processador de ficheiros que aceita ficheiros de texto. Quando um .txt ficheiro é aberto pelo utilizador, por exemplo, fazendo duplo clique no respetivo ícone no ambiente de trabalho, o sistema operativo inicia a aplicação com o /openFile URL.

Veja também:

• Associe a sua aplicação a ficheiros em Utilizar um manifesto de aplicação Web para integrar um PWA no SO.

Detetar se a API de Processamento de Ficheiros está disponível

Antes de processar os ficheiros, a aplicação tem de verificar se a API de Processamento de Ficheiros está disponível no dispositivo e no browser.

Para verificar se a API de Processamento de Ficheiros está disponível, teste se o launchQueue objeto existe, da seguinte forma:

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

Processar ficheiros ao iniciar

Quando a aplicação é iniciada pelo SO após a abertura de um ficheiro, pode utilizar o launchQueue objeto para aceder ao conteúdo do ficheiro.

Utilize 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 coloca todos os ficheiros iniciados em fila até que um consumidor seja definido com setConsumer. Para saber mais sobre os launchQueue objetos e launchParams , aceda ao explicador Processamento de Ficheiros.

Demonstração

My Tracks é uma aplicação de demonstração do PWA que utiliza a funcionalidade Processamento de Ficheiros para processar .gpx ficheiros. Para experimentar a funcionalidade com esta aplicação de demonstração:

• Aceda a As Minhas Faixas e instale a aplicação.
• Transfira um ficheiro GPX no seu computador. Pode utilizar este ficheiro GPX de teste.
• Abra o ficheiro GPX transferido.

Repare que a aplicação é iniciada automaticamente e que o Microsoft Edge pede a sua permissão para processar este ficheiro.

Se permitir que a aplicação processe o ficheiro, é apresentada uma nova entrada na barra lateral da aplicação e pode clicar na caixa de verificação junto ao mesmo para visualizar a faixa gps correspondente.

O código fonte desta aplicação pode ser acedido no repositório do GitHub As Minhas Faixas.

• O manifest.json ficheiro de origem utiliza a file_handlers matriz para pedir o processamento .gpx de ficheiros.
• O file.js ficheiro de origem utiliza o launchQueue objeto para processar ficheiros recebidos.