Mit der File Handling API können sich Webanwendungen selbst als Datei-Handler für die von der Anwendung unterstützten Dateiformate registrieren. Hier erfahren Sie, wie die Bildbearbeitungs-App Photopea diese API verwendet.
Einführung
(Dieser Artikel ist auch als Video verfügbar.)
Photopea ist ein kostenloser Online-Bildeditor von Ivan Kutskir. 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]);
});
}
});
}
Schlussfolgerungen
Nutzer fragen schon seit Langem, dass Photopea ein Datei-Handler für Bilder wird. Als die Frage im Jahr 2020 aufkam, war diese Funktion völlig undenkbar, aber ein begeisterter Nutzer entdeckte die File Handling API Anfang 2022, als sie noch hinter einer Flagge stand. 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ß bei der Bildbearbeitung!