Dowiedz się, dlaczego twórcy projektu Excalidraw postanowili wycofać wersję z opakowaniem Electron na rzecz wersji internetowej.
W przypadku projektu Excalidraw postanowiliśmy wycofać Excalidraw na komputer, czyli Electron dla Excalidraw, na rzecz wersji internetowej, którą można znaleźć na stronie excalidraw.com. Po dokładnej analizie uznaliśmy, że progresywna aplikacja internetowa (PWA) to przyszłość, na której chcemy się skupić. Czytaj dalej, aby dowiedzieć się, dlaczego.
Jak powstała wersja na komputery Excalidraw
Wkrótce po tym, jak @vjeux utworzył pierwszą wersję Excalidraw w styczniu 2020 r. i opisał ją w blogu, zaproponował to w Issue #561:
Warto byłoby owinąć Excalidraw w Electron (lub jego odpowiednik) i opublikować jako aplikację [dla konkretnej platformy] w różnych sklepach z aplikacjami.
Natychmiastowa reakcja użytkownika @voluntadpear:
Może zamiast tego utworzyć aplikację PWA? Android obecnie obsługuje dodawanie ich do Sklepu Play jako zaufanych działań w internecie. Mamy nadzieję, że wkrótce będzie to możliwe również w iOS. Na komputerze przeglądarka Chrome umożliwia pobranie skrótu do aplikacji PWA.
Ostatecznie @vjeux podjął prostą decyzję:
Powinniśmy zrobić i jedno, i drugie :)
Prace nad przekształceniem wersji Excalidraw w aplikację PWA rozpoczęły @voluntadpear, a potem inne osoby. @lipis niezależnie poszła dalej i utworzył oddzielne repozytorium dla wersji Excalidraw na komputer.
Do dziś nie osiągnięto jeszcze początkowego celu wyznaczonego przez użytkownika @vjeux, czyli przesłania aplikacji Excalidraw do różnych sklepów z aplikacjami. Szczerze mówiąc, nikt nie rozpoczął jeszcze procesu przesyłania do żadnego ze sklepów. Dlaczego? Zanim odpowiem, przyjrzyjmy się platformie Electron.
Co to jest Electron?
Unikalną zaletą Electron jest to, że pozwala „tworzyć wieloplatformowe aplikacje na komputery z wykorzystaniem JavaScriptu, HTML i CSS”. Aplikacje utworzone za pomocą Electron są „zgodne z systemami Mac, Windows i Linux”, co oznacza, że „aplikacje Electron są tworzone i uruchamiane na 3 platformach”. Według strony głównej trudne zadania, które Electron ułatwia, to: automatyczne aktualizacje, menu i powiadomienia na poziomie systemu, zgłaszanie awarii, debugowanie i profilowanie oraz instalatory Windowsa. Okazuje się, że niektóre z obiecanych funkcji wymagają dokładnego zapoznania się z drobnym drukiem.
Na przykład automatyczne aktualizacje [obecnie] są obsługiwane tylko w systemach macOS i Windows. W Linuxie nie ma wbudowanego wsparcia dla automatycznej aktualizacji, dlatego zalecamy użycie menedżera pakietów dystrybucji do zaktualizowania aplikacji”.
Deweloperzy mogą tworzyć menu na poziomie systemu, wywołując funkcję
Menu.setApplicationMenu(menu). W systemach Windows i Linux menu będzie ustawione jako menu górne każdego okna, a w systemie macOS jest wiele standardowych menu zdefiniowanych przez system, takich jak menu Usługi. Aby menu było menu standardowym, deweloperzy powinni odpowiednio skonfigurować wartośćrole, a Electron je rozpozna i uczyni standardowymi. Oznacza to, że wiele kodu związanego z menu będzie używać tego sprawdzenia platformy:const isMac = process.platform === 'darwin'.Instalatory Windows można tworzyć za pomocą narzędzia windows-installer. Plik README projektu informuje, że „w przypadku aplikacji produkcyjnej musisz ją podpisać. Filtr SmartScreen w Internet Explorerze zablokuje pobieranie Twojej aplikacji, a wielu dostawców oprogramowania antywirusowego uzna ją za złośliwe, chyba że uzyskasz prawidłowy certyfikat. [sic].
Wystarczy spojrzeć na te 3 przykłady, aby zrozumieć, że Electron to nie „napisz raz, uruchom wszędzie”. Rozpowszechnianie aplikacji w sklepach z aplikacjami wymaga podpisania kodu, czyli technologii zabezpieczającej, która potwierdza własność aplikacji. Pakowanie aplikacji wymaga użycia narzędzi takich jak electron-forge oraz zastanowienia się nad tym, gdzie przechowywać pakiety z aktualizacjami aplikacji. Sprawy się komplikują stosunkowo szybko, zwłaszcza gdy celem jest obsługa na wielu platformach. Pamiętaj, że zdecydowanie można tworzyć wspaniałe aplikacje Electron, jeśli włożysz w to odpowiedni wysiłek i poświęcisz temu czas. W przypadku Excalidraw na komputer nie udało się nam tego osiągnąć.
Gdzie kończy się Excalidraw na komputery
Do tej pory Excalidraw na komputerze to w podstawie aplikacja internetowa Excalidraw w pakiecie jako plik .asar z dodatkowym oknem Informacje o Excalidraw. Aplikacja wygląda i działa prawie tak samo jak jej wersja internetowa.
W systemie macOS u góry aplikacji znajduje się teraz menu na poziomie systemu, ale ponieważ żadne z jego elementów (poza opcjami Zamknij okno i Informacje o Excalidraw) nie jest połączone z niczym, menu w obecnej postaci jest dość bezużyteczne. Wszystkie czynności można oczywiście wykonywać za pomocą zwykłych pasków narzędzi Excalidraw i menu kontekstowych.
Używamy electron-builder, który obsługuje kojarzenie typów plików.
Po dwukrotnym kliknięciu pliku .excalidraw powinna otworzyć się aplikacja Excalidraw na komputer. Odpowiedni fragment pliku electron-builder.json wygląda tak:
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
W praktyce nie zawsze działa to tak, jak powinno, ponieważ w zależności od typu instalacji (dla bieżącego użytkownika lub dla wszystkich użytkowników) aplikacje w Windows 10 nie mają uprawnień do kojarzenia typu pliku z samymi sobą.
Te niedociągnięcia i zaległe prace nad stworzeniem prawdziwej aplikacji na wszystkich platformach (które, jak już wspominaliśmy, przy odpowiednim nakładzie pracy są możliwe) skłoniły nas do ponownego rozważenia inwestycji w Excalidraw Desktop. Jednak ważniejszym argumentem było dla nas to, że w naszym przypadku nie potrzebujemy wszystkich funkcji oferowanych przez Electron. Rozwijający się i stale poszerzający się zestaw możliwości internetu jest równie przydatny, a czasem nawet bardziej.
Jak internet służy nam dzisiaj i w przyszłości
Nawet w 2020 r. jQuery jest nadal niesamowicie popularne. Dla wielu programistów stało się to nawykiem, mimo że może im nie być potrzebna jQuery. W przypadku Electrona istnieje podobny materiał, który trafnie nosi nazwę Electron – czy na pewno Ci go trzeba?. Wyjaśnię, dlaczego uważamy, że nie potrzebujemy Electrona.
Instalowana progresywna aplikacja internetowa
Obecnie Excalidraw to instalowalna progresywna aplikacja internetowa z skryptem service worker i pliku manifestu aplikacji internetowej. Wszystkie zasoby są przechowywane w 2 pamięciach podręcznych: jednej dla czcionek i CSS związanych z czcionkami oraz drugiej dla wszystkiego innego.
Oznacza to, że aplikacja może działać w trybie offline i nie wymaga połączenia z internetem. Przeglądarki oparte na Chromium na komputerach i urządzeniach mobilnych wyświetlają użytkownikowi prośbę o zainstalowanie aplikacji. Na poniższym zrzucie ekranu widać prośbę o zainstalowanie.
Excalidraw jest skonfigurowany tak, aby działać jako samodzielna aplikacja, więc po zainstalowaniu otrzymasz aplikację, która działa w swoim własnym oknie. Jest ona w pełni zintegrowana z interfejsem wielozadaniowości systemu operacyjnego i ma własną ikonę na ekranie głównym, w Docku lub na pasku aplikacji (w zależności od platformy).
Dostęp do systemu plików
Excalidraw używa browser-fs-access do uzyskiwania dostępu do systemu plików systemu operacyjnego. W obsługiwanych przeglądarkach umożliwia to prawdziwy przepływ pracy: otwórz → edytuj → zapisz oraz faktyczne zapisywanie z zastąpieniem i „zapisz jako”, z przejrzystym rozwiązaniem zastępczym w przypadku innych przeglądarek. Więcej informacji o tej funkcji znajdziesz w moim poście na blogu Czytanie i zapisywanie plików i katalogów za pomocą biblioteki browser-fs-access.
Obsługa przeciągania i upuszczania
Podobnie jak w przypadku aplikacji platformowych, pliki można przeciągać i upuszczać na okno Excalidraw. W przeglądarce obsługującej interfejs API dostępu do systemu plików można natychmiast edytować upuszczony plik i zapisać zmiany w oryginalnym pliku. Jest to tak intuicyjne, że czasami zapominamy, że mamy do czynienia z aplikacją internetową.
Dostęp do schowka
Excalidraw dobrze współpracuje z buforem systemowym. Całkowite rysunki Excalidraw lub poszczególne obiekty można kopiować i wklejać w formatach image/png i image/svg+xml, co umożliwia łatwą integrację z innymi narzędziami na konkretne platformy, takimi jak Inkscape, lub narzędziami internetowymi, takimi jak SVGOMG.
Obsługa plików
Excalidraw obsługuje już eksperymentalny interfejs File Handling API, co oznacza, że pliki .excalidraw można otwierać w dwojnym kliknięciu w menedżerze plików systemu operacyjnego i bezpośrednio w aplikacji Excalidraw, ponieważ Excalidraw rejestruje się jako moduł obsługi plików .excalidraw w systemie operacyjnym.
Deklaratywna rejestracja linków
Rysunki w Excalidraw można udostępniać za pomocą linku. Oto przykład. W przyszłości, jeśli użytkownicy mają zainstalowaną aplikację Excalidraw jako PWA, takie linki nie będą otwierać się w karcie przeglądarki, ale w nowym oknie. Do czasu wdrożenia ta funkcja będzie działać dzięki deklaratywnemu przechwyceniu linku, który w momencie pisania tego artykułu jest nowatorską propozycją funkcji nowej platformy internetowej.
Podsumowanie
Internet przebył długą drogę. W przeglądarkach pojawia się coraz więcej funkcji, które jeszcze kilka lat temu były nie do pomyślenia w internecie i wyłącznie w przypadku aplikacji na konkretne platformy. Excalidraw jest na czele możliwości przeglądarki, ale wiemy też, że nie wszystkie przeglądarki na wszystkich platformach obsługują wszystkie używane przez nas funkcje. Dzięki strategii stopniowego ulepszania możemy korzystać z najnowszych i najlepszych funkcji, gdy tylko jest to możliwe, nie pozostawiając nikogo w tyle. Najlepiej wyświetla się w dowolnej przeglądarce.
Electron dobrze nam służył, ale w 2020 roku i później możemy się bez niego obejść. A co do celu @vjeux: Sklep Play na Androida obsługuje teraz PWAs w formacie kontenera o nazwie Trusted Web Activity, a Microsoft Store również obsługuje PWAs, więc w niedalekiej przyszłości możesz spodziewać się Excalidraw w tych sklepach. Możesz jednak instalować i używać programu Excalidraw w przeglądarce.
Podziękowania
Ten artykuł został sprawdzony przez @lipis, @dwelle i Joe Medley.