L'API File Handling consente alle applicazioni web di registrarsi come gestori di file per i formati di file supportati dall'applicazione. Scopri come l'applicazione di modifica delle immagini Photopea utilizza questa API.
Introduzione
Questo articolo è disponibile anche sotto forma di video.
Photopea è un editor di immagini online senza costi sviluppato da Ivan Kutskir. Ivan ha iniziato a lavorare all'app nel 2012 e tiene un blog in cui condivide le funzionalità principali che aggiunge a Photopea. Photopea può funzionare con i formati PSD (Adobe Photoshop), XCF (GIMP), Sketch (app Sketch), XD (Adobe XD) e CDR (CorelDRAW).
Gestione dei file in Photopea
In qualità di PWA installabile, Photopea viene eseguita in una finestra autonoma quando l'utente sceglie di installare l'app. In questo modo, viene sbloccata una superpotenza delle PWA, di cui Photopea fa un uso intensivo: la gestione dei file.
La parte dichiarativa dell'API File Handling
Dopo l'installazione, Photopea si registra come gestore file con il sistema operativo per i diversi formati file supportati. Questo accade nel file manifest dell'app web, aggiungendo il campo file_handlers. Ogni tipo di file supportato è un oggetto, action ha un URL relativo come valore, l'oggetto accept una mappa di tipi MIME ed estensioni file associate. Ad esempio, {"image/jpeg": [".jpeg", ".jpg"]}. Il seguente codice è il manifest dell'app web di produzione di Photopea, con le parti pertinenti evidenziate.
{
"name": "Photopea",
"short_name": "Photopea",
"display": "standalone",
"icons": [
{ "src": "promo/icon512.png", "type": "image/png", "sizes": "512x512" },
{ "src": "promo/maskable512.png", "type": "image/png", "sizes": "512x512", "purpose":"maskable" }
],
"start_url": "/?utm_source=homescreen",
"background_color":"#0f171d",
"theme_color": "#474747",
"file_handlers": [
{ "action": "/", "accept": { "image/psd" : [ ".psd" ] } },
{ "action": "/", "accept": { "image/jpeg": [ ".jpeg", ".jpg" ] } },
{ "action": "/", "accept": { "image/png" : [ ".png" ] } },
{ "action": "/", "accept": { "image/webp": [ ".webp" ] } },
{ "action": "/", "accept": { "image/bmp" : [ ".bmp" ] } },
{ "action": "/", "accept": { "image/gif" : [ ".gif" ] } },
{ "action": "/", "accept": { "image/svg+xml": [ ".svg" ] } },
{ "action": "/", "accept": { "image/pdf" : [ ".pdf" ] } },
{ "action": "/", "accept": { "image/tiff": [ ".tif", ".tiff" ] } },
{ "action": "/", "accept": { "image/ai" : [ ".ai" ] } },
{ "action": "/", "accept": { "image/psb": [ ".psb" ] } },
{ "action": "/", "accept": { "image/xcf": [ ".xcf" ] } },
{ "action": "/", "accept": { "image/sketch": [ ".sketch" ] } },
{ "action": "/", "accept": { "image/xd" : [ ".xd" ] } },
{ "action": "/", "accept": { "image/pxd": [ ".pxd" ] } },
{ "action": "/", "accept": { "image/cdr": [ ".cdr" ] } },
{ "action": "/", "accept": { "image/eps": [ ".eps", ".ps" ] } },
{ "action": "/", "accept": { "image/x-icon": [ ".ico" ] } },
{ "action": "/", "accept": { "image/jpx": [ ".jpx" ] } },
{ "action": "/", "accept": { "image/jp2": [ ".jp2" ] } },
{ "action": "/", "accept": { "image/x-tga": [ ".tga" ] } },
{ "action": "/", "accept": { "image/vnd-ms.dds": [ ".dds" ] } }
],
"share_target": {
"action": "/",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"files": [
{
"name": "image",
"accept": ["image/jpeg", "image/png", "image/webp", "image/gif"]
}
]
}
}
}
La parte imperativa dell'API File Handling
La parte imperativa dell'API si occupa quindi della gestione effettiva dei file che il sistema operativo passa alla PWA. Il codice di Photopea è ovviamente molto ridotto e sgradevole, ma l'essenziale dello snippet di seguito non è così difficile da comprendere. L'interfaccia LaunchQueue (minimizzata come N) ha un metodo setConsumer() che accetta una funzione come argomento. Questa funzione, a sua volta, accetta un oggetto LaunchParams (minimizzato come W) . Questo oggetto LaunchParams ha una proprietà files che punta a un array di sola lettura di oggetti FileSystemHandle, che il resto del codice esegue il loop su e per ciascuno ottiene l'oggetto File (minimizzato come G) chiamando getFile(). Questo file viene poi passato ad altra logica di Photopea che si occupa della visualizzazione del file.
var N = window.launchQueue;
if (N) {
var $ = this.UA;
N.setConsumer(function (W) {
var O = W.files;
console.log(O);
for (var Y = 0; Y < O.length; Y++) {
var T = O[Y];
T.getFile().then(function (G) {
$.YO([G], null, null, null, [T]);
});
}
});
}
Conclusioni
Gli utenti chiedono da molto tempo che Photopea diventi un gestore di file per le immagini. Nel 2020, quando è stata posta la domanda, questa funzionalità era completamente impensabile, ma un utente appassionato ha scoperto l'API di gestione dei file nelle sue fasi iniziali all'inizio del 2022, quando era ancora dietro un flag. La gestione dei file è stata implementata in Chrome 102 ed è una funzionalità di Photopea molto apprezzata e utilizzata quotidianamente dagli utenti, alcuni addirittura la considerano un punto di svolta. Assicurati di provare Photopea, installalo sul tuo computer e prova ad aprire uno dei formati file supportati. Buona modifica delle immagini.