Eine Progressiv Web App

für digitalisierte Therapieprotokolle von Onkopti®
Onkopti bietet ein sehr umfangreiches Archiv von Therapieprotokollen an, die wissenschaftlich Strukturiert und mit einem intelligenten Suchfilter ausgestattet sind.


Was ist eine Progressive Web App?

Eine Progressiv Web App mit WordPress ist zunächst eine Webseite, die im Browser aufgerufen und auf dem Endgerät installiert werden kann. (Desktop und mobile Endgeräte)

Nach der Installation stehen Funktionen zur Verfügung, die sonst nur “echte” (native) Apps bieten.

Zu den technischen Details
Wordpress PWA

Typische Funktionen über die normalerweise nur nativen Apps verfügen:

App-like Design

Responsive Design, Slider Navigation und OS typischer Look gibt dem Nutzer das Gefühl, als würde es sich um eine “echte”> App handeln.

Push Notifications

Senden von Mitteilungen direkt an den Benutzer der App. Web Push Notification wird von Chrome und Safari unterstützt.

Offline-Funktionalität

Auch ohne Internetverbindung, kann auf die zuvor besuchten Seiten zugegriffen werden. Daten können Lokal gespeichert werden.

Hardwarezugriff

Die Web-App kann zum Beispiel Zugriff auf die GPS Daten erhalten, um so einen Kartenausschnitt der Umgebung anzuzeigen.

Vorteile gegenüber nativen Apps:

Vereinfachte Veröffentlichung

Im Gegensatz zu Apps im Apple Store oder im Play Store, können Progressive Web Apps sofort aktualisiert werden. Veränderungen sind sofort sichtbar. Dagegen kann sich die Veröffentlichung einer neuen App Version über mehrere Tage ziehen. Außerdem gelten keine Store Richtlinien, die oft Probleme machen können.

Sichtbarkeit bei Google

Die Web Application, bzw. der Inhalt der Seiten kann von Google indexiert werden und erscheint so auf den Ergebnisseiten. Bei Nativen Apps ist das so nicht möglich.

Praktische Realisation mit WordPress

wordpress app

PWA features der OnChemo App:

Als Basis dient eine WordPress Instanz, auf der weitere Dienste und Schnittstellen aufgesetzt wurden.


  • Homescreen Icon
  • Offline Nutzbar
  • Die Installation kann direkt von der Webseite erfolgen.
  • Installation mittels QR-Code, den Sie an Ihre Kunden versenden oder auf Ihre Werbeunterlagen drucken können.
  • Auch auf Desktop Computer mit Chrome Browser installierbar.

Diese Anforderungen sind sehr gut als PWA umsetzbar. Die Installation auf Desktop oder Mobil bietet dem täglichen Nutzer den schnellen Zugriff auf die Anwendung und die Ausführung in einem eigenen Fenster, währendem bei der Nutzung im Browser das Fenster nur über ein zusätzliches Tab zugänglich ist.

Die PWA bietet also im Vergleich eine deutliche Verbesserung der user experience. Bereits geladene Seiten werden lokal gespeichert und können so auch Offline angezeigt werden.
QR Code

Technische Details:

Sogenannte Service Worker sorgen für die lokale Speicherung der Daten, wodurch eine Nutzung im Offline Betrieb ermöglicht wird.

Das Web-Manifest regelt wie die Installation von statten geht und was der Nutzer währenddem zu sehen bekommt.

Diese Techniken werden in unterschiedlichen Webtechnologien eingesetzt, um Webseiten wie Anwendungen erscheinen zu lassen.

Vorteile:

  • Kostengünstig
  • kürzere Entwicklungszeit
  • weniger update und Migrationsaufwand, bzw. unabhängiger von Betriebssystem
  • Funktioniert auch auf Windows und Mac Desktop Computer

Nachteile::

  • Je nach Betriebssystem muss entweder Chrome oder Safari installiert sein.
  • Die Implementierung bei Firefox ist zwar geplant, wird aber noch länger auf sich warten lassen (Stand Jan. 2022).


Ob diese Punkte überhaupt wichtig für ihr vorhaben sind, ist abhängig von der gestellten Aufgabe die von der Anwendung realisiert werden soll. Außerdem sollte man immer die konkrete Zielgruppe im Auge haben, um zu entscheiden ob es eine native oder webbasierende Applikationen werden soll.

Es ist wichtig den aktuellen Entwicklungsstand zu verfolgen, da es viele Besonderheiten bei der Unterstützung einzelner Services gibt:

  • Push Notifications funktionieren bei iOS PWA nicht. Die Lösung bietet TWA (mehr dazu weiter unten).
  • Auf iOS muss der Safari Browser extra angewiesen werden, um die App zu installieren. Für die meisten iOS Nutzer dürfe das aber kein Hinderungsgrund sein.
  • Die App im Hintergrund ausführen oder der Zugriff auf die Bluetooth Schnittstelle ist bei iOS auch nicht möglich.
  • Betriebssystem nahe Funktionen, wie Fingerprint und kontaktloses Bezahlen werden ebenfalls oft (noch) nicht unterstützt.


Weiter Einsatzmöglichkeiten, wie zum Beispiel: Quizz-Apps, Kalkulatoren oder Wahl-O-Maten sind denkbar.

Es ist abzusehen, dass sich das PWA Konzept weiter durchsetzen wird,

da schon heute viele PWA (bzw. TWA) Apps in den App Stores zur Installation angeboten werden.


Wie kann man eine WordPress Seite als mobile App im Apple App Store oder bei Google Play anbieten?


Sehr vereinfacht ausgedrückt, wird auf Basis der zuvor erläuterten Progressive WordPress App ein Android oder iOS App kompiliert. Die anschließende Distribution im App Store funktioniert dann genau wie bei jeder anderen App.

Kompliziert ausgedrückt, wird auf der Clientseite (dem Android Endgerät auf dem das native App ausgeführt wird) eine sogenannte Trusted Web Activity (TWA) genutzt. Dadurch ist die Anwendung lizensiert und kann als Application ausgeführt werden.

Notizen zu der nativen App Entwicklung


iOS Apps werden mit C oder Switch und Android mit Java und Kotelin programmiert. Man muss also zwei Ökosysteme bedienen, was einen erheblichen Mehraufwand bedeutet. Abhilfe schaffen hier Frameworks wie Cordana oder Xamarin (Microsoft), die es ermöglichen mit nur einer Entwicklungsumgebung für beide Systeme lauffähigen Code zu kompilierten.

Aber auch hier sind die Entwicklungskosten um ein vielfaches höher, im Verglich zu einem PWA/TWA Projekt. Die reichhaltigen Einsatzmöglichkeiten die WordPress bietet und den einfache Vertriebsweg den PWA ermöglicht, werden sicherlich noch viele interessante Anwendungen entstehen lassen. Auch in Bereichen für die eine native App Entwicklung nicht ins budget passt.