Permitir que las aplicaciones web instaladas sean controladores de archivos

Registrar una app como controlador de archivos en el sistema operativo

Thomas Steiner

Ahora que las apps web son capaces de leer y escribir archivos, el siguiente paso lógico es permitir que los desarrolladores declaren estas mismas apps web como controladores de archivos para los archivos que sus apps pueden crear y procesar. La API de File Handling te permite hacer exactamente eso. Después de registrar una app de editor de texto como controlador de archivos y después de instalarla, puedes hacer clic con el botón derecho en un archivo .txt en macOS y seleccionar "Obtener información" para indicarle al SO que siempre debe abrir los archivos .txt con esta app como predeterminada.

Casos de uso sugeridos para la API de File Handling

Estos son algunos ejemplos de sitios que pueden usar esta API:

  • Aplicaciones de Office, como editores de texto, apps de hojas de cálculo y creadores de presentaciones de diapositivas
  • Editores de gráficos y herramientas de dibujo
  • Herramientas de edición de niveles de videojuegos

Cómo usar la API de File Handling

Mejora progresiva

La API de File Handling en sí no se puede polyfill. Sin embargo, la funcionalidad de abrir archivos con una app web se puede lograr de otras dos maneras:

  • La API de Web Share Target permite que los desarrolladores especifiquen su app como destino de uso compartido para que los archivos se puedan abrir desde la hoja de uso compartido del sistema operativo.
  • La API de File System Access se puede integrar con la función de arrastrar y soltar archivos, de modo que los desarrolladores puedan controlar los archivos soltados en la app ya abierta.

Navegadores compatibles

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: not supported.
  • Safari: not supported.

Source

Detección de características

Para verificar si se admite la API de File Handling, usa el siguiente código:

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

La parte declarativa de la API de File Handling

Como primer paso, las apps web deben describir de forma declarativa en su manifiesto de la app web qué tipo de archivos pueden controlar. La API de File Handling extiende el manifiesto de la app web con una nueva propiedad llamada "file_handlers" que acepta un array de, bueno, controladores de archivos. Un controlador de archivos es un objeto con las siguientes propiedades:

  • Una propiedad "action" que apunta a una URL dentro del alcance de la app como su valor.
  • Una propiedad "accept" con un objeto de tipos de MIME como claves y listas de extensiones de archivo como sus valores.
  • Una propiedad "icons" con un array de íconos ImageResource. Algunos sistemas operativos permiten que una asociación de tipo de archivo muestre un ícono que no sea solo el ícono de la aplicación asociada, sino un ícono especial relacionado con el uso de ese tipo de archivo con la aplicación.
  • Es una propiedad "launch_type" que define si se deben abrir varios archivos en un solo cliente o en varios clientes. El valor predeterminado es "single-client". Si el usuario abre varios archivos y el controlador de archivos se anotó con "multiple-clients" como su "launch_type", se iniciará más de una app y, para cada inicio, el array LaunchParams.files (consulta más abajo) tendrá solo un elemento.

El siguiente ejemplo, que muestra solo el fragmento relevante del manifiesto de la app web, debería aclarar el concepto:

{
  "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"
    }
  ]
}

Esto es para una aplicación hipotética que controla archivos de valores separados por comas (.csv) en /open-csv, archivos de gráficos vectoriales escalables (.svg) en /open-svg y un formato de archivo Grafr inventado con cualquiera de .grafr, .graf o .graph como extensión en /open-graf. Los primeros dos se abrirán en un solo cliente, y el último en varios clientes si se están procesando varios archivos.

La parte imperativa de la API de File Handling

Ahora que la app declaró qué archivos puede controlar en qué URL dentro del alcance en teoría, debe hacer algo de forma imperativa con los archivos entrantes en la práctica. Aquí es donde entra en juego launchQueue. Para acceder a los archivos lanzados, un sitio debe especificar un consumidor para el objeto window.launchQueue. Los lanzamientos se ponen en cola hasta que los controla el consumidor especificado, que se invoca exactamente una vez por cada lanzamiento. De esta manera, se controla cada lanzamiento, independientemente de cuándo se haya especificado el consumidor.

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.
    }
  });
}

Compatibilidad con Herramientas para desarrolladores

En el momento de escribir este artículo, no hay compatibilidad con DevTools, pero presenté una solicitud de función para que se agregue la compatibilidad.

Demostración

Agregué compatibilidad con el control de archivos a Excalidraw, una app de dibujo con estilo de dibujos animados. Para probarla, primero debes instalar Excalidraw. Luego, cuando crees un archivo con él y lo almacenes en algún lugar de tu sistema de archivos, podrás abrirlo con un doble clic o con un clic derecho y, luego, seleccionar "Excalidraw" en el menú contextual. Puedes consultar la implementación en el código fuente.

La ventana de Finder de macOS con un archivo de Excalidraw.
Haz doble clic o clic con el botón derecho en un archivo del explorador de archivos de tu sistema operativo.
El menú contextual que aparece cuando haces clic con el botón derecho en un archivo con el elemento Abrir con… Excalidraw destacado.
Excalidraw es el controlador de archivos predeterminado para los archivos .excalidraw.

Seguridad

El equipo de Chrome diseñó e implementó la API de File Handling con los principios básicos definidos en Controlling Access to Powerful Web Platform Features, incluidos el control del usuario, la transparencia y la ergonomía.

Actualizaciones de permisos, persistencia de permisos y controladores de archivos

Para garantizar la confianza del usuario y la seguridad de sus archivos, cuando la API de File Handling abra un archivo, se mostrará un mensaje de permiso antes de que una PWA pueda ver un archivo. Este mensaje de permiso se mostrará inmediatamente después de que el usuario seleccione la PWA para abrir un archivo, de modo que el permiso esté estrechamente vinculado a la acción de abrir un archivo con la PWA, lo que lo hace más comprensible y pertinente.

Este permiso se mostrará cada vez hasta que el usuario haga clic en Permitir o Bloquear el control de archivos para el sitio, o ignore el mensaje tres veces (después de lo cual Chromium embargará y bloqueará este permiso). El parámetro de configuración seleccionado persistirá cuando se cierre y se vuelva a abrir la PWA.

Cuando se actualice el manifiesto y se detecten cambios en la sección "file_handlers", se restablecerán los permisos.

Permitir que los sitios web accedan a los archivos abre una gran categoría de vectores de ataque. Estos se describen en el artículo sobre la API de File System Access. La capacidad adicional pertinente para la seguridad que proporciona la API de File Handling sobre la API de File System Access es la capacidad de otorgar acceso a ciertos archivos a través de la IU integrada del sistema operativo, en lugar de a través de un selector de archivos que muestra una aplicación web.

Aún existe el riesgo de que los usuarios otorguen acceso a un archivo a una aplicación web de forma involuntaria cuando lo abran. Sin embargo, se entiende que abrir un archivo permite que la aplicación con la que se abre lea o manipule ese archivo. Por lo tanto, la elección explícita de un usuario para abrir un archivo en una aplicación instalada, por ejemplo, a través de un menú contextual "Abrir con…", se puede interpretar como un indicador suficiente de confianza en la aplicación.

Desafíos del controlador predeterminado

La excepción a esto es cuando no hay aplicaciones en el sistema host para un tipo de archivo determinado. En este caso, es posible que algunos sistemas operativos host promuevan automáticamente el controlador recién registrado al controlador predeterminado para ese tipo de archivo de forma silenciosa y sin intervención del usuario. Esto significa que, si el usuario hace doble clic en un archivo de ese tipo, se abrirá automáticamente en la app web registrada. En esos sistemas operativos host, cuando el agente de usuario determina que no hay un controlador predeterminado existente para el tipo de archivo, es posible que se necesite un mensaje de permiso explícito para evitar enviar accidentalmente el contenido de un archivo a una aplicación web sin el consentimiento del usuario.

Control de usuarios

La especificación indica que los navegadores no deben registrar todos los sitios que pueden controlar archivos como controladores de archivos. En cambio, el registro del controlador de archivos debe estar protegido por la instalación y nunca debe ocurrir sin la confirmación explícita del usuario, en especial si un sitio se convertirá en el controlador predeterminado. En lugar de secuestrar extensiones existentes, como .json, para las que es probable que el usuario ya tenga registrado un controlador predeterminado, los sitios deberían considerar la posibilidad de crear sus propias extensiones.

Transparencia

Todos los sistemas operativos permiten a los usuarios cambiar las asociaciones de archivos actuales. Esto está fuera del alcance del navegador.

Comentarios

El equipo de Chrome quiere conocer tu experiencia con la API de File Handling.

Cuéntanos sobre el diseño de la API

¿Hay algo sobre la API que no funciona como esperabas? ¿O faltan métodos o propiedades que necesitas para implementar tu idea? ¿Tienes alguna pregunta o comentario sobre el modelo de seguridad?

  • Informa un problema de especificación en el repositorio de GitHub correspondiente o agrega tus ideas a un problema existente.

Informa un problema con la implementación

¿Encontraste un error en la implementación de Chrome? ¿O la implementación es diferente de la especificación?

  • Presenta un error en new.crbug.com. Asegúrate de incluir tantos detalles como puedas, instrucciones sencillas para reproducir el error y, luego, ingresa UI>Browser>WebAppInstalls>FileHandling en el cuadro Components.

Cómo mostrar compatibilidad con la API

¿Planeas usar la API de File Handling? Tu apoyo público ayuda al equipo de Chrome a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es admitirlas.

Vínculos útiles

Agradecimientos

La API de File Handling fue especificada por Eric Willigers, Jay Harris y Raymes Khoury. Joe Medley revisó este artículo.