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.