Wycofanie usługi Excalidraw Electron na rzecz wersji internetowej

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 podpisywania kodu, czyli technologii zabezpieczeń służącej do potwierdzania własności 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 Desktop nie udało się nam tego osiągnąć.

Gdzie skończyło się Excalidraw na komputer

Jak dotąd Excalidraw Desktop to w zasadzie aplikacja internetowa Excalidraw dołączana do pliku .asar z dodanym oknem 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 działania można oczywiście wykonać na zwykłych paskach narzędzi Excalidraw i w menu kontekstowym.

Korzystamy z narzędzia Electronic-builder, który obsługuje powiązania 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 na komputery. Ważniejszym dla nas argumentem jest jednak to, że w naszym przypadku użycia nie potrzebujemy wszystkich funkcji, które oferuje Electron. Coraz bardziej rozbudowany zbiór możliwości internetu służy nam równie dobrze, a może nawet lepiej.

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 obecnie mogą nie potrzebować jQuery. W przypadku Electrona istnieje podobny materiał, który trafnie nosi nazwę Electron – czy na pewno Ci go trzeba?. Wyjaśnijmy teraz, dlaczego uważamy, że sprzęt elektryczny jest niepotrzebny.

Instalowana progresywna aplikacja internetowa

Obecnie Excalidraw to instalowalna progresywna aplikacja internetowa z skryptem service worker i pliku manifestu aplikacji internetowej. Wszystkie swoje zasoby są zapisywane w dwóch pamięciach podręcznych: jedną dla czcionek i powiązanego z nimi CSS, a drugą dla wszystkich pozostałych elementów.

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 proszą użytkownika o zainstalowanie aplikacji. Prompt instalacji możesz zobaczyć na zrzucie ekranu poniżej.

Excalidraw jest skonfigurowany tak, aby działać jako samodzielna aplikacja, więc po zainstalowaniu otrzymasz aplikację, która działa w oddzielnym 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 uprawnienia 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, a także faktyczne zapisywanie z zastąpieniem i „zapisz jako”, z przejrzystym rozwiązaniem alternatywnym 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

Pliki można przeciągać i upuszczać w oknie Excalidraw, tak jak w aplikacjach działających na poszczególnych platformach. W przeglądarce obsługującej interfejs API dostępu do systemu plików można natychmiast edytować przeciągnięty plik i zapisać zmiany w oryginalnym pliku. Jest to tak intuicyjne, że czasem 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 konkretnej platformie, 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 Excalidraw można udostępniać za pomocą linku. Oto przykład. Jeśli w przyszłości użytkownicy będą mieli zainstalowaną aplikację Excalidraw jako PWA, takie linki nie będą otwierać się w karcie przeglądarki, ale będą otwierać się w nowym, samodzielnym 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

Sieć przeszła długą drogę, a w przeglądarkach pojawia się coraz więcej funkcji, które jeszcze kilka lat, a nawet miesięcy temu, były nie do pomyślenia w sieci i dostępne wyłącznie dla aplikacji działających na poszczególnych platformach. Firma Excalidraw wyprzedza wszystkie możliwości przeglądarki, nie rezygnując z tego, że nie wszystkie przeglądarki na wszystkich platformach obsługują poszczególne funkcje, z których korzystamy. Dzięki strategii stopniowego ulepszania możemy korzystać z najnowszych i najlepszych funkcji, gdy tylko jest to możliwe, bez pozostawiania 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. Zawsze możesz natomiast używać i instalować Excalidraw w przeglądarce i z poziomu przeglądarki.

Podziękowania

Ten artykuł został sprawdzony przez @lipis, @dwelle i Joe Medley.