L'API File Handling consente alle applicazioni web di registrarsi come gestore di file per i formati di file supportati dall'applicazione. Scopri come l'applicazione di modifica di 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 gestisce un blog in cui condivide le principali funzionalità che aggiunge a Photopea. Photopea può funzionare con i formati PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) e CDR (CorelDRAW).
Gestione dei file in Photopea
Come PWA installabile, Photopea viene eseguito in una finestra autonoma quando l'utente sceglie di installare l'app. In questo modo sblocca una super potenza della PWA, di cui Photopea fa un uso intensivo: gestione dei file.
La parte dichiarativa dell'API File handling
Dopo l'installazione, Photopea si registra come gestore di file con il sistema operativo per i diversi formati di file supportati. Questa operazione si verifica nel file manifest dell'app web, aggiungendo il campo file_handlers. Ogni tipo di file supportato è un oggetto, il action ha un URL relativo come valore, l'oggetto accept una mappa dei tipi MIME e le estensioni dei file associate. Ad esempio, {"image/jpeg": [".jpeg", ".jpg"]}. Il codice che segue è il file manifest dell'app web di Photopea di produzione, 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 ridotto e brutto, ma il significato dello snippet riportato di seguito non è così difficile da comprendere. L'interfaccia LaunchQueue (minima 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 a cui il resto del codice viene ripetuto in loop e per ciascuno ottiene l'oggetto File (minimo come G) chiamando getFile(). Il file viene quindi passato ad un'altra logica di Photopea che si occupa di visualizzarlo.
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 è apparsa la domanda, questa funzionalità era completamente impensabile, ma un utente impaziente ha scoperto l'API per la gestione dei file nelle sue fasi iniziali, all'inizio del 2022, quando era ancora dietro un flag. Alla fine, la gestione dei file è stata spedita in Chrome 102 ed è stata una funzionalità molto apprezzata da Photopea e utilizzata quotidianamente dai suoi utenti, che alcuni definiscono addirittura una svolta. Assicurati di provare Photopea, installalo sul computer e prova ad aprire uno dei formati file che supporta. Buon divertimento con l'editing delle immagini!