Hier erfahren Sie, warum das Excalidraw-Projekt seinen Electron-Wrapper zugunsten der Webversion eingestellt hat.
Wir haben uns dazu entschlossen, Excalidraw Desktop, einen Electron-Wrapper für Excalidraw, zugunsten der Webversion einzustellen, die Sie unter excalidraw.com finden. Nach einer sorgfältigen Analyse haben wir uns dafür entschieden, dass progressive Web-Apps (PWAs) die Zukunft sind, auf die wir aufbauen möchten. Lesen Sie weiter, um mehr zu erfahren.
So entstand Excalidraw Desktop
Kurz nachdem @vjeux im Januar 2020 die erste Version von Excalidraw erstellt und darüber gebloggt hatte, schlug er in Issue 561 Folgendes vor:
Es wäre toll, Excalidraw in Electron (oder einem ähnlichen Tool) einzubinden und als [plattformspezifische] Anwendung in den verschiedenen App-Shops zu veröffentlichen.
@voluntadpear schlug sofort Folgendes vor:
Was halten Sie davon, daraus stattdessen eine PWA zu machen? Auf Android-Geräten können sie derzeit als vertrauenswürdige Webaktivitäten in den Play Store aufgenommen werden. Wir hoffen, dass dies bald auch auf iOS-Geräten möglich sein wird. Auf dem Computer können Sie in Chrome einen Desktop-Verknüpfung zu einer PWA herunterladen.
Die Entscheidung, die @vjeux am Ende getroffen hat, war einfach:
Wir sollten beides tun :)
Die Arbeit an der Umwandlung der Version von Excalidraw in eine PWA wurde von @voluntadpear und später von anderen begonnen. @lipis hat unabhängig davon weitergemacht und ein separates Repository für Excalidraw Desktop erstellt.
Das ursprüngliche Ziel von @vjeux, Excalibur in den verschiedenen App-Shops anzubieten, wurde bis heute nicht erreicht. Ehrlich gesagt hat noch niemand mit dem Einreichen der Produkte in den Geschäften begonnen. Aber warum ist das so? Bevor ich diese Frage beantworte, sehen wir uns die Plattform Electron an.
Was ist Electron?
Das Alleinstellungsmerkmal von Electron ist, dass Sie damit „plattformübergreifende Desktop-Apps mit JavaScript, HTML und CSS erstellen“ können. Mit Electron erstellte Apps sind „mit Mac, Windows und Linux kompatibel“, d. h. „Electron-Apps werden auf drei Plattformen erstellt und ausgeführt“. Laut der Startseite sind die schwierigen Aufgaben, die Electron vereinfacht, automatische Updates, Menüs und Benachrichtigungen auf Systemebene, Absturzberichte, Debugging und Profiling sowie Windows-Installationsprogramme. Bei einigen der versprochenen Funktionen ist ein genauer Blick auf den Kleingedruckten erforderlich.
Automatische Updates werden beispielsweise [derzeit] nur unter macOS und Windows [unterstützt]. Es gibt keine integrierte Unterstützung für den automatischen Updater unter Linux. Daher wird empfohlen, die App mit dem Paketmanager der Distribution zu aktualisieren.“
Entwickler können Menüs auf Systemebene erstellen, indem sie
Menu.setApplicationMenu(menu)aufrufen. Unter Windows und Linux wird das Menü als oberstes Menü jedes Fensters festgelegt. Unter macOS gibt es viele systemdefinierte Standardmenüs, z. B. das Menü Dienste. Wenn Entwickler ihre Menüs zu Standardmenüs machen möchten, müssen sie dieroleihres Menüs entsprechend festlegen. Electron erkennt sie dann und macht sie zu Standardmenüs. Das bedeutet, dass in vielen Codezeilen für Menüs die folgende Plattformprüfung verwendet wird:const isMac = process.platform === 'darwin'.Windows-Installationsprogramme können mit windows-installer erstellt werden. Im README des Projekts wird darauf hingewiesen, dass „für eine Produktions-App Ihre Anwendung signiert werden muss. Der SmartScreen-Filter des Internet Explorers blockiert den Download Ihrer App und viele Antivirenanbieter betrachten Ihre App als Malware, es sei denn, Sie erhalten ein gültiges Zertifikat.“ [sic]
Schon anhand dieser drei Beispiele wird klar, dass Electron bei weitem nicht dem Motto „Einmal schreiben, überall ausführen“ entspricht. Für die Bereitstellung einer App in App-Shops ist die Codesignatur erforderlich, eine Sicherheitstechnologie zum Bestätigen des App-Inhabers. Zum Verpacken einer App müssen Sie Tools wie electron-forge verwenden und überlegen, wo Sie Pakete für App-Updates hosten möchten. Das Ganze wird relativ schnell komplex, insbesondere wenn das Ziel wirklich eine plattformübergreifende Unterstützung ist. Ich möchte darauf hinweisen, dass es absolut möglich ist, mit ausreichendem Aufwand und Engagement beeindruckende Electron-Apps zu erstellen. Bei Excalidraw Desktop waren wir nicht dabei.
Dort weitermachen, wo Sie in Excalidraw Desktop aufgehört haben
Excalidraw Desktop ist im Grunde die Excalidraw-Webanwendung, die als .asar-Datei mit einem zusätzlichen Fenster Excalidraw gebündelt ist. Das Erscheinungsbild der App ist fast identisch mit der Webversion.
Unter macOS gibt es jetzt oben in der Anwendung ein Menü auf Systemebene. Da jedoch keine der Menüaktionen – mit Ausnahme von Fenster schließen und Excalidraw – mit etwas verbunden ist, ist das Menü in seinem aktuellen Zustand ziemlich nutzlos. Bis dahin können alle Aktionen natürlich über die regulären Symbolleisten von Excalidraw und das Kontextmenü ausgeführt werden.
Wir verwenden electron-builder, das Dateitypzuordnungen unterstützt.
Wenn Sie auf eine .excalidraw-Datei doppelklicken, sollte idealerweise die Excalidraw-Desktop-App geöffnet werden. Der relevante Auszug aus unserer electron-builder.json-Datei sieht so aus:
{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}
Leider funktioniert das in der Praxis nicht immer wie gewünscht, da Apps unter Windows 10 je nach Installationstyp (für den aktuellen Nutzer, für alle Nutzer) nicht die Berechtigungen haben, sich einen Dateityp zuzuordnen.
Diese Mängel und die ausstehenden Arbeiten, um die Nutzung auf allen Plattformen wirklich app-ähnlich zu gestalten (was mit genügend Aufwand möglich ist), waren ein starkes Argument für uns, unsere Investition in Excalidraw Desktop noch einmal zu überdenken. Das größere Argument für uns war jedoch, dass wir für unseren Anwendungsfall nicht alle Funktionen von Electron benötigen. Die wachsenden und immer weiter wachsenden Möglichkeiten des Webs eignen sich ebenso gut, wenn nicht sogar besser.
Wie das Web uns heute und in Zukunft dient
Auch 2020 ist jQuery noch immer sehr beliebt. Für viele Entwickler ist es zur Gewohnheit geworden, es zu verwenden, obwohl sie jQuery heute möglicherweise nicht benötigen. Es gibt eine ähnliche Ressource für Electron, die treffend You Might Not Need Electron (Sie benötigen Electron möglicherweise nicht) heißt. Ich möchte erläutern, warum wir Electron nicht benötigen.
Installierbare progressive Web-App
Excalidraw ist heute eine installierbare progressive Web-App mit einem Service Worker und einem Manifest der Web-App. Es speichert alle Ressourcen in zwei Caches: einen für Schriftarten und schriftartenbezogenes CSS und einen für alles andere.
Das bedeutet, dass die Anwendung vollständig offlinefähig ist und ohne Netzwerkverbindung ausgeführt werden kann. In Chromium-basierten Browsern auf Computern und Mobilgeräten werden Nutzer aufgefordert, die App zu installieren. Im Screenshot unten ist die Installationsaufforderung zu sehen.
Excalidraw ist so konfiguriert, dass es als eigenständige Anwendung ausgeführt wird. Wenn Sie es installieren, erhalten Sie eine App, die in einem eigenen Fenster ausgeführt wird. Sie ist vollständig in die Multitasking-Benutzeroberfläche des Betriebssystems integriert und erhält je nach Plattform, auf der Sie sie installieren, ein eigenes App-Symbol auf dem Startbildschirm, im Dock oder in der Taskleiste.
Dateisystemzugriff
Excalidraw verwendet browser-fs-access für den Zugriff auf das Dateisystem des Betriebssystems. In unterstützten Browsern ist so ein echter Workflow vom Typ „Öffnen → Bearbeiten → Speichern“ sowie eine tatsächliche Überschreibung und ein „Speichern als“ möglich. Für andere Browser gibt es einen transparenten Fallback. Weitere Informationen zu dieser Funktion finden Sie in meinem Blogpost Dateien und Verzeichnisse mit der browser-fs-access-Bibliothek lesen und schreiben.
Drag-and-drop-Unterstützung
Dateien können wie in plattformspezifischen Anwendungen per Drag-and-drop in das Excalidraw-Fenster gezogen werden. In einem Browser, der die File System Access API unterstützt, kann eine abgelegte Datei sofort bearbeitet und die Änderungen in der Originaldatei gespeichert werden. Das ist so intuitiv, dass man manchmal vergisst, dass es sich um eine Webanwendung handelt.
Zugriff auf die Zwischenablage
Excalidraw funktioniert gut mit der Zwischenablage des Betriebssystems. Ganze Excalidraw-Zeichnungen oder auch einzelne Objekte können in den Formaten image/png und image/svg+xml kopiert und eingefügt werden. So lassen sie sich ganz einfach in andere plattformspezifische Tools wie Inkscape oder webbasierte Tools wie SVGOMG einbinden.
Dateiverwaltung
Excalidraw unterstützt bereits die experimentelle File Handling API. Das bedeutet, dass .excalidraw-Dateien im Dateimanager des Betriebssystems doppelt angeklickt und direkt in der Excalidraw-App geöffnet werden können, da Excalidraw sich als Datei-Handler für .excalidraw-Dateien im Betriebssystem registriert.
Deklarative Linkerfassung
Excalidraw-Zeichnungen können per Link freigegeben werden. Hier ist ein Beispiel. Wenn Nutzer Excalidraw in Zukunft als PWA installiert haben, werden solche Links nicht in einem Browsertab, sondern in einem neuen eigenständigen Fenster geöffnet. Bis zur Implementierung funktioniert das dank deklarativer Linkerfassung, einem zukunftsweisenden Vorschlag für eine neue Webplattformfunktion.
Fazit
Das Web hat sich stark weiterentwickelt. Immer mehr Funktionen werden in Browsern eingeführt, die vor wenigen Jahren noch undenkbar waren und nur in plattformspezifischen Anwendungen verfügbar waren. Excalidraw ist führend in Sachen Browsertechnologie. Wir sind uns aber bewusst, dass nicht alle Browser auf allen Plattformen alle von uns verwendeten Funktionen unterstützen. Durch eine progressive Verbesserungsstrategie können wir nach Möglichkeit die neuesten und besten Funktionen nutzen, ohne jemanden zurückzulassen. Am besten in beliebigem Browser ansehen.
Electron hat uns gute Dienste erwiesen, aber 2020 und darüber hinaus können wir ohne Electron auskommen. Und zu dem Ziel von @vjeux: Da der Android Play Store jetzt PWAs in einem Containerformat namens Trusted Web Activity akzeptiert und der Microsoft Store PWAs unterstützt, wird Excalidraw in absehbarer Zeit in diesen Stores verfügbar sein. In der Zwischenzeit können Sie Excalidraw im Browser und über den Browser installieren.
Danksagungen
Dieser Artikel wurde von @lipis, @dwelle und Joe Medley geprüft.