Interfejs File handling API pozwala aplikacjom internetowym rejestrować się jako moduł obsługi plików w formatach obsługiwanych przez aplikację. Dowiedz się, jak aplikacja do edycji obrazów Photopea korzysta z tego interfejsu API.
Wstęp
(Ten artykuł jest również dostępny w formie filmu).
Photopea to bezpłatny edytor obrazów online stworzony przez Ivana Kutskira. Ivan rozpoczął pracę nad aplikacją w 2012 roku. Prowadzi też bloga, w którym omawia główne funkcje dodane do aplikacji Photopea. Aplikacja Photopea obsługuje formaty PSD (Adobe Photoshop), XCF (GIMP), Sketch (Sketch App), XD (Adobe XD) i CDR (CorelDRAW).
Obsługa plików w aplikacji Photopea
Gdy użytkownik zdecyduje się zainstalować aplikację, jako zainstalowaną aplikację PWA aplikacja Photopea uruchamia się w samodzielnym oknie. Odblokowuje to supermoce PWA, które w dużym stopniu wykorzystuje: obsługa plików.
Deklaratywna część interfejsu File handling API
Po instalacji Photopea rejestruje się jako moduł obsługi plików w systemie operacyjnym dla różnych formatów plików, które obsługuje. Umożliwia to dodanie pola file_handlers w pliku manifestu aplikacji internetowej. Każdy obsługiwany typ pliku jest obiektem. action ma jako wartość względny adres URL, a obiekt accept – mapę typów MIME i powiązanych rozszerzeń plików. Na przykład: {"image/jpeg": [".jpeg", ".jpg"]}. Poniżej znajduje się kod produkcyjny pliku manifestu aplikacji internetowej Photopea, w którym wyróżnione są odpowiednie części.
{
"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"]
}
]
}
}
}
Kluczową częścią interfejsu File handling API
Imperatywna część interfejsu API zajmuje się faktyczną obsługą plików, które system operacyjny przekazuje do PWA. Kod aplikacji Photopea jest oczywiście mocno zminimalizowany i udoskonalony, ale mimo to istnienie poniższego fragmentu kodu nie jest tak trudne do zrozumienia. Interfejs LaunchQueue (zminimalizowany jako N) ma metodę setConsumer(), która akceptuje funkcję jako argument. Ta funkcja z kolei pobiera obiekt LaunchParams (minimalizację na poziomie W) . Ten obiekt LaunchParams ma właściwość files wskazującą tablicę obiektów FileSystemHandle tylko do odczytu, która jest następnie zapętlona i dla każdego z nich otrzymuje obiekt File (zmniejszony jako G) przez wywołanie getFile(). Plik jest następnie przekazywany do innej funkcji logicznej programu Photopea, która odpowiada za jego wyświetlanie.
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]);
});
}
});
}
Podsumowanie
Użytkownicy od dawna prosili o to, aby Photopea stał się modułem obsługi plików z obrazami. W 2020 roku pojawiło się pytanie, jak to było możliwe. Jednak chętny użytkownik odkrył interfejs API do obsługi plików na początku 2022 roku, gdy był jeszcze zbyt opuszczony. Obsługa plików została wprowadzona w Chrome 102 i została bardzo lubiana przez użytkowników aplikacji Photopea na co dzień. Niektórzy nazywają ją nawet przełomową funkcją. Wypróbuj aplikację Photopea, zainstaluj ją na komputerze i spróbuj otworzyć jeden z obsługiwanych formatów plików. Życzymy udanego edytowania obrazów!