Dowiedz się, dlaczego projekt Excalidraw postanowił zrezygnować z opakowania Electron na rzecz internetu wersji.
W projekcie Excalidraw zdecydowaliśmy, że wycofamy Excalidraw Desktop, otokę Electron Excalidraw na rzecz wersji internetowej dostępne na stronie excalidraw.com. Po wnikliwej analizie uznaliśmy, że progresywna aplikacja internetowa (PWA) to przyszłość, którą chcemy tworzyć w dniu. Czytaj dalej, aby dowiedzieć się, dlaczego.
Jak powstała aplikacja Excalidraw Desktop
Wkrótce po tym jak @vjeux utworzyła początkową wersję Excalidraw w w styczniu 2020 r. i opublikował o tym na blogu, zaproponował w swoim artykule Problem nr 561:
Warto dodać Excalidraw do pakietu Electron (lub jego odpowiednika) i opublikować go jako [zależnie od platformy] w różnych sklepach z aplikacjami.
Natychmiastową reakcją użytkownika @voluntadpear było:
A może zamiast tego zmienić ją w PWA? Android obecnie obsługuje dodawanie ich do Sklepu Play jako Trusted Web Activities i miejmy nadzieję, że wkrótce iOS również zrobi to samo. Na komputerze pobierz skrót na pulpicie do aplikacji PWA.
Decyzja, którą podjął @vjeux, była prosta:
Powinniśmy zrobić i jedno, i drugie :)
Prace nad przekonwertowaniem wersji Excalidraw na PWA rozpoczęły się @voluntadpear i późniejsze inne osoby, @lipis niezależnie wyprzedził i utworzył w osobnym repozytorium Excalidraw Desktop.
Do tego dnia początkowym celem wyznaczonym przez @vjeux jest przesłanie Nie osiągnięto jeszcze dostępu do Excalidraw do różnych sklepów z aplikacjami. Poważnie, nikt nawet nie zaczął proces przesyłania do dowolnego sklepu. Ale dlaczego? Zanim odpowiem, spójrzmy na platformę Electron.
Co to jest Electron?
Wyjątkową cechą oprogramowania Electron jest to, że pozwala „tworzyć” wielu platform za pomocą JavaScript, HTML i CSS”. Aplikacje stworzone w technologii Electron „Zgodność z systemami Mac, Windows i Linux”, czyli „Aplikacje elektronowe kompilują i uruchamiają się na 3 platform”. Według strony głównej to, co sprawia, że Electron jest łatwy, automatyczne aktualizacje, menu i powiadomienia na poziomie systemu, raportowanie awarii, debugowanie i profilowanie, Instalatory Windows. Jak się okazuje, część opisane funkcje wymagają dokładnego zapoznania się z drobnym drukiem.
Na przykład automatyczne aktualizacje „są [obecnie] tylko [obsługiwane] w systemach macOS i Windows. Jest Nie ma wbudowanej obsługi automatycznego aktualizatora w systemie Linux, więc zalecamy użycie menedżera pakietów, aby zaktualizować aplikację”.
Deweloperzy mogą tworzyć menu na poziomie systemu, wywołując funkcję
Menu.setApplicationMenu(menu). W systemie Windows oraz W Linuksie to menu zostanie ustawione jako górne menu w każdym oknie, a w systemie macOS jest dostępnych wiele zdefiniowane przez system standardowe menu, takie jak Usługi . Aby menu było menu standardowe, deweloperzy powinni odpowiednio ustawić w menurole, a Electron je rozpozna i sprawi, że staną się standardowymi menu. Oznacza to, że wiele kod związany z menu będzie korzystać z następującego sprawdzania platformy:const isMac = process.platform === 'darwin'W instalatorach Windows można użyć: windows-installer. Plik README projektu zaznacza, że „w przypadku aplikacji w wersji produkcyjnej musisz podpisać aplikację. Internet Explorera Filtr SmartScreen zablokuje pobieranie aplikacji, a wielu dostawców oprogramowania antywirusowego uznają aplikację za złośliwe oprogramowanie, chyba że uzyskasz ważny certyfikat” [sic].
Po 3 przykładach wyraźnie widać, że model Electron jest daleki od „zapisz raz, uruchom wszędzie”. Wymagania dotyczące dystrybucji aplikacji w sklepach z aplikacjami podpisywania kodu, czyli technologii zabezpieczeń poświadczam własność aplikacji. Pakowanie aplikacji wymaga użycia narzędzi takich jak elektroniczne kucie i myślenie o tym, gdzie się i udostępniaj pakiety aktualizacji aplikacji. Sytuacja staje się stosunkowo szybko złożona, zwłaszcza gdy jest to naprawdę obsługa wielu platform. Chcę zauważyć, że absolutnie można stworzyć Aplikacje elektroniczne, które wymagają odrobiny wysiłku i poświęcenia. W przypadku Excalidraw Desktop nie było to dla nas jasne.
Miejsce, w którym Excalidraw Desktop został przerwany
Jak dotąd Excalidraw Desktop to aplikacja internetowa Excalidraw
.asar z dodanym oknem Excalidraw – informacje. Wygląd
i sposób działania aplikacji jest niemal taki sam jak wersja internetowa.
W systemie macOS u góry aplikacji znajduje się teraz menu na poziomie systemu, ale nie można z niego skorzystać czynności – oprócz Zamknij okno i Informacje o Excalidraw – są powiązane z menu, jest w obecnym stanie raczej bezużyteczny. Tymczasem wszystkie działania można oczywiście wykonać za pomocą z pasków narzędzi Excalidraw i menu kontekstowym.
Używamy narzędzia Electronic-builder, który obsługuje
powiązania typów plików.
Po dwukrotnym kliknięciu pliku .excalidraw powinna się otworzyć aplikacja Excalidraw Desktop.
odpowiedni fragment naszego pliku electron-builder.json wygląda tak:
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
Niestety w praktyce nie zawsze działa to zgodnie z oczekiwaniami, ponieważ (dla bieżącego użytkownika – dla wszystkich użytkowników). Aplikacje w systemie Windows 10 nie mają prawa do powiązania typu pliku ze sobą.
Te wady i nadchodzący projekt sprawiają, że na wszystkich platformach korzystanie z aplikacji wygląda jak aplikacja (co ponownie, przy wystarczającym możliwym wysiłku) stanowiły ważny argument skłaniający do ponownego rozważenia inwestycja w Excalidraw Desktop. Ważniejszym dla nas argumentem jest jednak to, w naszym przypadku użycia nie potrzebujesz wszystkich funkcji dostępnych w aplikacji Electron. Grupa, która powiększa się i stale rozrasta się możliwości internetu są dla nas równie dobre, a może nawet lepsze.
Jak internet służy nam dziś i w przyszłości
Nawet w 2020 r. jQuery niesamowitą popularność. Dla wielu programistów, którzy przyzwyczaili się z niego korzystać, mimo że dzisiaj może nie potrzebować biblioteki jQuery. Istnieje podobny materiał do Electron o nazwie Możesz nie potrzebować elektryka. Chcę dlaczego naszym zdaniem nie jest on potrzebny.
Progresywna aplikacja internetowa z możliwością zainstalowania
Excalidraw to dziś progresywna aplikacja internetowa, którą można zainstalować skrypt service oraz manifest aplikacji internetowej. Wszystkie swoje zasoby są przechowywane w dwóch pamięciach podręcznych, jeden na czcionki i kod CSS związany z czcionkami, a drugi – wszystkie pozostałe.
Oznacza to, że może ona działać w trybie offline i bez połączenia sieciowego. Przeglądarki oparte na Chromium na komputerach i urządzeniach mobilnych proszą użytkownika o zainstalowanie aplikacji. Prośba o instalację możesz zobaczyć na zrzucie ekranu poniżej.
Aplikacja Excalidraw skonfigurowano do uruchamiania jako samodzielna aplikacja, więc po jej zainstalowaniu które jest uruchamiane w osobnym oknie. Jest w pełni zintegrowany z wielozadaniowym interfejsem użytkownika, pojawi się ikona aplikacji na ekranie głównym, w Docku lub pasku zadań; w zależności od platformy, na której instalujesz .
Dostęp do systemu plików
Excalidraw używa polecenia browser-fs-access do uzyskać dostęp do systemu plików systemu operacyjnego. W obsługiwanych przeglądarkach pozwala to uzyskać prawdziwy open→edit→zapisz przepływ pracy, zapisz nadmierne zapisywanie i zapisz jako, z przezroczystą opcją zastępczą w innych przeglądarkach. Więcej informacji o tej funkcji znajdziesz w poście na blogu. Odczyt i zapis plików oraz katalogów przy użyciu biblioteki Browser-fs-access.
Obsługa przeciągania i upuszczania
Pliki można przeciągać i upuszczać w oknie Excalidraw, tak jak w aplikacjach działających na platformie. Dzień która obsługuje File System Access API, można natychmiast edytować, a modyfikacje można zapisać w oryginalnym pliku. Tak jest że czasem zapominamy, że mamy do czynienia z aplikacją internetową.
Dostęp do schowka
Excalidraw dobrze działa 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 pozwala na
łatwą integrację z innymi narzędziami
platformowymi, takimi jak Inkscape,
takimi jak SVGOMG.
Obsługa plików
Excalidraw obsługuje już eksperymentalny interfejs File Handling API,
Oznacza to, że pliki .excalidraw można dwukrotnie kliknąć w menedżerze plików systemu operacyjnego.
otwiera się bezpośrednio w aplikacji Excalidraw, ponieważ Excalidraw rejestruje się jako moduł obsługi plików dla .excalidraw
w systemie operacyjnym.
Deklaracyjne rejestrowanie linków
Rysunki Excalidraw można udostępniać za pomocą linku. Oto przykład. W przyszłości, jeśli którzy mają zainstalowaną aplikację Excalidraw jako aplikację PWA, takie linki nie otwierają się w karcie przeglądarki, ale uruchamiają nowe, niezależne okno. Oczekuje na wdrożenie. Będzie działać dzięki deklaratywnym przechwytywania linków, bo w momencie pisania tę przełomową propozycję dotyczącą nowej funkcji platformy internetowej.
Podsumowanie
W internecie przeszło długą drogę – coraz więcej funkcji jest dostępnych w przeglądarkach, lat, a nawet miesięcy temu były nie do pomyślenia i były dostępne wyłącznie w aplikacjach działających na określonych platformach. Firma Excalidraw wyprzedza wszystkie możliwości dostępne w przeglądarce, jednocześnie informując, że nie wszystkie przeglądarki na wszystkich platformach obsługują każdą używaną przez nas funkcję. Przez zakłady progresywne ulepszenia, korzystamy zawsze z najnowszych i najciekawszych rozwiązań, ale nie opuszczając w tyle. Najlepiej wyświetlać się w dowolnej przeglądarce.
Electron był bardzo przydatny, ale od 2020 roku możemy żyć bez niego. A, a do tego właśnie cel @vjeux: Sklep Play na Androida akceptuje teraz aplikacje PWA o nazwie Zaufana aktywność internetowa oraz ponieważ Microsoft Store obsługuje aplikacje PWA, również w niedalekiej przyszłości. Tymczasem możesz zawsze używaj i instaluj Excalidraw w przeglądarce i z poziomu przeglądarki.
Podziękowania
Autor opinii: @lipis, @dwelle oraz Joe Medley