SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

JavaScript/Tutorials/App

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
PWA Logo.svg
Dieser Kurs möchte die grundlegendsten Dinge vorstellen, die es beim Erstellen einer Progressive Web App braucht.

Eine PWA ist im Grunde nichts anderes als eine gewöhnliche Internetseite, welche von einem Browser regulär angezeigt werden kann. Durch ein paar Extras „versteht“ der Browser jedoch, dass er für diese Seite ein besonderes Lesezeichen anlegen kann, um sie offline verfügbar zu machen. Damit eignet sich eine PWA als plattformübergreifende Mobil-App.[1]

  • Offline-Browsing
    • Installation
    • Manifest-Datei
    • ServiceWorker
     
  • Daten mit JS nachladen
    • Fetch API
    • WebSockets
     
  • Push Notifications
    • Benachrichtigungen senden
    • Wie kann man sie abschalten?
     


App ist eine Verkürzung des englichen Begriffs Application, was die Anwendungssoftware eines Computers bezeichnet. Die Kurzform kam zunächst für Programme im Apple Store für iOS Geräte auf[2], weswegen im englischen Sprachgebrauch auch häufig mobile app verwendet wird, sie wird aber zunehmend auch für Anwendungssoftware auf klassischen PCs verwendet.

Kennzeichnend für mobile Apps ist, dass sie für Geräte mit kleinen Bildschirmen und wenig Speicher entwickelt werden. Sie müssen daher effizient und platzsparend erstellt werden und können nur eine begrenzte Menge an Funktionen anbieten.

Seit Mobiltelefone immer leistungsfähiger werden, muss man leider feststellen, dass diese Kompaktheit immer mehr nachlässt. Kompakte Software bedeutet auch, auf Abstraktionsbibliotheken zu verzichten und direkt für das Betriebssystems zu programmieren. Das ist umständlicher und dauert länger; vor allem, wenn man eine App für mehrere Betriebssysteme anbieten will. Und so findet man beispielsweise schlechte, Werbung schleudernde Sudoku Apps, die 25MB belegen, während andere, viel bessere Apps mit sehr viel weniger Datengröße auskommen.

Arten von Apps

Es gibt unterschiedliche Arten, Apps zu erstellen. Je nach verwendetem Baukasten unterscheidet man native Apps, hybride Apps und progressive Web-Apps.

Native Apps

Native Apps [3] haben neben dem freien Internet einen festen Platz gefunden. Sie gelten als schnell, da sie in der nativen Programmiersprache des jeweiligen Betriebssystems (ObjectiveC für iOS, bzw. Java für Android) geschrieben wurden. Andererseits ist man an dieses System gebunden, da man sie nur schwer auf andere Plattformen portieren kann und von den App-Stores der jeweiligen Plattformen abhängig ist.

Geburtsstunde der Nativen Apps war 2008, als Apple für das damals neue iPhone einen App Store einrichtete.

Sie können sehr leicht über ein herstellerspezifisches Online-Portal wie Google Play oder AppStore bezogen und installiert werden. Um in diesen Portalen präsent zu sein, kapselten viele Anbieter von Webseiten ihre Inhalte in Native Apps. Dies läuft einerseits dem Gedanken des freien Internets zuwider, stellt Anbieter von Inhalten aber auch vor Probleme, da es für sie anfänglich zu Kosten führt, andererseits auch gute Bewertungen nicht eine eventuelle Entfernung aus dem Portal verhindern können, wenn Apple oder Google die Geschäftsbedingungen ändern.

hybride Apps

Hybrid-Apps vereinen die Vorteile von nativen Apps und Webanwendungen, indem Quellcode in HTML und JavaScript geschrieben und plattformübergreifend verwendet werden kann. Hybrid-Apps laufen – für den Nutzer nicht sichtbar – innerhalb des nativen Webbrowsers der jeweiligen Plattform, z. B. Safari oder Google Chrome.

Frameworks wie z.B. PhoneGap von Adobe ermöglichen es, die plattform-spezifischen Fähigkeiten einzubinden. Sie enthalten eine Komponente, die von der konkreten App unabhängig ist und dem JavaScript-Code der hybriden App den direkten Zugriff auf die Programmierschnittstellen des Mobilgeräts ermöglicht. Deswegen müssen solche Apps wie native Apps installiert werden.

Dabei bieten die Frameworks auch die Möglichkeit, die App so an die spezifische Benutzerführung der iPhone- bzw. Android-Welten anzupassen, dass an das jeweilige System gewöhnte Benutzer gut mit der App umgehen können. Da nur die wenigsten Nutzer auf mehreren Handys surfen, fällt das unterschiedliche Design im Normalfall gar nicht auf.

PWA (Progressive WebApps)

Sie können aber auch Applikationen nur mittels HTML 5 und JavaScript erstellen, die im Browser ausgeführt werden und keine Sonderrechte beim Zugriff auf Geräteschnittstellen haben. Sie sind auf die APIs beschränkt, die auch Webseiten zur Verfügung stehen. Durch den Einsatz eines Service Workers und einer Manifest-Datei ist es aber möglich, eine solche Webseite so auf dem Gerät zu installieren, dass es auch ohne eine Onlineverbindung ausgeführt werden kann. Die Installation ist nicht zwingend, die Entscheidung liegt beim Anwender. Auch ohne Installation ist ein Offline-Betrieb möglich, weil der Serviceworker auch bei Aufruf im Browser im Stande ist, die für den Offline-Betrieb gespeicherten Ressourcen bereitzustellen.

Während früher der mangelnde Zugriff auf die verschiedenen Hardware-Komponenten der einzelnen Mobilgeräte wie Nutzung von Kamera, Geolocation oder das Abfragen des Batteriestatus bemängelt wurde, entwickelt die Device and Sensors Working Group des W3C viele neue JavaScript-APIs, die den Nutzen mobiler Web-Apps progressiv verbessern können.

Eine PWA ist nicht auf mobile Geräte beschränkt. Man spricht zwar oft von Progressive Mobile Web-Apps, die verwendeten Techniken funktionieren aber genauso gut auf Desktop-PCs. Wenn du mit deinem Laptop in der Bahn sitzt und durch ein Funkloch fährst, ist eine PWA auch auf diesem Gerät von Nutzen. Das Problem auf Desktop-Geräten ist nur, dass die Installation einer PWA als Desktop-Icon nur von Browsern auf Chromium-Basis unterstützt wird. Die Desktop-Versionen von Firefox und Safari bieten diese Funktion nicht (mehr) an. ServiceWorker, die Voraussetzung für den Offline-Betrieb sind, sind aber auf allen modernen Browsern verfügbar.

Was sind progressive Web-Apps

Das Web ist eine Plattform, das auf einer Vielzahl von Geräten und Betriebssystemen allgegenwärtig ist. Sein auf den Anwender orientiertes Sicherheitsmodell und der Umstand, dass weder Spezifikation noch Implementierung von einem einzelnen Unternehmen beherrscht werden, macht das Web zu einer einzigartigen, stets aktuellen Softwareplattform. Webanwendungen können mit einer einzigen Codebasis jeden erreichen, überall und auf jedem Gerät.[5].

Plattformspezifische Anwendungen sind für ihren Funktionumfang und ihre Zuverlässigkeit bekannt. Sie sind immer da, auf Startbildschirmen, Docks oder Taskleisten. Sie funktionieren unabhängig von Netzwerkverbindungen. Sie starten mit dem ihnen eigenen Erscheinungsbild. Sie können im lokalen Dateisystem lesen und schreiben, Hardware ansprechen und Daten auf dem Gerät verwenden, z. B. Kontakte oder Termine. In diesen Anwendungen kannst du fotografieren oder die Audiowiedergabe steuern. Apps fühlen sich wie ein Teil des Gerätes an, auf dem sie laufen.

Im Vergleich haben plattformspezifische Apps die meisten Möglichkeiten, und Web Apps die beste Reichweite. PWAs stehen dazwischen, sie versuchen, verbesserte Möglichkeiten, Verlässlichkeit und Installierbarkeit zu bieten und dabei jeden überall und auf jedem Gerät zu erreichen.

Möglichkeiten

Das Web verfügt heute über sehr viele Möglichkeiten. Man kann beispielsweise mit WebRTC, Geolocation und Push-Notifications eine hyper-lokale Videochat-App bauen und diese App installierbar machen. Mit Hilfe von WebAssembly können auch andere Ökosysteme wie C, C++ oder Rust einbezogen werden.

Bis vor kurzem konnten aber nur native Anwendungen die Geräteeigenschaften wirklich nutzen. Einiges ist immer noch außer Reichweite des Webs, es werden aber immer weitere APIs entwickelt, um das zu ändern und Features wie Dateisystemzugriff, Mediensteuerung, Badging (die Anzeige einer kleinen Info am App-Icon, z. B. die Zahl der ungelesenen Mails) oder die Zugriff auf die Zwischenablage zu ermöglichen.

Verlässlichkeit

Die Ladegeschwindigkeit entscheidet mit darüber, ob Anwender eine Webseite – oder App – nutzen oder sie gleich wieder verlassen. Das endet nicht beim load-Event. Die Benutzer müssen immer merken, ob eine Interaktion von der App registriert wurde oder nicht. Scrolling und Animationen sollen glatt erscheinen.

Eine verlässliche Anwendung soll auch funktionieren, wenn keine Netzwerkverbindung besteht. Sie soll die zuletzt genutzten Daten zur Verfügung haben. Und wenn ein Serverzugriff benötigt wird, und nicht gelingt, soll es eine klare Meldung geben, statt keiner Reaktion, oder einem Crash der App.

Installierbar

Installierbare progressive Web Apps laufen in ihrem eigenen Fenster, nicht in einem Browser-Tab. Sie können vom Desktop oder aus dem Startmenü aufgerufen werden, sie können auf dem Gerät gesucht werden und man kann mit dem Taskwechselmechanismus des jeweiligen Geräts zu ihnen wechseln. Sie fühlen sich an, als wären sie nativ installiert.

Eine installierte App hat einige neue Möglichkeiten. Beispielsweise reservieren Browser einige Tastaturkombinationen für sich. PWAs können sich dafür registrieren, Inhalt von anderen Anwendungen zu erhalten oder Default-Anwendung für bestimmte Dateitypen zu sein.[6]

In den nächsten Kapiteln stellen wir vor, wie man eine solche PWA erstellt.

Weblinks

  1. ↑ MDN: Progressive Web-Apps
  2. ↑ Wikipedia: Anwendungssoftware, Begriffsbestimmungen
  3. ↑ Wikipedia: Native Mobile Apps
  4. ↑ infrequently.org: Progressive Web Apps: Escaping Tabs Without Losing Our Soul, abgerufen am 06.08.2021
  5. ↑ Übersetzte Auszüge eines Artikels auf web.dev, der Entwicklerplattform von Google
    web.dev: What are Progressive Web Apps, abgerufen am 06.08.2021
  6. ↑ css-tricks: Why would a business push a native app over a website? von Chris Coyier, 10.12.2021
Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/Tutorials/App&oldid=102835“