Mit der File Handling API können sich Webanwendungen als Dateihandler für Dateiformate registrieren, die die Anwendung unterstützen kann. Hier erfahren Sie, wie die Bildbearbeitungs-App Photopea diese API nutzt.
Einführung
(Dieser Artikel ist auch als Video verfügbar.)
Photopea ist ein kostenloser Online-Bildeditor, der von Ivan Kutskir entwickelt wurde. Ivan begann 2012 mit der Arbeit an der App und führt einen Blog, in dem er die wichtigsten Funktionen beschreibt, die er Photopea hinzufügt. Photopea unterstützt die Formate PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) und CDR (CorelDRAW).
Dateiverwaltung in Photopea
Als installierbare PWA wird Photopea in einem eigenständigen Fenster ausgeführt, wenn der Nutzer die App installiert. Dadurch wird eine PWA-Superkraft freigeschaltet, die in Photopea intensiv genutzt wird: die Dateiverwaltung.
Der deklarative Teil der File Handling API
Nach der Installation registriert sich Photopea beim Betriebssystem als Datei-Handler für die verschiedenen unterstützten Dateiformate. Dazu fügen Sie im Manifest der Webanwendung das Feld file_handlers hinzu. Jeder unterstützte Dateityp ist ein Objekt. action hat eine relative URL als Wert und das accept-Objekt eine Zuordnung von MIME-Typen und zugehörigen Dateiendungen. Beispiel: {"image/jpeg": [".jpeg", ".jpg"]}. Der folgende Code ist das Produktions-Web-App-Manifest von Photopea, wobei die relevanten Teile hervorgehoben sind.
{
"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"]
}
]
}
}
}
Der imperative Teil der File Handling API
Der imperative Teil der API befasst sich dann mit der tatsächlichen Verarbeitung der Dateien, die das Betriebssystem an die PWA übergibt. Der Code von Photopea ist offensichtlich stark minimiert und unschön, aber der Grundsatz des folgenden Snippets ist dennoch nicht so schwer zu verstehen. Die LaunchQueue-Schnittstelle (minimiert als N) hat eine setConsumer()-Methode, die eine Funktion als Argument akzeptiert. Diese Funktion nimmt wiederum ein LaunchParams-Objekt (miniert als W) an. Dieses LaunchParams-Objekt hat die Eigenschaft files, die auf ein schreibgeschütztes Array von FileSystemHandle-Objekten verweist. Im Rest des Codes wird dann eine Schleife über dieses Array ausgeführt und für jedes Objekt wird das File-Objekt (als G minimiert) durch Aufrufen von getFile() abgerufen. Diese Datei wird dann an andere Logik in Photopea übergeben, die für die Anzeige der Datei verantwortlich ist.
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]);
});
}
});
}
Ergebnisse
Nutzer haben schon lange nach einem Dateimanager für Bilder in Photopea verlangt. 2020, als die Frage gestellt wurde, war diese Funktion völlig undenkbar. Aber ein eifriger Nutzer hat die File Handling API in ihren frühesten Phasen Anfang 2022 entdeckt, als sie noch hinter einer Flagge versteckt war. Die Dateiverwaltung wurde schließlich in Chrome 102 eingeführt und ist eine beliebte Photopea-Funktion, die von den Nutzern täglich verwendet wird. Einige bezeichnen sie sogar als Gamechanger. Probieren Sie Photopea aus, installieren Sie es auf Ihrem Computer und versuchen Sie, eines der unterstützten Dateiformate zu öffnen. Viel Spaß beim Bearbeiten von Bildern!