Progressive Web Apps entwickeln / programmieren – eine ausführliche Anleitung im Jahr 2023

In diesem Blogartikel wird ausführlich erklärt wie Sie progressive Web Apps entwickeln bzw. erstellen können.

Technologische Grundlagen von PWAs

Hier kommt ein kurzer Überblick über die technischen Grundlagen von progressive Web Apps.
Der Entwickler muss HTML, CSS und JavaScript beherrschen. Damit die App bei allen Bildschirm bzw. Displaygrößen gut aussieht muss der Entwickler responsive Webdesign umsetzen können. Damit die PWA wie eine App aussieht, benötigt diese ein App-Manifest. Zur Technologie einer PWA gehört auch die Installierbarkeit. Die Offline-Fähigkeit ist eine wichtige technologische Grundlage. Ein Service Worker sorgt dafür, dass die App installierbar ist und auch offline genutzt werden kann. Die Plattformunabhängigkeit, die Fähigkeit auf unterschiedlichen Betriebssystemen eingesetzt werden können ist eine sehr wichtige Technologische Grundlage.

Auffindbarkeit

Leider können PWAs in App Stores nicht gefunden werden. Weder im App Store von Google, Apple oder Microsoft. Es muss dafür gesorgt werden, dass PWAs in Suchmaschinen gefunden werden. Allerdings muss auch erwähnt werden, dass die Stores für ungeübte Nutzer nicht einfach zu verstehen sind.

Aber wie kann eine PWA in Suchmaschinen gefunden werden? Die PWA kann bei Suchmaschinen indiziert werden. Sie können einen WordPress-Blogartikel für eine PWA schreiben und diesen für die Suchmaschine indizieren oder Sie erklären in einem YouTube-Video Ihre App und indizieren das Video. Aus meiner Sicht ist es für den Nutzer ein Vorteil, wenn er PWAs in der Suchmaschine suchen und finden kann. Wenn ich als Nutzer vor Endgeräten sitze, suche ich Apps lieber in der Suchmaschine wie in 3 unterschiedlichen App Stores.

Sind progressive Web Apps vollverwertige Apps?

progressive Web Apps, abgekürzt PWAs sind noch immer nicht so richtig in der Gesellschaft angekommen. Oft wird behauptet, dass PWAs eine „echten“ Apps sind. Es gibt Personen die behaupten, dass progressive Web Apps sind mobile Websites. Das ist falsch! Es gibt viele Unterschiede zwischen PWAs und mobile Websites. mobile Websites fehlt zum Beispiel die Installierbarkeit. PWAs besitzen ein umfangreiches, sehr gut durchdachtes Konzept. Viele Entwickler arbeiten sehr fleißig daran, die Möglichkeiten von PWAs stetig zu verbessern. Die Programmiersprache Javascript ist eine vollwertige Programmiersprache die dafür sorgt, dass PWAs nahezu alles können, was native Apps auch können. Es gibt ein paar wenige Fähigkeiten die nativen Apps können und PWAs nicht. Aber in vielen sind PWAs nativen Apps ebenbürtig. Ich möchte mit diesem Artikel versuchen Appentwickler von PWAs zu begeistern, jedoch sage ich auch ganz deutlich, dass native Apps auch toll sind. Auf jeden Fall möchte ich die Personen, welche behaupten, dass PWAs das gleich sind wie mobile Websites, davon überzeugen, dass eine PWA wesentlich mehr kann wie eine mobile Webseite! Die Entwicklung von progressive Web Apps ist kostengünstiger als die Entwicklung von native Apps. Eine PWA kann auf allen Betriebssystemen eingesetzt werden. Alle PWAs die ich programmiert habe können auf allen Endgeräten und Betriebssystemen eingesetzt bzw. installiert werden. Bei der Entwicklung von native Apps muss für jedes Betriebssystem eine eigene App programmiert werden. Eine native App kann nur in einem Betriebssystem installiert werden. Deswegen ist das programmieren von PWAs kostengünstiger. „Progressive Web Apps entwickeln / programmieren – eine ausführliche Anleitung im Jahr 2023“ weiterlesen

Progressive Web Apps ( remote ) debuggen: Fehlersuche bei Android PWAs in Windows 11

In diesem Blogartikel erkläre ich, wie Sie eine progressive Web-App, die im Google-Betriebssystem Android installiert und genutzt werden kann, debuggen können.

Progressive Web-App – Was ist das?

Eine progressive Web-App ist eine Webseite, die zahlreiche Merkmale besitzt, die bislang nativen Apps vorbehalten waren. Die Abkürzung für progressive Web-App ist PWA.
Eine PWA wird mit HTML, CSS und Javascript entwickelt. Durch sogenannte Service Worker ist es möglich, dass progressive Web-Apps ohne Internetverbindung genutzt werden können. Mithilfe einer Manifest-Datei ist es möglich, dass eine progressive Web-App genauso aussieht wie eine Native App. Progressive Web-Apps sind plattformunabhängig, das bedeutet, sie können auf allen Betriebssystemen eingesetzt werden.

Debuggen – Was ist das?

Debuggen bedeutet, das Entfernen von Fehlern. Im Fall von diesem Artikel geht es um das Entfernen von Fehlern in einer progressiven Web-App.

Progressive Web-Apps debuggen im Betriebssystem Android – das Problem

Um progressive Web-Apps debuggen zu können, benötigen Sie die Entwickler-Tools des Google Browser Chrome. Auf diese Entwickler-Tools kann im Betriebssystem Android nicht zugegriffen werden.

Die Lösung – Remote Debugging

Remote Debugging bedeutet, dass die progressive Web-App auf einem Android-Gerät, entweder Smartphone oder Tablet läuft und die Fehlersuche auf einem Computer oder Laptop stattfindet.

Das Bild zeigt Debugging von der PWA Marlems Camera auf dem Laptop in Windows 11
Debugging von der PWA Marlems Camera auf dem Laptop in Windows 11

„Progressive Web Apps ( remote ) debuggen: Fehlersuche bei Android PWAs in Windows 11“ weiterlesen

5 barrierefreie Apps entwickelt von Marlem-Software im Jahr 2022

Das IT-Unternehmen Marlem-Software hat von Januar bis Juli 5 barrierefreie Apps entwickelt.

Gesetzliche Verpflichtung zum Einsatz von barrierefreien Apps

Im Gesetz zur Gleichstellung von Menschen mit Behinderungen (Behindertengleichstellungsgesetz – BGG)
§ 12a Barrierefreie Informationstechnik steht Folgendes:

(1) Öffentliche Stellen des Bundes gestalten ihre Websites und mobilen Anwendungen,
einschließlich der für die Beschäftigten bestimmten Angebote im Intranet, barrierefrei.
Schrittweise, spätestens bis zum 23. Juni 2021, gestalten sie ihre elektronisch unterstützten Verwaltungsabläufe, einschließlich ihrer Verfahren zur elektronischen Vorgangsbearbeitung und elektronischen Aktenführung, barrierefrei. Die grafischen Programmoberflächen sind von der barrierefreien Gestaltung umfasst.

Quelle: Behindertengleichstellungsgesetz – BGG § 12a Barrierefreie Informationstechnik

Öffentliche Stellen des Bundes sind gesetzlich dazu verpflichtet, Apps einzusetzen, die barrierefrei sind. Eine Suche mit der Suchmaschine Google nach
barrierefreie appentwicklung
barrierefreie apps

zeigt, dass die öffentlichen Stellen des Bundes nicht gewillt sind, ihrer gesetzlichen Verpflichtung nachzukommen.
Deswegen habe ich beschlossen, dass ich dieses Jahr viele barrierefreie Apps entwickle, damit das Thema in der Gesellschaft ankommt.

Wann sind Apps barrierefrei?

Was bedeutet der Begriff „barrierefreie Apps“?
Eine App ist dann barrierefrei, wenn sie für Menschen mit unterschiedlichen körperlichen Einschränkungen oder Behinderungen nutzbar sind.

Tastatur mit einer Taste auf der Barrierefrei steht
Quelle: Edler von Rabenstein – 252045538 / Shutterstock.com

„5 barrierefreie Apps entwickelt von Marlem-Software im Jahr 2022“ weiterlesen

Progressive Web Apps installieren in den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS

In diesem Blogartikel erkläre ich, wie progressive Web-Apps in den Betriebssystemen Windows, Android, IOS, Ubuntu und Mac OS.

Barrierefreie Appentwicklung – Was ist das?

Barrierefreie Appentwicklung bedeutet, dass eine App so entwickelt wird, dass alle Menschen, auch Menschen mit Behinderungen und anderen körperlichen Einschränkungen, eine App bedienen können.

Warum ist barrierefreie Appentwicklung wichtig?

Das Ziel einer Gesellschaft sollte sein, dass Informatik für alle Menschen nutzbar ist.
Im Behindertengleichstellungsgesetz in § 12a Barrierefreie Informationstechnik steht, dass öffentliche Stellen des Bundes dazu verpflichtet sind, Apps barrierefrei zu gestalten.
Quelle: Behindertengleichstellungsgesetz in § 12a Barrierefreie Informationstechnik

Progressive Web-App – Was ist das?

Eine progressive Web-App ist eine Webseite, die zahlreiche Merkmale besitzt, die bislang nativen Apps vorbehalten waren. Die Abkürzung für progressive Web-App ist PWA.
Eine PWA wird mit HTML, CSS und Javascript entwickelt. Durch sogenannte Service Worker ist es möglich, dass progressive Web-Apps ohne Internetverbindung genutzt werden können. Mithilfe einer Manifest-Datei ist es möglich, dass eine Web-App genauso aussieht wie eine native App. Das Manifest ist eine Textdatei in JSON-Format. Dadurch ist es sehr einfach das Manifest zu lesen und zu verstehen. Web-Apps sind plattformunabhängig, das bedeutet, sie können auf allen Betriebssystemen eingesetzt werden.

PWAs sind installierbar, in Englisch installable. Damit eine Web App installable ist, müssen bestimmte Kriterien erfüllt sein. Folgende Kriterien müssen erfüllt sein, damit eine progressive Web-App  installierbar ist:

  • Sie benötigt ein Manifest, auch Web Manifest genannt.
  • Sie benötigt ein App-Icon in 4 unterschiedlichen Größen
  • Sie benötigt einen Service Worker

Wenn diese 3 Bedingungen erfüllt sind, dann ist eine Web App installable.

„Progressive Web Apps installieren in den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS“ weiterlesen

Progressive Web Apps barrierefrei entwickeln – Kurzanleitung

Progressive Web Apps (abgekürzt PWAs) sind plattformunabhängig und es ist sehr einfach eine Progressive Web-App barrierefrei zu entwickeln.  In diesem Artikel gibt es eine kurze Anleitung wie progressive Web Apps entwickelt werden.

Was ist eine App?

App ist die Abkürzung für Application. Application ist englisch und heißt auf deutsch Anwendung. Eine App ist also eine Anwendungen. Früher konnten Apps nur auf Smartphones und Iphones installiert werden. Dann wurden das Tablet und Ipad erfunden. Auf diesen Geräten ist es auch möglich Apps zu installieren. Inzwischen wird Software für Desktop-Betriebssysteme auch Apps genannt. Apps sind die Zukunft.

Gesetzliche Verpflichtung für Öffentliche Stellen des Bundes

Im Behindertengleichstellungsgesetz – BGG § 12a Barrierefreie Informationstechnik Absatz 1 steht:

(1) Öffentliche Stellen des Bundes gestalten ihre Websites und mobilen Anwendungen, einschließlich der für die Beschäftigten bestimmten Angebote im Intranet, barrierefrei. Schrittweise, spätestens bis zum 23. Juni 2021, gestalten sie ihre elektronisch unterstützten Verwaltungsabläufe, einschließlich ihrer Verfahren zur elektronischen Vorgangsbearbeitung und elektronischen Aktenführung, barrierefrei. Die grafischen Programmoberflächen sind von der barrierefreien Gestaltung umfasst.

Quelle: Behindertengleichstellungsgesetz – BGG § 12a Barrierefreie Informationstechnik

Es gibt also für den Staat eine gesetzliche Verpflichtung, dass nur Apps eingesetzt werden dürfen, die barrierefrei sind.

Progressive Web App – Definition

Progressive Web Apps, sind Apps die mit

  • HTML5
  • CSS ( Cascading Style Sheets )
  • Javascript / jQuery

Programmiert werden.

Oft wird die Abkürzung PWA für progressive Web-App verwendet.

Progressive Web Apps sind plattformunabhängig, das bedeutet, sie funktionieren auf allen Betriebssystemen. Sie können auch auf allen Geräten wie Laptop, PC, Smartphone, Iphone, Tablet, Ipad eingesetzt werden.

jQuery ist eine freie JavaScript-Bibliothek, die Funktionen zur DOM-Navigation und -Manipulation zur Verfügung stellt. jQuery ist die meistverwendete JavaScript-Bibliothek und vereinfacht die Programmierung von progressive Internetapps.
Es ist sehr einfach Progressive Web Apps zugänglich zu entwickeln. Hierfür müssen die gleichen Richtlinien umgesetzt werden, wie wenn eine Internetseite behindertengerecht entwickelt werden soll.

5 barrierefreie progressive Web Apps entwickelt von Markus Lemcke im Betriebssystem IOS
5 barrierefreie progressive Web Apps entwickelt von Markus Lemcke im Betriebssystem IOS

„Progressive Web Apps barrierefrei entwickeln – Kurzanleitung“ weiterlesen

Barrierefreie Appentwicklung: 10 Tipps für zugängliche progressive Web Apps

In diesem Artikel geht es um barrierefreie Appentwicklung. Ich  gebe ich 10 Tipps wie progressive Web Apps zugänglich bzw. barrierefrei entwickelt werden können.

Appentwicklung – Definition

Appentwicklung ist der Vorgang oder Prozess, durch den eine mobile App für Smartphones, Iphones, Tablets oder Ipads, entwickelt wird.
Wie bei der Softwareentwicklung muss bei der Appentwicklung eine große Anzahl an unterschiedlichen Endgeräten berücksichtigt werden.
Appentwicklung kann mit Java, Objective-C, Swift oder Web-Apps mit HTML, CSS und Javascript umgesetzt werden.

Was sind progressive Web Apps

Eine Progressive Web App ist eine responsive Webseite, die zahlreiche Merkmale besitzt, die bislang nativen Apps vorbehalten waren. Sie kann erstellt werden wie eine Webseite mit HTML5, CSS3 und JavaScript. Die offizielle Abkürzung für Progressive Web App ist PWA.

Was ist barrierefreie App-Entwicklung als progressive Web-Apps?

Barrierefreie App-Entwicklung bedeutet, dass Progressive Web-Apps so entwickelt werden, dass alle Menschen, auch Menschen mit körperlichen Einschränkungen, sie bedienen können.

Tastatur mit einer Taste auf der Barrierefrei steht
Quelle: Edler von Rabenstein – 252045538 / Shutterstock.com

„Barrierefreie Appentwicklung: 10 Tipps für zugängliche progressive Web Apps“ weiterlesen

barrierefreie Appentwicklung: Progressive Web Apps

Seit September 2016 steht im Gleichstellungsgesetz für Menschen mit Behinderungen dass staatliche Einrichtungen dazu verpflichtet sind, mobile Anwendungen, umgangssprachlich App, barrierefrei zu gestalten. In diesem Artikel erkläre barrierefreie App-Entwicklung anhand von Progressive Web Apps.

Barrierefreie Appentwicklung – Gleichstellungsgesetz für Menschen mit Behinderungen

Im Gleichstellungsgesetz für Menschen mit Behinderungen steht seit September 2016 in § 12a Barrierefreie Informationstechnik Absatz 1 folgendes:

(1) Öffentliche Stellen des Bundes gestalten ihre Websites und mobilen Anwendungen, einschließlich der für die Beschäftigten bestimmten Angebote im Intranet, barrierefrei. Schrittweise, spätestens bis zum 23. Juni 2021, gestalten sie ihre elektronisch unterstützten Verwaltungsabläufe, einschließlich ihrer Verfahren zur elektronischen Vorgangsbearbeitung und elektronischen Aktenführung, barrierefrei. Die grafischen Programmoberflächen sind von der barrierefreien Gestaltung umfasst.

Quelle: Gesetz zur Gleichstellung von Menschen mit Behinderungen (Behindertengleichstellungsgesetz – BGG)

Mobile Anwendungen sind Apps. Somit sind staatliche Einrichtungen dazu verpflichtet, wenn sie Apps einsetzen, darauf zu achten, dass diese Apps barrierefrei sind.

So sieht Marlems Sprechassistent auf einem Android Smartphone aus:
Marlems Sprechassistent auf einem Android Smartphone

„barrierefreie Appentwicklung: Progressive Web Apps“ weiterlesen