Permitir que aplicativos da Web instalados sejam gerenciadores de arquivos

Registrar um app como um gerenciador de arquivos no sistema operacional.

Thomas Steiner

Agora que os apps da Web são capazes de ler e gravar arquivos, a próxima lógica é permitir que os desenvolvedores declarem esses aplicativos da Web como gerenciadores dos arquivos que eles podem criar e processar. A API File Handling permite que você faça exatamente isso. Depois de registrar uma mensagem de texto editor de arquivos como gerenciador de arquivos e, depois de instalá-lo, clique com o botão direito do mouse em um arquivo .txt no macOS e selecione "Obter informações" para instruir o SO a sempre abrir arquivos .txt com esse app como padrão.

Casos de uso sugeridos para a API File Handling

Exemplos de sites que podem usar essa API incluem:

  • Aplicativos do Office, como editores de texto, de planilhas e criadores de apresentações de slides.
  • Editores gráficos e ferramentas de desenho.
  • Ferramentas de edição de níveis de videogames.

Como usar a API File Handling

Aprimoramento progressivo

A API File Handling não pode ser polyfill, por si só. A funcionalidade de abrir arquivos usando uma app, no entanto, pode ser alcançado de duas outras formas:

  • A API Web Share Target permite que os desenvolvedores especifiquem o app como um alvo de compartilhamento. para que os arquivos possam ser abertos na planilha de compartilhamento do sistema operacional.
  • A API File System Access pode ser integrada com o recurso de arrastar e soltar arquivos. os desenvolvedores podem lidar com arquivos descartados no aplicativo já aberto.

Suporte ao navegador

Compatibilidade com navegadores

  • Chrome: 102
  • Borda: 102.
  • Firefox: incompatível.
  • Safari: incompatível.

Origem

Detecção de recursos

Para verificar se a API File Handling é compatível, use:

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  // The File Handling API is supported.
}

A parte declarativa da API File Handling

Como primeira etapa, os apps da Web precisam descrever de maneira declarativa no manifesto do app da Web. e o tipo de arquivo que eles podem manipular. A API File Handling estende o manifesto do aplicativo web com um novo chamada "file_handlers", que aceita uma matriz de gerenciadores de arquivos. Um gerenciador de arquivos é um objeto com estas propriedades:

  • Uma propriedade "action" que aponta para um URL no escopo do app como o valor dele.
  • Uma propriedade "accept" com um objeto de tipos MIME como chaves e listas de extensões de arquivo como as e a distribuição dos valores dos dados.
  • Uma propriedade "icons" com uma matriz de ImageResource ícones. Alguns sistemas operacionais permitem que uma associação de tipo de arquivo exiba um ícone que não é apenas o ícone do aplicativo associado, mas um ícone especial relacionado ao uso daquele tipo de arquivo com o aplicativo.
  • Uma propriedade "launch_type" que define se vários arquivos precisam ser abertos em um único ou em vários clientes. O padrão é "single-client". Se o usuário abre vários arquivos e se o gerenciador de arquivos foi anotado com "multiple-clients" como na "launch_type", mais de uma inicialização do app vai ocorrer e, para cada inicialização, Matriz LaunchParams.files (consulte mais abaixo) terá apenas um elemento.

O exemplo abaixo, que mostra apenas o trecho relevante do manifesto do app da Web, deve tornar mais claras:

{
  "file_handlers": [
    {
      "action": "/open-csv",
      "accept": {
        "text/csv": [".csv"]
      },
      "icons": [
        {
          "src": "csv-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-svg",
      "accept": {
        "image/svg+xml": ".svg"
      },
      "icons": [
        {
          "src": "svg-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "single-client"
    },
    {
      "action": "/open-graf",
      "accept": {
        "application/vnd.grafr.graph": [".grafr", ".graf"],
        "application/vnd.alternative-graph-app.graph": ".graph"
      },
      "icons": [
        {
          "src": "graf-icon.png",
          "sizes": "256x256",
          "type": "image/png"
        }
      ],
      "launch_type": "multiple-clients"
    }
  ]
}

Isto é para um aplicativo hipotético que lida com arquivos de valores separados por vírgula (.csv) em /open-csv, arquivos de gráficos vetoriais escalonáveis (.svg) em /open-svg e um formato de arquivo Grafr fictício com qualquer .grafr, .graf ou .graph como extensão em /open-graf. As duas primeiras serão abertas em um único cliente, o último em vários clientes se vários arquivos estiverem sendo gerenciados.

A parte imperativa da API File Handling

Agora que o app declarou quais arquivos pode gerenciar em qual URL em escopo, ele precisa fazer algo com os arquivos recebidos na prática. É aqui que o launchQueue vem. em ação. Para acessar os arquivos iniciados, um site precisa especificar um consumidor para o window.launchQueue objeto. As inicializações ficam na fila até serem processadas pelo consumidor especificado, que é invocado exatamente uma vez para cada lançamento. Dessa forma, todos os lançamentos são tratados, independentemente de quando consumidor foi especificado.

if ('launchQueue' in window && 'files' in LaunchParams.prototype) {
  launchQueue.setConsumer((launchParams) => {
    // Nothing to do when the queue is empty.
    if (!launchParams.files.length) {
      return;
    }
    for (const fileHandle of launchParams.files) {
      // Handle the file.
    }
  });
}

Suporte ao DevTools

Não havia suporte para o DevTools no momento desta gravação, mas registrei um solicitação de recurso para que o suporte seja adicionados.

Demonstração

Adicionei suporte ao gerenciamento de arquivos ao Excalidraw, um app de desenho animado. Para testar, primeiro instale o Excalidraw. Quando você cria um arquivo com ele e o armazena em algum lugar seu sistema de arquivos, abra o arquivo com um clique duplo ou clique com o botão direito do mouse e selecione "Excalidraw" no menu de contexto. Confira a implementação na fonte o código-fonte.

Janela do localizador do macOS com um arquivo do Excalidraw.
Clique duas vezes ou com o botão direito do mouse em um arquivo no explorador de arquivos do seu sistema operacional.
.
O menu de contexto exibido ao clicar com o botão direito do mouse em um arquivo com o item Abrir com... Excalidraw destacado.
O Excalidraw é o gerenciador padrão para arquivos .excalidraw.

Segurança

A equipe do Chrome projetou e implementou a API File Handling usando os princípios fundamentais definidos em Como controlar o acesso a recursos avançados da Web Platform, incluindo controle de usuário, transparência e ergonomia.

Permissões, persistência de permissões e atualizações do gerenciador de arquivos

Para garantir a confiança do usuário e a segurança dos usuários arquivos, quando a API File Handling abre um arquivo, um prompt de permissão é exibido antes que um PWA possa visualizar um arquivo. Esta solicitação de permissão será mostrada logo após o usuário selecionar o PWA para abrir um arquivo, de modo que a permissão seja rigidamente acoplada ao ação de abrir um arquivo usando o PWA, tornando-o mais compreensível e relevante.

Essa permissão aparece sempre até o usuário clicar em Permitir ou Bloquear o processamento de arquivos. para o site, ou ignora a solicitação três vezes (depois disso, o Chromium embarga e bloqueia permissão). A configuração selecionada será mantida após o fechamento e a reabertura do PWA.

Quando o manifesto for atualizado e modificado na seção "file_handlers", as permissões será redefinida.

Há uma grande categoria de vetores de ataque que são abertos ao permitir que os sites acessem arquivos. Eles estão descritos nos artigo sobre a API File System Access. A capacidade adicional de segurança que a API File Handling oferece no sistema de arquivos A API Access é a capacidade de conceder acesso a determinados arquivos pela interface em vez de um seletor de arquivos mostrado por um aplicativo da Web.

Ainda há o risco de os usuários concederem, sem querer, a um aplicativo da Web acesso a um arquivo antes de abri-lo. No entanto, geralmente se entende que abrir um arquivo permite que o aplicativo ao qual ele está para ler e/ou manipular esse arquivo. Portanto, a escolha explícita do usuário de abrir um arquivo em um aplicativo instalado, como em um botão "Abrir com..." menu de contexto, pode ser lido como um recurso um sinal de confiança no aplicativo.

Desafios do gerenciador padrão

A exceção é quando não há aplicativos no sistema host para um determinado tipo de arquivo. Em nesse caso, alguns sistemas operacionais host podem promover automaticamente o manipulador recém-registrado para a gerenciador padrão desse tipo de arquivo silenciosamente e sem qualquer intervenção do usuário. Isso significa que, se o usuário clicar duas vezes em um arquivo desse tipo, ele será aberto automaticamente no app da Web. Nesses sistemas operacionais host, quando o user agent determina que não há gerenciador padrão para o tipo de arquivo, uma solicitação de permissão explícita pode ser necessária para evitar enviar acidentalmente o conteúdo de um arquivo para um aplicativo da Web sem o consentimento do usuário.

Controle do usuário

A especificação afirma que os navegadores não devem registrar todos os sites que podem lidar com arquivos como um arquivo . Em vez disso, o registro de tratamento de arquivos deve ser protegido pela instalação e nunca acontecer sem confirmação explícita do usuário, especialmente se um site se tornar o manipulador padrão. Em vez do que invadir extensões existentes, como .json, que o usuário provavelmente já tem um gerenciador padrão. registrar, os sites devem considerar a criação de suas próprias extensões.

Transparência

Todos os sistemas operacionais permitem que os usuários alterem as associações de arquivos atuais. Isso está fora do escopo do navegador.

Feedback

A equipe do Chrome quer saber mais sobre suas experiências com a API File Handling.

Fale sobre o design da API

Alguma coisa na API não funciona como você esperava? Ou há métodos faltando ou propriedades de que precisa para implementar sua ideia? Tem uma pergunta ou comentário sobre a segurança modelo?

  • Registre um problema de especificação no repositório do GitHub correspondente ou adicione sua opinião a um problema.

Informar um problema com a implementação

Você encontrou um bug na implementação do Chrome? Ou a implementação é diferente das especificações?

  • Registre um bug em new.crbug.com. Não deixe de incluir o máximo de detalhes instruções simples para reprodução, e digite UI>Browser>WebAppInstalls>FileHandling no na caixa Componentes. O Glitch é ótimo para compartilhar informações de maneira rápida e fácil reproduções.

Mostrar suporte à API

Você planeja usar a API File Handling? Seu apoio público ajuda a equipe do Chrome a priorizar recursos e mostrar a outros fornecedores de navegador como é fundamental oferecer suporte a eles.

Links úteis

Agradecimentos

A API File Handling foi especificada por Eric Willigers, Jay Harris e Raymes Khoury. Este artigo foi revisado por João Medley.