L'API File Handling consente alle applicazioni web di registrarsi come gestore di file per i formati file che l'applicazione può supportare. Scopri come l'applicazione di editing 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
In quanto PWA installabile, Photopea viene eseguita in una finestra autonoma quando l'utente sceglie di installare l'app. In questo modo si sblocca un superpotere della PWA, di cui Photopea fa un uso massiccio: la gestione dei file.
La parte dichiarativa dell'API di gestione dei file
Dopo l'installazione, Photopea si registra come gestore di file con il sistema operativo per i diversi formati file supportati. Ciò avviene 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 del file associate. Ad esempio, {"image/jpeg": [".jpeg", ".jpg"]}. Il seguente codice è il manifesto 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 Gestione di file
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 poco leggibile, ma il succo dello snippet riportato di seguito non è così difficile da capire. 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, su cui il resto del codice esegue un loop e per ognuno ottiene l'oggetto File (minimizzato come G) chiamando getFile(). Questo file viene poi passato ad un'altra logica in 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 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 entusiasta ha scoperto l'API per la gestione di file nelle sue fasi iniziali all'inizio del 2022, quando era ancora dietro un flag. La gestione dei file è stata infine rilasciata in Chrome 102 ed è diventata una funzionalità molto apprezzata di Photopea, utilizzata quotidianamente dai suoi utenti, alcuni dei quali l'hanno addirittura definita una svolta. Assicurati di provare Photopea, installalo sul tuo computer e poi prova ad aprire uno dei formati file supportati. Buon editing delle immagini!