Consenti alle applicazioni web installate di essere gestori di file

Registra un'app come gestore di file nel 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 di file per i file che le loro app possono creare ed elaborare. L'API File Managing ti consente di farlo. Dopo aver registrato un'app di editor di testo come gestore di file e dopo averla installata, puoi fare clic con il tasto destro del mouse su un file .txt su macOS e selezionare "Ottieni informazioni" per indicare al sistema operativo che deve sempre aprire i file .txt con questa app come predefinita.

Casi d'uso suggeriti per l'API File handling

Esempi di siti che possono utilizzare questa API includono:

• Applicazioni per ufficio come editor di testo, applicazioni per fogli di lavoro e strumenti per la creazione di presentazioni.
• Editor di grafici e strumenti di disegno.
• Strumenti per l'editor di livello dei videogiochi.

Come utilizzare l'API File Managing

Miglioramento progressivo

Non è possibile eseguire il polyfill dell'API File Managing in sé. La funzionalità di apertura di file con un'app web, tuttavia, può essere raggiunta in altri due modi:

• L'API Web Share Target consente agli sviluppatori di specificare la propria app come destinazione per la 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 del browser

Supporto dei browser

• 102
• 102
• x
• x

Fonte

Rilevamento delle funzionalità

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

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

Nota: la gestione dei file è attualmente limitata ai sistemi operativi desktop.

La parte dichiarativa dell'API File Managing

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

• Una proprietà "action" che rimanda come valore a un URL nell'ambito dell'app.
• 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 che 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 più file devono essere aperti 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 il suo "launch_type", avverrà più di un avvio dell'app e, per ogni lancio, l'array LaunchParams.files (vedi più avanti) avrà un solo elemento.

L'esempio riportato di seguito, che mostra solo l'estratto pertinente del file manifest dell'app web, dovrebbe renderlo più chiaro:

{
  "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 i file con valori separati da virgole (.csv) in /open-csv, i file di grafica vettoriale scalabili (.svg) in /open-svg e un formato di file Grafr inventato con .grafr, .graf o .graph come estensione in /open-graf. Le prime due si aprono in un solo client, l'ultima in più client se vengono gestiti più file.

Nota: affinché questa dichiarazione abbia effetto, l'applicazione deve essere installata. Puoi scoprire di più in una serie di articoli su questo sito stesso su come rendere l'app installabile.

La parte imperativa dell'API File Managing

Ora che l'app ha dichiarato quali file è in grado di gestire e a quale URL nell'ambito in teoria, deve fare un'azione imperativa con i file in arrivo nella pratica. È qui che entra in gioco launchQueue. Per accedere ai file avviati, un sito deve specificare un consumer per l'oggetto window.launchQueue. I lanci vengono messi in coda fino a quando non vengono gestiti dal consumer specificato, cosa che viene richiamato esattamente una volta per ogni lancio. In questo modo, viene gestito ogni lancio, indipendentemente da quando è 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.
    }
  });
}

Supporto DevTools

Al momento della stesura di questo documento non c'è assistenza per DevTools, ma ho presentato una richiesta di funzionalità per poter ricevere assistenza.

Demo

Ho aggiunto il supporto per la gestione dei file a Excalidraw, un'app di disegno in stile cartoni animati. Per testarla, devi prima installare Excalidraw. Quando crei un file e lo archivi in un punto del file system, puoi aprirlo con un doppio clic o con il tasto destro del mouse e selezionare "Excalidraw" nel menu contestuale. Puoi consultare l'implementazione nel codice sorgente.

Fai doppio clic o fai clic con il tasto destro del mouse su un file nell'Esplora file del tuo sistema operativo.

Excalidraw è il gestore di file predefinito per i file .excalidraw.

Sicurezza

Il team di Chrome ha progettato e implementato l'API File handling seguendo i principi fondamentali definiti nell'articolo Controllare l'accesso alle funzionalità avanzate della piattaforma web, tra cui controllo dell'utente, trasparenza ed ergonomia.

Aggiornamenti relativi ad autorizzazioni, persistenza delle autorizzazioni e gestore di file

Per garantire la fiducia degli utenti e la sicurezza dei file degli utenti, quando l'API File Managing apre un file, verrà mostrata una richiesta di autorizzazione prima che una PWA possa visualizzare un file. Questo messaggio di autorizzazione viene mostrato subito dopo che l'utente seleziona 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 viene mostrata ogni volta finché l'utente non fa clic per consentire la gestione dei file per il sito Consenti o Blocca oppure finché non viene ignorata la richiesta tre volte (dopo di che Chromium applicherà l'embargo e bloccherà questa autorizzazione). L'impostazione selezionata verrà mantenuta durante la chiusura e la riapertura della PWA.

Quando il manifest viene aggiornato e vengono rilevate modifiche nella sezione "file_handlers", le autorizzazioni vengono reimpostate.

Sfide legate ai file

Una grande categoria di vettori di attacco si apre consentendo ai siti web di accedere ai file. Sono descritte nell'articolo sull'API File System Access. L'ulteriore funzionalità di sicurezza offerta dall'API File handling API rispetto all'API File System Access è la possibilità di concedere l'accesso a determinati file tramite l'UI integrata del sistema operativo, anziché tramite un selettore di file mostrato da un'applicazione web.

Esiste ancora il rischio che gli utenti concedano involontariamente l'accesso a un file a un'applicazione web aprendolo. Tuttavia, si dice generalmente che l'apertura di un file consente all'applicazione con cui è aperto di leggerlo e/o manipolarlo. Di conseguenza, la scelta esplicita di un utente di aprire un file in un'applicazione installata, ad esempio tramite un menu contestuale "Apri con...", può essere letta come un sufficiente indicatore di attendibilità nell'applicazione.

Sfide con gestore predefinito

L'eccezione è quando non ci sono applicazioni sul sistema host per un determinato tipo di file. In questo caso, alcuni sistemi operativi host potrebbero promuovere automaticamente il gestore appena registrato al gestore predefinito per quel tipo di file in modo invisibile e senza alcun intervento da parte dell'utente. Ciò significa che se l'utente fa doppio clic su un file di quel tipo, il file si aprirà automaticamente nell'app web registrata. Su questi sistemi operativi host, quando lo user agent 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 tutti i siti in grado di gestire i file come gestore di file. La registrazione alla gestione dei file deve invece avvenire dietro l'installazione e non deve mai avvenire senza la conferma esplicita dell'utente, soprattutto se un sito deve diventare il gestore predefinito. Invece di compromettere estensioni esistenti come .json, per le quali l'utente probabilmente ha già un gestore predefinito registrato, i siti dovrebbero prendere in considerazione di creare le proprie estensioni.

Trasparenza

Tutti i sistemi operativi consentono agli utenti di modificare le associazioni di file presenti. Non rientra nell'ambito del browser.

Feedback

Il team di Chrome vuole conoscere le tue esperienze con l'API File Managing.

Parlaci della progettazione 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?

• Segnala un problema relativo alle specifiche nel repository GitHub corrispondente o aggiungi le tue opinioni su un problema esistente.

Segnala un problema con l'implementazione

Hai trovato un bug nell'implementazione di Chrome? Oppure l'implementazione è diversa dalle specifiche?

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

Mostra il supporto dell'API

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

• Condividi come prevedi di utilizzarlo nel thread del discorso WiCG.
• Invia un tweet a @ChromiumDev usando l'hashtag #FileHandling e facci sapere dove e come lo utilizzi.

Link utili

• Spiegazione pubblica
• Demo dell'API File Managing | Origine demo dell'API File Managing
• Bug di monitoraggio di Chromium
• Voce ChromeStatus.com
• Componente Blink: UI>Browser>WebAppInstalls>FileHandling
• Revisione TAG
• Posizione standard di Mozilla

Ringraziamenti

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