Consenti alle applicazioni web installate di essere gestori di file

Registra un'app come gestore file con il sistema operativo.

Thomas Steiner

Ora che le app web sono in grado di leggere e scrivere file, il passaggio logico successivo è consentire agli sviluppatori di dichiarare queste app web come gestori dei file che le loro app possono creare ed elaborare. L'API File Handling ti consente di fare esattamente questo. Dopo aver registrato un'app di editor di testo come gestore di file e averla installata, puoi fare clic con il tasto destro del mouse su un file .txt su macOS e selezionare "Ottieni informazioni" per poi indicare al sistema operativo di aprire sempre i file .txt con questa app per impostazione predefinita.

Casi d'uso suggeriti per l'API File Handling

Ecco alcuni esempi di siti che potrebbero utilizzare questa API:

• Applicazioni di Office come editor di testo, app di fogli di lavoro e creator di presentazioni.
• Editor di grafica e strumenti di disegno.
• Strumenti di editor di livelli di videogiochi.

Come utilizzare l'API File Handling

Potenziamento progressivo

L'API File Handling non può essere polyfilled. Tuttavia, la funzionalità di apertura dei file con un'app web può essere ottenuta in altri due modi:

• L'API Target di condivisione web consente agli sviluppatori di specificare la propria app come target di condivisione, in modo che i file possano essere aperti dal foglio di condivisione del sistema operativo.
• L'API File System Access può essere integrata con il trascinamento dei file, in modo che gli sviluppatori possano gestire i file eliminati nell'app già aperta.

Supporto browser

Rilevamento di funzionalità

Per verificare se l'API File handling è supportata, utilizza:

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

La parte dichiarativa dell'API File Handling

Come primo passaggio, le app web devono descrivere in modo dichiarativo nel file manifest dell'app web il tipo di file che possono gestire. L'API File handling estende il manifest dell'app web con una nuova proprietà denominata "file_handlers" che accetta un array di gestori di file. Un gestore file è un oggetto con le seguenti proprietà:

• Una proprietà "action" che punta a un URL nell'ambito dell'app come valore.
• Una proprietà "accept" con un oggetto di tipi MIME come chiavi ed elenchi di estensioni di file come valori.
• Una proprietà "icons" con un array di icone ImageResource. Alcuni sistemi operativi consentono a un'associazione di tipo di file di visualizzare un'icona non solo l'icona dell'applicazione associata, ma piuttosto un'icona speciale correlata all'utilizzo di quel tipo di file con l'applicazione.
• Una proprietà "launch_type" che definisce se aprire più file in un singolo client o in più client. Il valore predefinito è "single-client". Se l'utente apre più file e se il gestore di file è stato annotato con "multiple-clients" come "launch_type", verrà eseguito più di un avvio dell'app e per ogni lancio, l'array LaunchParams.files (vedi più avanti) avrà un solo elemento.

L'esempio seguente, che mostra solo l'estratto pertinente del file manifest dell'app web, dovrebbe chiarire ulteriormente la questione:

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

Si tratta di un'applicazione ipotetica che gestisce file con valori separati da virgola (.csv) in /open-csv, file di grafica vettoriale scalabile (.svg) in /open-svg e un formato file Grafr inventato con estensione .grafr, .graf o .graph in /open-graf. I primi due si apriranno in un singolo client, l'ultimo in più client se vengono gestiti più file.

La parte imperativa dell'API File Handling

Ora che l'app ha dichiarato in teoria quali file può gestire e in quale URL ambito, deve obbligatoriamente fare qualcosa con i file in arrivo nella pratica. È qui che entra in gioco launchQueue. Per accedere ai file lanciati, un sito deve specificare un consumatore per l'oggetto window.launchQueue. I lanci vengono messi in coda fino a quando non vengono gestiti dal consumatore specificato, che viene invocato esattamente una volta per ogni lancio. In questo modo, ogni lancio viene gestito, indipendentemente dal momento in cui è stato specificato il consumatore.

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

Assistenza per DevTools

Al momento della stesura di questo articolo, non è previsto il supporto di DevTools, ma ho inviato una richiesta di funzionalità per chiedere di aggiungerlo.

Demo

Ho aggiunto il supporto per la gestione dei file a Excalidraw, un'app di disegno in stile cartone animato. Per provarlo, devi prima installare Excalidraw. Quando crei un file con questo strumento e lo memorizzi da qualche parte nel tuo sistema di file, puoi aprirlo facendo doppio clic o con il tasto destro del mouse e selezionando "Excalidraw" nel menu contestuale. Puoi controllare l'implementazione nel codice sorgente.

Sicurezza

Il team di Chrome ha progettato e implementato l'API File Handling utilizzando i principi fondamentali definiti in Controllo dell'accesso a potenti funzionalità della piattaforma web, tra cui il controllo utente, la trasparenza e l'ergonomia.

Autorizzazioni, persistenza delle autorizzazioni e aggiornamenti dei gestori dei file

Per garantire la fiducia degli utenti e la sicurezza dei loro file, quando l'API di gestione dei file apre un file, viene visualizzata una richiesta di autorizzazione prima che una PWA possa visualizzare un file. Questo prompt di autorizzazione verrà mostrato subito dopo che l'utente avrà selezionato la PWA per aprire un file, in modo che l'autorizzazione sia strettamente associata all'azione di apertura di un file utilizzando la PWA, rendendolo più comprensibile e pertinente.

Questa autorizzazione verrà visualizzata ogni volta finché l'utente non fa clic su Consenti o Blocca per la gestione dei file per il sito oppure ignora la richiesta tre volte (dopodiché Chromium eseguirà l'embargo e bloccherà questa autorizzazione). L'impostazione selezionata verrà mantenuta dopo la chiusura e la riapertura della PWA.

Quando vengono rilevati gli aggiornamenti e le modifiche del file manifest nella sezione "file_handlers", le autorizzazioni vengono reimpostate.

Sfide relative ai file

Esiste una vasta categoria di vettori di attacco che vengono aperti consentendo ai siti web di accedere ai file. Questi sono descritti nell'articolo sull'API File System Access. La funzionalità aggiuntiva pertinente per la sicurezza che l'API File handling fornisce sull'API File System Access è la possibilità di concedere l'accesso a determinati file tramite l'interfaccia utente integrata del sistema operativo, anziché tramite un selettore file mostrato da un'applicazione web.

Esiste comunque il rischio che gli utenti possano concedere involontariamente a un'applicazione web l'accesso a un file aprendolo. Tuttavia, è generalmente inteso che l'apertura di un file consente all'applicazione con cui viene aperto di leggere e/o manipolare quel file. Pertanto, la scelta esplicita di un utente di aprire un file in un'applicazione installata, ad esempio tramite un menu contestuale "Apri con…", può essere considerata un'indicazione sufficiente di attendibilità dell'applicazione.

Verifiche per il gestore predefinito

L'eccezione è rappresentata dal caso in cui non siano presenti applicazioni sul sistema host per un determinato tipo di file. In questo caso, alcuni sistemi operativi host potrebbero promuovere automaticamente il gestore appena registrato a gestore predefinito per quel tipo di file in modo silenzioso e senza alcun intervento da parte dell'utente. Ciò significa che se l'utente fa doppio clic su un file di questo tipo, si aprirà automaticamente nell'app web registrata. Su questi sistemi operativi host, quando l'agente utente determina che non esiste un gestore predefinito per il tipo di file, potrebbe essere necessaria una richiesta di autorizzazione esplicita per evitare di inviare accidentalmente i contenuti di un file a un'applicazione web senza il consenso dell'utente.

Controllo utente

La specifica indica che i browser non devono registrare ogni sito in grado di gestire i file come gestori di file. La registrazione della gestione dei file deve invece essere subordinata all'installazione e non deve mai avvenire senza la conferma esplicita dell'utente, in particolare se un sito deve diventare il gestore predefinito. Invece di compromettere estensioni esistenti come .json per le quali l'utente ha probabilmente già registrato un gestore predefinito, i siti dovrebbero prendere in considerazione la creazione di estensioni proprie.

Trasparenza

Tutti i sistemi operativi consentono agli utenti di modificare le attuali associazioni di file. Questo non rientra nell'ambito del browser.

Feedback

Il team di Chrome vuole conoscere la tua esperienza con l'API di gestione dei file.

Fornisci informazioni sul design dell'API

C'è qualcosa nell'API che non funziona come previsto? Oppure mancano metodi o proprietà di cui hai bisogno per implementare la tua idea? Hai domande o commenti sul modello di sicurezza?

• Invia una segnalazione relativa alle specifiche nel repository GitHub corrispondente o aggiungi il tuo parere a una segnalazione esistente.

Segnalare un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalla specifica?

• Invia un bug all'indirizzo new.crbug.com. Assicurati di includere il maggior numero di dettagli possibile, istruzioni semplici per la riproduzione e inserisci UI>Browser>WebAppInstalls>FileHandling nella casella Componenti. Glitch è perfetto per condividere riproduzioni facili e veloci.

Mostra il supporto per l'API

Intendi utilizzare l'API File Handling? Il tuo supporto pubblico aiuta il team di Chrome a dare la priorità alle funzionalità e mostra ad altri fornitori di browser quanto sia fondamentale supportarle.

• Spiega come prevedi di utilizzarlo nel thread di Discourse del WICG.
• Invia un tweet a @ChromiumDev utilizzando l'hashtag #FileHandling e facci sapere dove e come lo utilizzi.

Link utili

• Messaggio esplicativo pubblico
• Demo dell'API File Handling | File Handling API demo source
• Bug di monitoraggio di Chromium
• Voce di ChromeStatus.com
• Componente lampeggiante: UI>Browser>WebAppInstalls>FileHandling
• Revisione TAG
• Posizione di Mozilla in merito agli standard

Ringraziamenti

L'API File Handling è stata specificata da Eric Willigers, Jay Harris e Raymes Khoury. Questo articolo è stato esaminato da Joe Medley.