Dazu kommt eine responsive Oberfläche, die sich vom kleinen Handy bis zum großen Bildschirm anpasst. So genügt eine einzige Codebasis für alle Geräte, ob mobil oder am Desktop.
Leistung · Für Museen, Hochschulen und Ämter
Progressive Web Apps
Eine Progressive Web App, kurz PWA, ist eine Web-App, die sich wie eine App verhält: Man öffnet sie per Link oder QR-Code, legt sie auf den Startbildschirm und nutzt sie auch offline. Wir entwickeln PWAs für Museen, Hochschulen und Ämter. Unsere drei Eigenentwicklungen Waldzeit, Fadenlauf und Wegwarte sind genau so gebaut.
01 Begriff
Was ist eine Progressive Web App?
Eine Website, die sich installieren lässt und ohne Netz weiterläuft.
Eine Progressive Web App ist aus denselben Bausteinen gebaut wie eine Website, aus HTML, CSS und JavaScript, und läuft im Webbrowser. Sie bringt aber mit, was man sonst von Apps kennt: ein Icon auf dem Startbildschirm, ein eigenes Fenster ohne Adressleiste und Funktionen, die auch ohne Internet gehen. Aus dem App Store muss niemand etwas laden, ein Link oder ein QR-Code genügt.
Möglich machen das zwei Dateien. Das Web-App-Manifest beschreibt die App für das Betriebssystem: Name, Icon, Farben und die Adresse, mit der sie startet. Der Service Worker ist ein kleines Skript, das zwischen App und Netz sitzt. Er legt Dateien im Zwischenspeicher des Browsers ab, dem Cache, und entscheidet bei jeder Anfrage, ob die Antwort aus dem Netz oder aus dem Speicher kommt.
Warum heißt das progressiv?
Der Name kommt von der progressiven Verbesserung (Progressive Enhancement): Jeder Browser zeigt die Seite an, und je mehr ein Browser kann, desto mehr App wird daraus. Den Begriff Progressive Web App prägten 2015 die Designerin Frances Berriman und der Chrome-Entwickler Alex Russell. Bekannt wurde die Technik durch große Anbieter wie den indischen Onlinehändler Flipkart, Starbucks oder Trivago.
Service Worker unterstützen heute alle großen Browser: Chrome, Microsoft Edge, Safari und Firefox, auf Android, iOS und am Desktop. Wie weit die Installation geht, unterscheidet sich je nach Browser und Betriebssystem.
02 Bausteine
Woraus eine PWA besteht
Drei Dinge machen aus einer Web-App eine installierbare App. Alle drei Eigenentwicklungen haben sie.
-
Web-App-Manifest
Eine kleine Datei mit Name, Kurzname, Icons, Farben und Startadresse. Daraus baut das Betriebssystem das Icon auf dem Startbildschirm und das eigene Fenster der App, ohne Leisten des Browsers.
-
Service Worker
Ein Skript, das im Hintergrund zwischen App und Netz vermittelt. Es speichert, was die App ohne Netz braucht, und liefert es aus dem Speicher, wenn das Netz fehlt oder zu langsam ist. Was aus dem Speicher kommt, ist sofort da, auch offline.
-
HTTPS
Service Worker laufen nur über eine verschlüsselte Verbindung, damit unterwegs niemand den Code austauschen kann. Unsere Eigenentwicklungen laufen auf einem eigenen Server in Deutschland, mit HTTPS und strengen Regeln, welche Skripte eine Seite laden darf (Content-Security-Policy).
03 Vergleich
PWA, native App oder Website?
Drei Wege auf das Smartphone. Die PWA verbindet den Link der Website mit dem Icon der App.
-
Website
- So öffnet man sie
- Adresse eingeben, Link antippen oder QR-Code scannen.
- Ohne Netz
- Nicht nutzbar. Jede Seite kommt frisch vom Webserver.
- Updates
- Sofort bei allen.
- Auf dem Gerät
- Ein Lesezeichen im Browser.
-
So bauen wir
Web-App (PWA)
- So öffnet man sie
- Wie eine Website. Wer will, installiert sie und findet sie danach als Icon neben den anderen Apps.
- Ohne Netz
- Läuft weiter, so weit der Service Worker die Dateien gespeichert hat.
- Updates
- Kommen direkt vom Server, ohne Prüfung durch einen App Store.
- Auf dem Gerät
- Kamera, Standort und Push-Benachrichtigungen über die Schnittstellen des Browsers.
-
Native App
- So öffnet man sie
- Im App Store oder bei Google Play suchen und installieren.
- Ohne Netz
- Alles, was mit der Installation auf das Gerät kam.
- Updates
- Jede neue Fassung geht durch die Prüfung der Stores.
- Auf dem Gerät
- Voller Zugriff auf die Gerätefunktionen, auch im Hintergrund.
Unsere drei Eigenentwicklungen sind Web-Apps. Ob Ihr Vorhaben eine App aus dem App Store braucht, klären wir im ersten Gespräch. Wie sich native und hybride Apps unterscheiden, steht auf der Seite App entwickeln lassen.
04 Beispiele
Drei PWAs, dreimal anders offline
Was ohne Netz gehen muss, hängt vom Einsatz ab. So machen es unsere drei Web-Apps.
-
Waldzeit · LernspielNach dem ersten Besuch liegt das ganze Spiel auf dem Gerät. -
Fadenlauf · MediaguideTexte, Bilder und Ton einer Sprache auf Wunsch für Räume ohne Netz. -
Wegwarte · WebGISOhne Netz zeigt die Karte den letzten bekannten Stand.
Waldzeit: das ganze Spiel im Speicher
Beim ersten Besuch legt der Service Worker von Waldzeit über 100 Dateien ab: Seiten, Code, Schriften und mehr als 80 Bilder des Waldes. Bilder und Schriften kommen danach immer aus dem Speicher. Seiten und Code holt er zuerst aus dem Netz, damit nach einem Update sofort der neue Stand läuft. Antwortet das Netz nicht innerhalb von 3,5 Sekunden, etwa im schwachen WLAN an einer Station in der Ausstellung, springt der Speicher ein. Spieldaten, die Spielende freigegeben haben, bleiben im Browser liegen und gehen an den Server, sobald er wieder erreichbar ist.
Fadenlauf: der Rundgang zum Mitnehmen
Der Mediaguide holt Oberfläche und Inhalte zuerst aus dem Netz, damit freigegebene Texte sofort bei allen ankommen, und fällt ohne Verbindung auf den Speicher zurück. In den Einstellungen lädt „Für offline speichern“ Texte, Bilder und Hörtexte der gewählten Sprache auf das Handy, vorher zeigt der Guide, wie viele Megabyte das sind. Der Ton spielt danach aus dem Speicher, auch auf dem iPhone: Der Service Worker beantwortet dafür die Teilanfragen, mit denen Safari Audio lädt. Eine Frage an das Team, die ohne Netz gestellt wird, schickt der Guide ab, sobald die Verbindung zurück ist.
Wegwarte: die Karte mit dem letzten Stand
Stadt und Auftrag ausgedacht
In der Fachanwendung liegt das Gerüst der App im Speicher, die sogenannte App-Shell, samt Kartenbibliothek und Schriften. Die öffentlichen Kartendaten kommen immer frisch vom Server, ohne Netz zeigt die Karte den letzten bekannten Stand. Einen Hinweis melden kann man nur mit Verbindung. Bewusst nie im Speicher landen Suchbegriffe, der Ort einer Meldung, Einmal-Schlüssel und der interne Bereich.
05 Leistungen
Was wir für Ihre PWA tun
Von der Frage, was offline gehen muss, bis zum Betrieb.
-
Offline-Konzept
Was muss ohne Netz gehen, was darf warten, was darf nie gespeichert werden? Daraus folgt, welche Dateien der Service Worker vorab ablegt und welche Daten immer frisch vom Server kommen.
-
Gestaltung
Eine Benutzeroberfläche für Handy, Tablet und Desktop, dazu Name, Icons und Farben der installierten App. Ob sich die App gut und verständlich bedienen lässt, die sogenannte User Experience, zeigt der Prototyp auf Ihrem eigenen Handy.
-
Programmierung
HTML, CSS und JavaScript ohne Framework, dazu ein schlanker Server in Python. Schnittstellen (APIs), die Daten für andere Systeme bereitstellen, bauen wir gleich mit.
-
Updates ohne Store
Jede neue Fassung bekommt einen eigenen Zwischenspeicher, den alten räumt der Service Worker selbst weg. Den Umweg über die Stores gibt es nicht.
-
Barrierefreiheit
Wir bauen mit dem Ziel WCAG 2.2 AA: per Tastatur bedienbar, mit beschrifteten Bedienelementen für Screenreader und reduzierter Bewegung. Jede Ansicht prüfen wir automatisch mit axe-core.
-
Betrieb
Ihre App läuft auf unserem Server in Deutschland oder bei Ihnen. Wie Übergabe und Betrieb aussehen, legen wir im Angebot fest.
06 Grenzen
Was eine PWA kann und was nicht
Nicht jedes Vorhaben passt in den Browser. Das sagen wir Ihnen lieber vorher.
Push-Benachrichtigungen
Eine PWA kann Push-Nachrichten schicken, wenn die Person zugestimmt hat. Auf Android und am Computer geht das direkt aus dem Browser, auf iPhone und iPad seit iOS 16.4, aber nur, wenn die App auf dem Home-Bildschirm liegt. Unsere drei Eigenentwicklungen kommen ohne Push-Nachrichten aus.
Speicher auf dem iPhone
Safari räumt den Speicher von Websites auf, die man eine Weile nicht genutzt hat. Für Apps auf dem Home-Bildschirm gilt das nicht. Wer einen Rundgang offline nutzen will, installiert die PWA deshalb am besten vorher.
Gerätefunktionen
Kamera, Mikrofon, Standort und Vollbild stehen einer PWA offen. Muss eine App dauerhaft im Hintergrund arbeiten, über Bluetooth mit anderen Geräten sprechen oder tief ins Betriebssystem greifen, ist eine native App oft die bessere Wahl, gerade auf Geräten von Apple.
Eine PWA im App Store?
Eine PWA lässt sich in den Microsoft Store bringen und, als Trusted Web Activity verpackt, zu Google Play. Apples App Store nimmt reine Web-Apps in einer Hülle (Wrapper) in der Regel nicht an. Ob Ihre App überhaupt in einen Store muss, klären wir im ersten Gespräch.
Was ist eine Progressive Web App?
Eine Web-App, die im Browser läuft und sich wie eine App verhält: Man kann sie auf dem Startbildschirm ablegen, sie öffnet in einem eigenen Fenster und funktioniert dank Service Worker auch offline. Gebaut ist sie mit HTML, CSS und JavaScript, eine Codebasis für alle Geräte.
Wie installiert man eine PWA?
Auf Android und am Computer bieten Chrome und Microsoft Edge die Installation meist selbst an, am Computer mit einem Symbol in der Adressleiste. Auf iPhone und iPad geht es in Safari über das Teilen-Menü und „Zum Home-Bildschirm“. Danach liegt die App mit eigenem Icon neben den anderen Apps.
Kann man eine PWA offline nutzen?
Ja, so weit der Service Worker die Dateien gespeichert hat. Waldzeit legt beim ersten Besuch das ganze Spiel ab, Fadenlauf speichert auf Wunsch Texte, Bilder und Ton einer Sprache, Wegwarte zeigt ohne Netz den letzten Stand der Karte. Was bei Ihrer App ohne Netz gehen muss, legen wir zu Beginn fest.
Kann man eine PWA in den App Store bringen?
In den Microsoft Store und, als Trusted Web Activity verpackt, zu Google Play, ja. Apples App Store nimmt reine Web-Apps in einer Hülle in der Regel nicht an. Waldzeit, Fadenlauf und Wegwarte kommen ohne Store aus. Ob Ihre App in einen Store muss, klären wir im ersten Gespräch.
Funktionieren Push-Benachrichtigungen auch auf dem iPhone?
Ja, seit iOS 16.4, aber nur, wenn die PWA auf dem Home-Bildschirm liegt und die Person zugestimmt hat. Auf Android und am Computer geht es auch direkt aus dem Browser.
Ist eine Progressive Web App sicher?
Ein Service Worker läuft nur über HTTPS und nur für die eigene Adresse. Unsere drei Apps binden keine Dienste Dritter ein und senden eine Content-Security-Policy, die fremde Skripte blockiert.
Was kostet die Entwicklung einer PWA?
Das hängt vor allem vom Umfang der App ab, von den Inhalten und davon, was ohne Netz funktionieren muss. Was den Aufwand bestimmt, erklären wir auf der Seite App entwickeln lassen. Nach dem ersten Gespräch bekommen Sie ein schriftliches Angebot.
Weiterlesen
Passt dazu
-
App entwickeln lassen
Ablauf, Kosten und die Frage, ob Web-App, native oder hybride App zu Ihrem Vorhaben passt.
Zur Seite App entwickeln lassen -
Barrierefreie Apps
Wie wir mit dem Ziel WCAG 2.2 AA bauen und prüfen, damit möglichst alle die App nutzen können.
Zur Seite Barrierefreie Apps
Kontakt
Ein Projekt im Kopf? Schreiben Sie uns.
Ein Lernspiel für die Ausstellung, ein Guide fürs Museum, eine Fachanwendung fürs Amt: Schreiben Sie uns in ein paar Sätzen, worum es geht, für wen die App gedacht ist und bis wann sie stehen soll. Sie bekommen eine erste Einschätzung und einen Vorschlag für ein Gespräch.
Ihr Ansprechpartner: Rafael Luge · Designer und Entwickler · Dresden
Sie brauchen eine Website? Die bauen wir mit unserer Agentur Kopf & Stift.