Manipular arquivos em um PWA

Um PWA (Aplicativo Web Progressivo) que pode lidar com arquivos parece mais nativo para os usuários e melhor integrado ao sistema operacional.

Os sites já podem permitir que os usuários carreguem arquivos usando o ou arrastar e soltar, mas os <input type="file">PWAs vão um passo além 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 pelo usuário, semelhante à forma como o Microsoft Word lida com .docx 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 dos tipos de arquivo aceitos. As chaves são do tipo 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 que 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.

Veja também:

• Associar arquivos ao seu PWA no MDN > Referências > Aplicativos Web progressivos.
• file_handlers no MDN > Referências Manifestos > do aplicativo Web.

Detectar se a API de manipulação de arquivos está disponível

Antes de manipular os arquivos, seu aplicativo precisa marcar se a API de manipulação 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 na inicialização

Quando seu aplicativo é iniciado pelo sistema operacional depois que um arquivo foi aberto, você pode usar o launchQueue objeto para acessar o conteúdo do arquivo.

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

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

Aplicativo de demonstração de manipuladores de arquivos PWA

O aplicativo de demonstração dos manipuladores de arquivos PWA :

• /pwa-file-handlers/ - Leiame e código-fonte.
• Demonstração dos manipuladores de arquivos PWA - demonstração ao vivo.

Para usar a demonstração:

1. Vá para a demonstração dos manipuladores de arquivos do PWA em uma nova janela ou guia.

   Instale o aplicativo de demonstração:

2. Na barra de endereços, clique no aplicativo disponível. Instalar o botão de demonstração dos manipuladores de arquivos do PWA ().

   A caixa de diálogo Instalar aplicativo de demonstração dos manipuladores de arquivos do PWA é aberta no Edge.

3. Clique no botão Instalar .

   A janela do aplicativo de demonstração de manipuladores de arquivos PWA é aberta. A caixa de diálogo Aplicativo instalado é aberta.

4. Clique no botão Permitir .

   A caixa de diálogo Aplicativos do Windows pergunta se a demonstração deve ser fixada na barra de tarefas.

5. Clique no botão Sim .

6. Feche o aplicativo de demonstração de manipuladores de arquivos PWA .

   Crie um arquivo de texto:

   Se você tiver um arquivo de texto existente, poderá usá-lo. Nas etapas a seguir, usaremos o Documents Visual Studio Code para criar um arquivo de texto nomeado test.txt na pasta.

7. Abra o Visual Studio Code.

8. Clique no menu Arquivo e em Novo Arquivo de Texto.

9. Adicione texto no arquivo, 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 Arquivo e em Salvar.

    A caixa de diálogo Salvar como é aberta.

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

12. Na caixa de combinação Nome do arquivo , digite test.

13. Na caixa de combinação Salvar como tipo, selecione Texto sem formatação (*.txt).

14. Clique no botão Salvar .

    A caixa de diálogo é fechada.

15. Na guia test.txt , clique no botão Fechar (ícone de ).

    Abra o arquivo de texto e especifique o aplicativo Abrir com:

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

    O Explorador de Arquivos é aberto.

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

18. Clique com o botão direito do mouse no arquivo de texto (como test.txt) e selecione Abrir com>demonstração de manipuladores de arquivos PWA.

    Ou clique duas vezes no arquivo de texto.

    Uma caixa de diálogo do Microsoft Edge é aberta, perguntando se deseja abrir e editar o arquivo de texto neste aplicativo Web:

    

19. Clique no botão Abrir .

    O aplicativo de demonstração de manipuladores de arquivos PWA é aberto, exibindo o nome do .txt arquivo e o conteúdo de texto do arquivo: