paint.js.org: MS-Paint-Remake als PWA – mit Web Components und modernen Web-Capabilities

Inhaltsverzeichnis

Microsoft Paint ist der Dino unter den Produktivitätsanwendungen. Das 1985 erstmals erschienene Programm brachte Kinderaugen zum Leuchten und machte viele Anwender mit der Erstellung einfacher Computergrafiken vertraut. Nun kehrt die Windows-95-Variante in Form eines webbasierten Remakes in den Browser zurück.

Ja, es stimmt. Microsoft Paint war nie zu vergleichen mit Programmen wie GIMP oder Photoshop. Keine Ebenen, in einigen Versionen nur drei Undo-Schritte, je nach Version mehr oder weniger Dateiformate. Dennoch implementiert Paint exakt den Workflow, auf den jede Produktivitätsanwendung auf dem Desktop setzt:

• Dateien können vom Dateisystem geöffnet und dorthin gespeichert (neu angelegt oder überschrieben) werden.
• Dateien können per Drag-and-Drop in Paint geöffnet werden.
• Ein Doppelklick auf eine Bilddatei im Explorer öffnet Paint.
• Zeichnungen können über die Zwischenablage mit anderen Programmen ausgetauscht werden.

Jetzt feiert Paint mit all diesen Funktionen eine Renaissance im Browser: paint.js.org ist ein Remake von Microsoft Paint – als Progressive Web App (PWA), gebaut mit Web Components und unter Verwendung moderner Webschnittstellen zum Zugriff auf die Zwischenablage, das Dateisystem und die lokalen Schriftarten. Darüber hinaus unterstützt das Paint-Remake auch den Dark Mode. Das Programm lässt sich direkt im Browser ausführen und auf Wunsch auf dem Gerät installieren.

Einmal schreiben, überall verwenden

Als Progressive Web App ist die Anwendung per se auch plattformübergreifend einsetzbar: In Chrome, Edge, Firefox und Safari, auf Android und iOS, unter Windows, Chrome OS, macOS und Linux. Die PWA ist nicht nur offline verfügbar, sondern erlaubt auch den überwiegenden Großteil der aus Microsoft Paint bekannten Aktionen: Bilddateien laden, speichern, Ausschnitte kopieren und einfügen, einfache Zeichenoperationen. Realisiert wurde das Remake mit dem Canvas-Element, das sich für 2-D- und 3-D-Inhalte im Web eignet. Mithilfe der im Zuge der Entwicklung von Windows 8 spezifizierten Pointer Events werden Eingaben über die Maus, per Finger sowie Stift unterstützt. Auch kommen einige moderne Webschnittstellen aus dem Umfeld von Project Fugu zum Einsatz.

Neben der Plattformunabhängigkeit ist ein weiterer Vorteil webbasierter Anwendungen, dass diese oftmals kleiner ausfallen als ihre nativen Gegenstücke. Für das Paint-Remake müssen derzeit 276 KByte übertragen werden (Brotli-komprimierter Quellcode), während die Binärdatei des Originals 340 KByte groß ist.

Web Components bilden das Rückgrat der Anwendung

Die Anwendung setzt bewusst nicht auf ein größeres Anwendungsframework, sondern benutzt die Bibliothek Lit. Dabei handelt es sich um eine schlanke Bibliothek zum (einfacheren) Verfassen von Web Components. Diese wiederum lassen sich zu größeren Anwendungen zusammensetzen. Als Buildtool kommt das leichtgewichtige Snowpack zum Einsatz. Für die Offlineunterstützung generiert das Toolkit Workbox den passenden Service Worker. Die Codebase selbst ist in TypeScript implementiert.

Fugu-Schnittstellen schließen die Lücke zwischen Web und Native

Das Remake setzt eine ganze Reihe von Schnittstellen ein, die im Rahmen von Project Fugu eingeführt wurden: So etwa die Async Clipboard API, die asynchronen Zugriff auf die Zwischenablage erlaubt. Diese Schnittstelle unterstützen sämtliche aktuellen Browser – mit Ausnahme von Firefox. Andere Funktionen sind noch relativ neu und werden lediglich in Chromium-basierten Browsern (Chrome, Edge, Opera, Brave, Samsung Internet etc.) angeboten: Mithilfe der File System Access API (generell verfügbar ab Chromium 80) können Dateien direkt vom Dateisystem geöffnet und wieder dorthin gespeichert werden. Eine einmal geöffnete Datei lässt sich direkt aus der Anwendung heraus überschreiben. Darüber hinaus lässt sich eine Datei per Drag-and-Drop ins Browserfenster ziehen. Auch dann erhält der Browser Zugriff auf das Dateihandle und kann die Datei manipulieren.

Die "Send"-Funktion nutzt die Web Share API, um das gezeichnete Bild mit einer anderen installierten App zu teilen.

Auch ganz frische APIs sind dabei, die derzeit noch über about://flags gezielt vom Benutzer aktiviert werden müssen: Mit der Local Font Access API kann sich Paint die komplette Liste der installierten Schriftarten abholen, sofern der Benutzer dem zustimmt. Über die File Handling API kann sich eine Anwendung als Handler für eine bestimmte Dateierweiterung registrieren. Das Paint-Remake registriert sich bei Installation für die Dateierweiterung "png". Damit steht die Webanwendung für Dateien mit dieser Erweiterung über das Menü "Öffnen mit" zur Auswahl. Ist die Anwendung die einzige, die sich für eine Erweiterung registriert, übernimmt sie direkt die Rolle des Standardprogramms. Andernfalls kann der Benutzer sie als solches definieren. Dann wird die Anwendung per Doppelklick auf eine Datei mit der registrierten Dateierweiterung wieder gestartet.

Soweit möglich wird in allen Fällen das Konzept des Progressive Enhancement angewendet: Sollte eine API auf dem Zielsystem nicht vorhanden sein, wird eine Fallback-Schnittstelle gewählt, sofern verfügbar. Andernfalls wird die Funktion deaktiviert oder gar nicht erst angeboten.

Nur eine Nischenfunktion lässt sich im Web nicht abbilden

Die einzige Paint-Funktion, die auch in den Chromium-basierten Browsern nicht nachgebildet werden kann, ist das Festlegen der aktuellen Zeichnung als Desktophintergrund. Diese Funktion steht im Web nicht zur Verfügung. Sämtliche andere Funktionen lassen sich wie im Original oder leicht abgewandelt implementieren.

Das Paint-Remake unterstützt derzeit noch nicht alle Aktionen und Werkzeuge, die das Original mitbringt. Funktional vollständiger und besser auf unterschiedlichen Plattformen getestet ist das Remake jspaint.app, das jedoch nicht auf die neuen Schnittstellen zur Umsetzung von Dateisystemzugriff oder Offlinefähigkeit zurückgreift. Der Quellcode für das Paint-Remake ist auf GitHub zu finden.

Der Funktionsumfang des klassischen Paint war sicherlich nicht überragend. Und dennoch besitzt die Anwendung alle Eigenschaften einer typischen Produktivitätsanwendung. Das Remake zeigt, dass dank Project Fugu und zumindest auf Chromium-basierenden Browsern alle relevanten Schnittstellen für solche Anwendungen auch im Web verfügbar sind. Damit nimmt die Notwendigkeit nativer Anwendungen oder Wrapper-Ansätzen wie Electron (z.B. Slack, Visual Studio Code, Discord) zusehends ab. Das dürfte weiteren Geschäftsanwendungen, Büroprogrammen sowie Bild- und Videobearbeitungssoftware den Weg ins Web ebnen.

()