Einstellung von Excalidraw Electron zugunsten der Webversion

Hier erfahren Sie, warum das Projekt Excalidraw beschlossen hat, den Electron-Wrapper zugunsten des Webs einzustellen. Version.

Thomas Steiner

Für das Excalidraw-Projekt haben wir beschlossen, Excalidraw Desktop, ein Electron-Wrapper für Excalidraw zugunsten der Webversion, die Sie finden Sie auf excalidraw.com – und könnten es immer. Nach sorgfältiger Analyse haben beschlossen, dass die progressive Web-App (PWA) unser Ziel ist. auf. Lesen Sie weiter, um zu erfahren, warum.

Die Entstehung von Excalidraw Desktop

Kurz darauf erstellte @vjeux die erste Version von Excalidraw in Januar 2020 und in einem Blogbeitrag dazu schlug er in Problem 561:

Es wäre toll, Excalidraw in Electron (oder ein gleichwertiges Element) zu integrieren und als [plattformspezifisch] zu veröffentlichen. in den verschiedenen App-Shops an.

Die sofortige Reaktion von @voluntadpear war der folgende Vorschlag:

Wie wäre es stattdessen mit einer PWA? Android unterstützt derzeit das Hinzufügen zum Play Store als Trusted Web Activity und iOS werden dies hoffentlich bald tun. Auf dem Computer bietet Chrome folgende Möglichkeiten: Desktopverknüpfung zu einer PWA herunterladen

Die Entscheidung von @vjeux war einfach:

Wir sollten beides tun :)

Bei der Konvertierung der Version von Excalidraw in eine PWA begannen wir mit @voluntadpear und später weitere, @lipis unabhängig davon haben vorausgegangen und Ein separates Repository für Excalidraw Desktop.

Bis heute gilt das ursprüngliche von @vjeux festgelegte Ziel, d. h. Excalidraw in den verschiedenen App-Shops wurde noch nicht erreicht. Ehrlich gesagt hat noch niemand angefangen, den Einreichungsprozess an eine der Filialen ab. Aber warum? Lassen Sie uns zunächst die Plattform Electron.

Was ist Electron?

Das Alleinstellungsmerkmal von Electron ist, dass man damit plattformübergreifende Desktop-Apps mit JavaScript, HTML und CSS erstellen. Mit Electron entwickelte Apps sind "kompatibel mit Mac, Windows und Linux", also "Electron-Apps erstellen und laufen auf drei Plattformen. Laut der Startseite geht es mit Electron bei den schwierigen Dingen darum, automatische Updates Menüs und Benachrichtigungen auf Systemebene, Absturzberichte, Fehlerbehebung und Profilerstellung und Windows-Installationsprogramme Es stellte sich heraus, dass einige müssen wir uns das Kleingedruckte genauer ansehen.

• Zum Beispiel werden automatische Updates „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 Methode Paketmanager verwenden, um Ihre App zu aktualisieren.

• Entwickler können Menüs auf Systemebene erstellen, indem sie Menu.setApplicationMenu(menu) aufrufen. Unter Windows und Unter Linux ist das Menü das oberste Menü jedes Fensters. Unter macOS gibt es viele systemdefinierten Standardmenüs wie dem Dienstleistungen . Um Ihre Menüs zu einem Standardmenü zu machen, sollten Entwickler ihre role entsprechend festlegen. und Electron erkennt sie und macht sie zu Standardmenüs. Das bedeutet, dass viele Für Speisekartencode wird die folgende Plattformprüfung verwendet: const isMac = process.platform === 'darwin'

• Windows-Installationsprogramme können mit windows-installer installieren. Die README-Datei des Projekts hebt hervor, dass "bei einer Produktions-App die App signiert werden muss. Internet Explorer Der SmartScreen-Filter blockiert den Download Ihrer App. Viele Anbieter von Antivirenprogrammen werden Ihre App als Malware betrachtet, es sei denn, Sie erhalten ein gültiges Zertifikat [sic].

Wenn wir uns diese drei Beispiele anschauen, ist klar, dass Electron nicht überall“. Für den Vertrieb einer App über App-Shops Codesignatur, eine Sicherheitstechnologie für um die App-Inhaberschaft zu bestätigen. Für das Packen einer App sind Tools wie Elektronenschmiede und überlegen, Hostpakete für App-Updates. Es wird relativ schnell komplex, besonders wenn die Zielsetzung ist plattformübergreifender Support. Ich möchte anmerken, dass es auf jeden Fall möglich ist, Elektro-Apps mit genug Aufwand und Engagement Bei Excalidraw Desktop waren wir nicht da.

Wo Excalidraw Desktop aufgehört hat

Bei Excalidraw Desktop handelt es sich bisher im Grunde um die Web-App Excalidraw, die als .asar-Datei mit einem hinzugefügten Fenster About Excalidraw. Der Look und die Funktionsweise der Anwendung sind mit der Webversion nahezu identisch.

</ph>

</ph>

Unter macOS befindet sich oben in der Anwendung ein Menü auf Systemebene. Da das Menü aber nicht Aktionen – abgesehen von Fenster schließen und Informationen zu Excalidraw – an alles gebunden sind, ist das Menü ist in seinem jetzigen Zustand ziemlich nutzlos. In der Zwischenzeit können alle Aktionen über das die normalen Excalidraw-Symbolleisten und das Kontextmenü.

</ph>

Wir verwenden Elektron Builder, der Dateitypverknüpfungen. Durch einen Doppelklick auf eine .excalidraw-Datei sollte im Idealfall die Excalidraw Desktop-App geöffnet werden. Die relevanten Auszug unserer electron-builder.json-Datei sieht so aus:

{
  "fileAssociations": [
    {
      "ext": "excalidraw",
      "name": "Excalidraw",
      "description": "Excalidraw file",
      "role": "Editor",
      "mimeType": "application/json"
    }
  ]
}

Leider funktioniert dies in der Praxis nicht immer wie vorgesehen, da dies Installationstyp (für den aktuellen Nutzer und alle Nutzer) haben Apps unter Windows 10 keinen einen Dateityp mit sich selbst zu verknüpfen.

Diese Mängel und die ausstehende Arbeit, um die Nutzung auf allen Plattformen wirklich App-ähnliche zu gestalten (was wiederum mit genug Aufwand möglich ist) ein überzeugendes Argument für uns waren, unsere in Excalidraw Desktop. Ein weitaus größeres Argument für uns war jedoch, dass wir voraussagen, Für unseren Anwendungsfall benötigen wir nicht alle Funktionen von Electron. Die gewachsene und immer größer werdende Gruppe die Möglichkeiten des Webs gleichermaßen gut, wenn nicht besser.

Wie das Web heute und in Zukunft von Nutzen ist

Selbst 2020 ist jQuery immer noch unglaublich beliebt. Für viele Entwickler verwenden sie inzwischen zur Gewohnheit, obwohl sie heute jQuery möglicherweise nicht benötigt. Eine ähnliche Ressource Electron, passend auch als You Might Not Need Electron bezeichnet. Lassen Sie mich warum wir denken, dass wir Electron nicht benötigen.

Installierbare progressive Web-App

Excalidraw ist eine installierbare progressive Web-App mit einer Service Worker und einem Web-App-Manifest. Alle Ressourcen werden in zwei Caches gespeichert, eine für Schriftarten und schriftartbezogenes CSS und eine für alles andere.

</ph>

Das bedeutet, dass die Anwendung vollständig offline-fähig ist und ohne Netzwerkverbindung ausgeführt werden kann. Bei Chromium-basierten Browsern auf Computern und Mobilgeräten wird der Nutzer aufgefordert, die App zu installieren. Im Screenshot unten sehen Sie die Installationsaufforderung.

</ph>

Excalidraw ist so konfiguriert, dass es als eigenständige Anwendung ausgeführt wird. Wenn Sie es installieren, erhalten Sie also eine App. die in einem eigenen Fenster ausgeführt wird. Es ist vollständig in die Multitasking-Benutzeroberfläche des Betriebssystems erhält ein eigenes App-Symbol auf dem Startbildschirm, im Dock oder in der Taskleiste. je nachdem, auf welcher Plattform .

</ph>

</ph>

Dateisystemzugriff

Excalidraw nutzt browser-fs-access für beim Zugriff auf das Dateisystem des Betriebssystems. Auf unterstützten Browsern ist das ein echter Öffnen→Bearbeiten→speichern-Workflow und tatsächliche Übersparung und „Speichern unter“, mit einem transparenten Fallback für andere Browser. Weitere Informationen zu dieser Funktion findest du in meinem Blogpost. Dateien und Verzeichnisse mit der Bibliothek browser-fs-access lesen und schreiben

Drag-and-drop-Unterstützung

Dateien lassen sich wie in plattformspezifischen Anwendungen per Drag & Drop in das Excalidraw-Fenster ziehen. Auf einer der die File System Access API unterstützt, ein gelöschtes sofort bearbeitet und die Änderungen in der Originaldatei gespeichert werden. Das bedeutet, intuitiv, dass Sie manchmal vergessen, dass Sie es mit einer Webanwendung zu tun haben.

Zugriff auf die Zwischenablage

Excalidraw funktioniert gut mit der Zwischenablage des Betriebssystems. Ganze Excalidraw-Zeichnungen oder auch nur Einzelne Objekte können in den Formaten image/png und image/svg+xml kopiert und eingefügt werden. eine einfache Integration mit anderen plattformspezifischen Tools wie Inkscape oder webbasierten wie SVGOMG.

</ph>

Dateiverwaltung

Excalidraw unterstützt bereits die experimentelle File Handling API, Das bedeutet, dass im Dateimanager des Betriebssystems auf .excalidraw-Dateien doppelgeklickt werden kann: direkt in der Excalidraw-App öffnen, da sich Excalidraw als Datei-Handler für .excalidraw registriert im Betriebssystem.

Deklarative Linkerfassung

Excalidraw-Zeichnungen können per Link geteilt werden. Hier ist eine Beispiel: Wenn in Zukunft Nutzer haben Excalidraw als PWA installiert, d. h. solche Links werden nicht in einem Browsertab geöffnet, sondern es wird ein neuen eigenständigen Fenster. Implementierung ausstehend; funktioniert dank deklarative Linkerfassung, war damals ein völlig neuer Vorschlag für eine neue Webplattform-Funktion.

Fazit

Das Web hat sich weiterentwickelt: Immer mehr Funktionen werden in Browsern veröffentlicht, Jahre oder sogar Monaten waren im Web undenkbar und exklusiv für plattformspezifische Anwendungen. Excalidraw nimmt eine Vorreiterrolle bei den Möglichkeiten des Browsers ein. Alle Browser auf allen Plattformen unterstützen alle von uns verwendeten Funktionen. Wenn Sie auf eine progressive verwenden wir die neuesten und besten Verbesserungen, wenn möglich. hinterherhinken. Beste Darstellung in allen Browsern.

Electron hat uns gute Dienste geleistet, aber 2020 und darüber hinaus können wir ohne sie auskommen. Ah, und dafür Ziel von @vjeux: Da im Android Play Store jetzt PWAs in einer Containerformat Vertrauenswürdige Webaktivitäten und seit dem Der Microsoft Store unterstützt PWAs, erhalten Sie Excalidraw in naher Zukunft in diesen Geschäften. In der Zwischenzeit können Sie Verwenden und installieren Sie Excalidraw immer im und über den Browser.

Danksagungen

Dieser Artikel wurde von @lipis geprüft. @dwelle und Joe Medley