Processar ficheiros num PWA

Uma Aplicação Web Progressiva (PWA) que consiga processar ficheiros sente-se mais nativa dos utilizadores e melhor integrada 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 ficheiros ao seu PWA em Aplicações Web Progressivas de Referências > do MDN>.
• file_handlers nos manifestos da aplicação Web referências > MDN>.

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

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

Para marcar 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.

Aplicação de demonstração de processadores de ficheiros PWA

A aplicação de demonstração de processadores de ficheiros PWA :

• /pwa-file-handlers/ - Readme e código fonte.
• Demonstração dos processadores de ficheiros PWA – demonstração em direto.

Para utilizar a demonstração:

1. Aceda à demonstração de processadores de ficheiros PWA numa nova janela ou separador.

   Instale a aplicação de demonstração:

2. Na Barra de endereço, clique na Aplicação disponível. Botão Instalar demonstração de processadores de ficheiros PWA ().

   A caixa de diálogo Instalar processadores de ficheiros PWA é aberta no Edge.

3. Clique no botão Instalar .

   É aberta a janela da aplicação de demonstração processadores de ficheiros PWA . É aberta a caixa de diálogo Aplicação instalada .

4. Clique no botão Permitir .

   A caixa de diálogo Aplicações do Windows indica-lhe se deve afixar a demonstração à barra de tarefas.

5. Clique no botão Sim .

6. Feche a aplicação de demonstração processadores de ficheiros PWA .

   Criar um ficheiro de texto:

   Se tiver um ficheiro de texto existente, pode utilizá-lo. Nos passos seguintes, vamos utilizar Visual Studio Code para criar um ficheiro de texto com o nome test.txt na Documents pasta.

7. Abra o Visual Studio Code.

8. Clique no menu Ficheiro e, em seguida, clique em Novo Ficheiro de Texto.

9. Adicione texto ao ficheiro, 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. Clique no menu Ficheiro e, em seguida, clique em Guardar.

    A caixa de diálogo Guardar Como é aberta.

11. Navegue para um diretório como C:\Users\localAccount\Documents\.

12. Na caixa de combinação Nome do ficheiro , escreva test.

13. Na caixa de combinação Guardar com o tipo , selecione Texto simples (*.txt).

14. Clique no botão Guardar .

    A caixa de diálogo é fechada.

15. No separador test.txt , clique no botão Fechar ().

    Abra o ficheiro de texto e especifique a aplicação Abrir Com:

16. Na Barra de Tarefas do Windows, clique no botão Iniciar, escreva Explorador de Arquivos e, em seguida, clique em Abrir.

    Explorador de Arquivos é aberto.

17. Navegue para o diretório que contém o ficheiro de texto, como C:\Users\localAccount\Documents\.

18. Clique com o botão direito do rato no ficheiro de texto (como test.txt) e, em seguida, selecione Abrir com> ademonstração de processadores de ficheiros PWA.

    Em alternativa, faça duplo clique no ficheiro de texto.

    É aberta uma caixa de diálogo do Microsoft Edge a perguntar se pretende abrir e editar o ficheiro de texto nesta aplicação Web:

    

19. Clique no botão Abrir .

    A aplicação de demonstração processadores de ficheiros PWA é aberta, apresentando o nome do .txt ficheiro e o conteúdo de texto do ficheiro: