Dowiedz się, dlaczego projekt Excalidraw zdecydował się na wycofanie opakowań Electron na rzecz wersji internetowej.
W projekcie Excalidraw postanowiliśmy wycofać kod Excalidraw Desktop, czyli kod Electron dla Excalidraw, na rzecz wersji internetowej, którą można (i zawsze będzie można) znaleźć na excalidraw.com. Po dokładnym przeanalizowaniu zdecydowaliśmy, że progresywna aplikacja internetowa (PWA) to przyszłość. Więcej informacji znajdziesz w dalszej części tego artykułu.
Jak powstała firma Excalidraw Desktop
Wkrótce po utworzeniu przez użytkownika @vjeux początkowej wersji Excalidraw w styczniu 2020 r. i napisania o niej na blogu zaproponował następujące rozwiązanie w numerze 561:
Najlepiej byłoby dodać Excalidraw do Electron (lub odpowiednika tej usługi) i opublikować ją jako aplikację [zależnie od platformy] w różnych sklepach z aplikacjami.
Natychmiastowa reakcja użytkownika @voluntadpear polegała na zaproponowaniu:
A co jeśli zamiast tego zmienić ją w PWA? Android obsługuje obecnie dodawanie ich do Sklepu Play jako zaufanych aktywności internetowych. Mamy nadzieję, że w przypadku iOS to samo wkrótce się stanie. W przypadku Chrome na komputerze możesz pobrać na pulpicie skrót do PWA.
Decyzja, którą podjął @vjeux na koniec, była prosta:
Powinniśmy zrobić i jedno, i drugie :)
Prace nad przekształceniem wersji Excalidraw w PWA rozpoczęto przez @voluntadpear i późniejsze osoby, ale @lipis niezależnie od tego wykonali krok i utworzyliśmy osobne repozytorium dla aplikacji Excalidraw Desktop.
Do tej pory nie osiągnięto jeszcze początkowego celu wyznaczonego przez @vjeux, czyli przesłania Excalidraw do różnych sklepów z aplikacjami. Nikt jeszcze nie rozpoczął procesu przesyłania produktów do żadnego sklepu. Ale dlaczego? Zanim odpowiem, przyjrzyjmy się platformie Electron.
Co to jest Electron?
Wyjątkową cechą Electron jest możliwość „tworzenia wieloplatformowych aplikacji komputerowych za pomocą języka JavaScript, HTML i CSS”. Aplikacje napisane w technologii Electron są „zgodne z systemami macOS, Windows i Linux”, czyli „Aplikacje Electron kompilują się i działają na 3 platformach”. Według strony głównej Electron ułatwia korzystanie z takich narzędzi jak automatyczne aktualizacje, menu i powiadomienia na poziomie systemu, raportowanie awarii, debugowanie i profilowanie oraz instalatory systemu Windows. Okazuje się, że niektóre z obiecanych funkcji wymagają bliższego spojrzenia na drobny druk.
Na przykład automatyczne aktualizacje „są [obecnie] tylko [obsługiwane] w systemach macOS i Windows. W Linuksie nie ma wbudowanej obsługi automatycznego aktualizatora, dlatego do aktualizowania aplikacji zalecamy używanie menedżera pakietów dystrybucji”.
Deweloperzy mogą tworzyć menu systemowe, wywołując
Menu.setApplicationMenu(menu). W systemach Windows i Linux menu znajduje się jako główne menu każdego okna, a w systemie macOS znajduje się wiele standardowych menu zdefiniowanych przez system, np. menu Usługi. Aby menu było standardowe, programiści powinni odpowiednio ustawićrolew menu. Electron będzie je rozpoznawać i zmieniać w standardowe menu. Oznacza to, że wiele kodów związanych z menu będzie korzystać z takiego sprawdzania platformy:const isMac = process.platform === 'darwin'.Instalatory do systemu Windows można tworzyć za pomocą polecenia windows-installer. README projektu podkreśla, że „w przypadku aplikacji w wersji produkcyjnej musisz podpisać swoją aplikację. Filtr SmartScreen w Internet Explorerze zablokuje pobieranie Twojej aplikacji. Jeśli nie uzyskasz ważnego certyfikatu, wielu dostawców oprogramowania antywirusowego uzna Twoją aplikację za złośliwe oprogramowanie.
Patrząc na te 3 przykłady, oczywiste jest, że Electron jest daleko od zasad „zapisz raz, uruchom wszędzie”. Rozpowszechnianie aplikacji w sklepach z aplikacjami wymaga podpisywania kodu – technologii zabezpieczeń do potwierdzania własności aplikacji. Opakowanie aplikacji wymaga korzystania z narzędzi takich jak electron-forge i zastanowienia się nad tym, gdzie hostować pakiety z aktualizacją aplikacji. Szybko staje się ona skomplikowana, zwłaszcza gdy celem jest obsługa na wielu platformach. Warto zauważyć, że całkowicie możliwe jest tworzenie niesamowitych aplikacji Electron przy odpowiednim wysiłku i zaangażowaniu. Nie było nas na przykład w przypadku Excalidraw Desktop.
Miejsce, w którym wyłączono Excalidraw Desktop
Dotychczasowa aplikacja internetowa Excalidraw to w zasadzie aplikacja internetowa Excalidraw połączona jako plik .asar z dodanym oknem About Excalidraw. Wygląd i sposób działania aplikacji jest niemal taki sam jak jej wersja internetowa.
W systemie macOS u góry aplikacji znajduje się teraz menu systemowe, ale ponieważ żadne z działań menu (oprócz Zamknij okno i Informacje o Excalidraw) nie są do siebie podłączane, menu w obecnym stanie jest całkowicie bezużyteczne. Wszystkie działania można oczywiście wykonywać za pomocą zwykłych pasków narzędzi Excalidraw i menu kontekstowego.
Używamy narzędzia electron-builder, który obsługuje powiązania typów plików.
Po dwukrotnym kliknięciu pliku .excalidraw powinna się otworzyć aplikacja Excalidraw Desktop. Trafny fragment pliku electron-builder.json wygląda tak:
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
W praktyce jednak nie zawsze działa to zgodnie z oczekiwaniami, ponieważ w zależności od typu instalacji (dla bieżącego użytkownika i wszystkich użytkowników) aplikacje w systemie Windows 10 nie mają uprawnień do powiązania ze sobą określonego typu pliku.
Te braki i oczekujące działania, które sprawiły, że aplikacja działała tak, by wyglądała jak aplikacja na wszystkich platformach (co znowu, przy odpowiednim wsparciu, jest możliwym), były silnym argumentem, który zachęcił nas do ponownego zainwestowania w Excalidraw Desktop. O wiele poważniejszym argumentem dla nas było jednak to, że przewidujemy, że w naszym przypadku użycia nie będziemy potrzebowali wszystkich funkcji Electron. Rozszerzony i wciąż rosnący zestaw możliwości internetu służy nam równie dobrze, a może nawet lepiej.
Jak internet służy nam obecnie i w przyszłości
Nawet w 2020 roku jQuery nadal jest niezwykle popularna. Dla wielu deweloperów korzystanie z niego jest nawykiem, mimo że obecnie może nie potrzebować jQuery. Istnieje podobny zasób Electron o nazwie You Might Not Electron. Już teraz wyjaśnię, dlaczego uważamy, że urządzenie Electron nie jest nam potrzebne.
Progresywna aplikacja internetowa do zainstalowania
Obecnie Excalidraw to możliwa do zainstalowania progresywna aplikacja internetowa z skryptą service worker i plikiem manifestu aplikacji internetowej. Wszystkie swoje zasoby przechowuje w pamięci podręcznej w 2 pamięci podręcznych: jednej z czcionkami i kodem CSS związanym z czcionkami, a drugiej do przechowywania wszystkich pozostałych treści.
Oznacza to, że aplikacja jest w pełni dostępna w trybie offline i może działać bez połączenia sieciowego. Przeglądarki oparte na Chromium na komputerach i urządzeniach mobilnych proszą użytkownika o zainstalowanie aplikacji. Prośbę o zainstalowanie aplikacji widać na zrzucie ekranu poniżej.
Aplikacja Excalidraw jest skonfigurowana do uruchamiania jako samodzielna aplikacja, więc po zainstalowaniu będzie ona działać w osobnym oknie. Jest w pełni zintegrowana z interfejsem wielozadaniowym systemu operacyjnego, a w zależności od platformy, na której ją zainstalujesz, ma własną ikonę na ekranie głównym, w Docku lub na pasku zadań.
Dostęp do systemu plików
Aby uzyskać dostęp do systemu plików systemu operacyjnego, Excalidraw uzyskuje dostęp do systemu plików systemu operacyjnego za pomocą polecenia browser-fs-access. W obsługiwanych przeglądarkach umożliwia to otwarcie →edytuj → zapisanie przepływu pracy oraz rzeczywiste nadmiarowe oszczędzanie i „zapisanie jako” z przejrzystą opcją zastępczą dla innych przeglądarek. Więcej informacji o tej funkcji znajdziesz w naszym poście na temat odczytywania i zapisywania plików oraz katalogów przy użyciu biblioteki fs-access w języku angielskim.
Obsługa przeciągania i upuszczania
Pliki można przeciągać i upuszczać do okna Excalidraw, tak jak w przypadku aplikacji na danej platformie. W przeglądarce, która obsługuje interfejs File System Access API, upuszczony plik można natychmiast edytować, a zmiany zostaną zapisane w oryginalnym pliku. Ta metoda jest tak intuicyjna, że czasem zapominasz, że mamy do czynienia z aplikacją internetową.
Dostęp do schowka
Excalidraw współpracuje ze schowkiem systemu operacyjnego. Całe rysunki Excalidraw lub tylko poszczególne obiekty można kopiować i wklejać w formatach image/png i image/svg+xml, co ułatwia integrację z innymi narzędziami na danej platformie, takimi jak Inkscape, czy narzędziami internetowymi, takimi jak SVGOMG.
Obsługa plików
Excalidraw obsługuje już eksperymentalny File handling API, co oznacza, że pliki .excalidraw można kliknąć dwukrotnie w menedżerze plików systemu operacyjnego i otworzyć bezpośrednio w aplikacji Excalidraw, ponieważ Excalidraw rejestruje się jako moduł obsługi plików .excalidraw w systemie operacyjnym.
Deklaratywny rejestrowanie linków
Rysunki Excalidraw można udostępniać za pomocą linku. Oto przykład. W przyszłości, jeśli użytkownicy będą mieli zainstalowaną aplikację Excalidraw jako PWA, takie linki nie będą się otwierać na karcie przeglądarki, a jedynie uruchomić nowe, samodzielne okno. Oczekująca implementacja będzie działać dzięki rejestrowaniu linków deklaracyjnych, czyli najnowocześniejszej propozycji nowej funkcji platformy internetowej, która w momencie tworzenia tej usługi.
Podsumowanie
Internet przeszedł długą drogę, a w przeglądarkach, które jeszcze kilka lat, a nawet miesięcy temu były nie do pomyślenia, i które były dostępne wyłącznie w aplikacjach na konkretnych platformach. Excalidraw to lider w zakresie możliwości przeglądarki, jednocześnie wiedząc, że nie wszystkie przeglądarki na wszystkich platformach obsługują każdą z naszych funkcji. Stawiamy na progresywną strategię, która pozwala korzystać z najnowszych i najlepszych treści wszędzie tam, gdzie to możliwe. Najlepiej wyświetlać się w dowolnej przeglądarce.
Electron świetnie nam służy, ale w 2020 roku i kolejnych latach będziemy mogli żyć bez niego. Ten cel to @vjeux: Sklep Play na Androida akceptuje teraz aplikacje PWA w formacie kontenera o nazwie Trusted Web Activity. Ponieważ Microsoft Store obsługuje takie aplikacje, w niedalekiej przyszłości możesz spodziewać się w nich aplikacji Excalidraw. Zawsze możesz jednak używać i instalować Excalidraw w przeglądarce i z poziomu przeglądarki.
Podziękowania
Ten artykuł sprawdzili @lipis, @dwelle i Joe Medley.