Progressive Web Apps (PWA) auf iOS

Eine Progressive Web App lässt sich auf dem iPhone und iPad zum Home-Bildschirm hinzufügen und von dort als Web-App öffnen. Web Push ist seit iOS und iPadOS 16.4 für diese Home-Screen-Apps verfügbar. Welche Inhalte offline funktionieren, hängt vom Cache und der Umsetzung der Website ab.

Das Wichtigste

Installation ist über Safari möglich. Seit iOS 16.4 können auch andere Browser die Aktion „Zum Home-Bildschirm“ anbieten.
Für Web Push muss die Web-App zum Home-Bildschirm hinzugefügt sein. Benachrichtigungen benötigen die Zustimmung des Nutzers nach einer eigenen Aktion, etwa einem Tippen auf „Benachrichtigungen aktivieren“.
Speichergrenzen hängen von Browser, Betriebssystem und Gerät ab. Eine feste Grenze von 50 MB ist keine aktuelle allgemeine PWA-Grenze.
Safari auf iOS unterstützt die Background-Sync- und Periodic-Background-Sync-APIs derzeit nicht. Eine PWA braucht dafür einen Ersatzweg, etwa die Synchronisation beim nächsten Öffnen.

Progressive Web Apps auf iOS verstehen

Das Web-App-Manifest beschreibt unter anderem Name, Startadresse, Symbole und Anzeigemodus. Ein Service Worker kann ausgewählte Dateien und Seiten zwischenspeichern. Das macht bereits geladene oder gezielt vorbereitete Inhalte offline verfügbar; eine Installation allein speichert nicht automatisch die gesamte Website.

Progressive Web App auf dem iPhone

Ein Service Worker arbeitet ereignisgesteuert. Er läuft nicht unbegrenzt im Hintergrund und leert den Cache nicht automatisch bei „Pull to Refresh“. Aktualisierung und Cache-Bereinigung müssen in der Anwendung umgesetzt sein.

Eine PWA auf dem iPhone installieren

Öffnen Sie die gewünschte Website in Safari und gehen Sie so vor:

Öffnen Sie das Teilen-Menü. Je nach Safari-Ansicht liegt es hinter der Mehr-Taste.
Wählen Sie „Zum Home-Bildschirm“.
Falls die Option angezeigt wird, aktivieren Sie „Als Web-App öffnen“.
Tippen Sie auf „Hinzufügen“ und öffnen Sie die App über ihr Symbol.

PWA über das Teilen-Menü auf iOS installieren

Andere Browser können seit iOS 16.4 dieselbe Systemaktion anbieten. Das setzt voraus, dass der jeweilige Browser sie eingebaut hat. Ein eigener Installationsbutton kann unter Safari auf iOS eine Anleitung anzeigen, aber keinen Installationsdialog über beforeinstallprompt öffnen.

Home-Screen-Web-Apps sind auch in der EU nutzbar. Die Einschränkungen der iOS-17.4-Beta beschreiben nicht den heutigen Funktionsumfang. Die aktuellen Schritte stehen in Apples Anleitung für Web-Apps auf dem iPhone.

Anzeigemodus und iOS-Meta-Tags

Für eine App-Ansicht ohne die übliche Browserleiste setzen Sie im Manifest den Anzeigemodus standalone. Die App benötigt dann eine eigene Navigation. Das Meta-Tag apple-mobile-web-app-status-bar-style beeinflusst die Statusleiste; es schaltet allein keinen App-Modus ein.

{ "display": "standalone" }

Ältere Apple-Meta-Tags wie apple-mobile-web-app-capable können als Rückfalllösung für ältere Systeme dienen. Entfernen Sie sie nicht pauschal, sondern prüfen Sie Manifest und Darstellung auf den iOS-Versionen, die Ihre App unterstützen soll.

App-Symbole bereitstellen

iOS kann Symbole aus dem Manifest verwenden. Ein zusätzliches apple-touch-icon hat Vorrang vor den Manifest-Symbolen. Ein quadratisches PNG mit 180 × 180 Pixeln ist ein gängiges Format für dieses Touch-Icon.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Passende Dateien lassen sich mit dem PWA Asset Generator erstellen.

Speicher und Offline-Nutzung auf iOS

Eine feste Grenze von 50 MB gilt nicht allgemein für aktuelle PWAs. Seit Safari 17 beschreibt WebKit geräteabhängige Speicherquoten; Home-Screen-Web-Apps erhalten dieselben Quoten wie Websites in einer Browser-App. Die geschätzte Belegung und Quote lassen sich über navigator.storage.estimate() abfragen.

Die Quote ist keine Zusage über dauerhaft freien Speicher. Bei Speicherdruck kann das System Daten löschen. Begrenzen Sie deshalb den Cache, behandeln Sie Speicherfehler und sichern Sie wichtige Nutzerdaten zusätzlich auf dem Server. Details stehen in WebKits Dokumentation zur Speicherverwaltung.

Welche Funktionen eine iOS-PWA nutzen kann

Kamera, Standort und Web Share sind Beispiele für Web-APIs, die auch Websites im Browser verwenden können, abhängig von Unterstützung und Berechtigungen. Ihre Verfügbarkeit hängt nicht grundsätzlich von einer PWA-Installation ab. Für Web Push auf dem iPhone ist dagegen die Home-Screen-App erforderlich.

Native Schnittstellen stehen einer Website nicht automatisch zur Verfügung. Prüfen Sie jede benötigte Funktion auf den Zielgeräten. Safari auf iOS unterstützt derzeit weder die einmalige Background Synchronization API noch Periodic Background Sync. Aufgaben sollten bis zur erfolgreichen Übertragung gespeichert und beim nächsten Öffnen erneut versucht werden.

Die aktuelle Unterstützung dokumentieren MDN für Background Sync und Periodic Background Sync.

Web Push auf iPhone und iPad

Seit iOS und iPadOS 16.4 können zum Home-Bildschirm hinzugefügte Web-Apps Web Push empfangen. Dafür muss der Nutzer Benachrichtigungen erlauben. Die Berechtigungsabfrage muss auf eine Nutzeraktion folgen, beispielsweise das Antippen eines Buttons. Ein gewöhnlicher Safari-Tab auf dem iPhone reicht dafür nicht aus.

Web Push erfordert keine Veröffentlichung im App Store. Die technische Anbindung beschreibt Apple in der Web-Push-Dokumentation. Für Joomla und WordPress finden Sie die passenden Funktionen bei miTT PWA für Joomla und miTT PWA für WordPress.

Badge Icon für Push Nachrichten

Das Badge-Symbol signalisiert dem Nutzer, dass es noch ungelesene Nachrichten gibt, eine subtile, aber effektive Erinnerung, die den Nutzer zum Engagement auffordert. Die Badge-API ist in den Plugins miTT PWA FIRE PUSH und miTT PWA for WP implementiert, sodass Website-Betreiber sie ohne Konfiguration nutzen können. Diese Funktion ist besonders nützlich für alle Anwendungen, bei denen Benachrichtigungen eine entscheidende Rolle für das Nutzererlebnis spielen. In der schnelllebigen Welt, in der wir leben, ist es wichtig, immer auf dem neuesten Stand zu sein, und das Badge-Symbol dient als visueller Hinweis für die Benutzer, die App erneut zu besuchen. Eine kurze Demonstration, wie Push-Nachrichten, einschließlich des Badge-Symbols, in einem realen Szenario funktionieren, finden Sie in diesem YouTube Short, in dem diese Funktionen in Aktion gezeigt werden.

PWA-Unterstützung in anderen Browsern

Eine gemeinsame Web-Codebasis kann mehrere Plattformen bedienen. Installation, Push, Hintergrundaufgaben und Geräteschnittstellen unterscheiden sich trotzdem zwischen Browsern und Betriebssystemen. Prüfen Sie die benötigten Funktionen einzeln, statt von vollständiger PWA-Unterstützung auszugehen.

Safari unterstützt Web-Apps auf dem Mac seit macOS Sonoma über „Zum Dock hinzufügen“. Die Einrichtung beschreibt Apple in der Safari-Anleitung. Für Chrome, Edge und Firefox prüfen Sie Installationswege und API-Unterstützung auf dem jeweiligen Zielsystem.

PWAs im praktischen Einsatz

Eine PWA kann vorhandene Web-Inhalte auf dem Home-Bildschirm verfügbar machen, ausgewählte Inhalte offline bereitstellen und Nutzer nach ihrer Zustimmung per Push erreichen. Wie sich das auf Ladezeiten, Datenverbrauch oder Nutzung auswirkt, muss am jeweiligen Projekt gemessen werden.

Ein Beispiel aus meiner Arbeit ist das Joomla-Veranstaltungsportal What’s On Lincoln. Die Website wurde mit miTT PWA ergänzt und zusätzlich als Android- und iOS-App veröffentlicht. Den Aufbau und die Store-Veröffentlichung beschreibe ich unter Website als App erstellen lassen.

PWA App Store Optimierung: Auffindbarkeit und Engagement steigern

Durch die Möglichkeit, traditionelle App-Stores zu umgehen, stellen PWAs den Status quo der App-Veröffentlichung in Frage. Die Verbreitung von PWAs über App-Stores wie den Microsoft Store, den Google Play Store und den Apple App Store hat jedoch klare Vorteile. Die Auflistung einer PWA auf diesen Plattformen kann die Sichtbarkeit, die Glaubwürdigkeit und potenziell die Nutzerbasis drastisch erhöhen, da die Nutzer diesen Plattformen vertrauen und mit ihnen vertraut sind.

Sie möchten diesen Weg nicht selbst gehen? Ich übernehme die Veröffentlichung Ihrer PWA im Google Play Store und Apple App Store zum Festpreis, inklusive nativer Push-Anbindung über APNs, weil Web-Push innerhalb einer iOS-App aus dem Store nicht zur Verfügung steht. Wer die iOS-App erstellen lassen möchte, findet dort Pakete, Ablauf und die zwei enthaltenen Apple-Review-Runden.

Bei der Verbreitung von PWAs über App Stores müssen sich Entwickler oft mit den besonderen Richtlinien der Stores und technischen Vorgaben auseinandersetzen. Plattformen können bestimmte Anforderungen haben, wie z. B. spezifische Metadaten oder Paketformate, die für eine erfolgreiche Einreichung erfüllt werden müssen. Trotz dieser Hürden ist der Prozess schlanker als bei herkömmlichen Apps und erfordert oft keine Codeänderungen an der PWA selbst. Dieser einfache Zugang zu App-Stores bedeutet eine neue Ära des digitalen Vertriebs, in der die Grenze zwischen nativen Anwendungen und Web-Erlebnissen immer mehr verschwimmt.

Um eine Progressive Web App (PWA) im Apple App Store zu veröffentlichen, müssen Sie eine Reihe von Schritten befolgen, um die Lücke zwischen Web- und nativen App-Erlebnissen zu schließen. Hier finden Sie einen Überblick über den Prozess:

Vorbereitung der PWA: Stellen Sie sicher, dass Ihre PWA die Design- und Leistungsstandards von Apple erfüllt. Dazu gehören ein responsives Design, Offline-Funktionalität und die Funktionsweise einer nativen App.
Create an App Store Connect Account: Sign up for an App Store Connect account, which is required to submit apps to the App Store.
Configure Your PWA for iOS: Configure Your PWA for iOS: Utilize the PWA Builder to wrap your app, converting it into a format suitable for submission to the Apple App Store. This tool assists in packaging your PWA within a native app shell, thus enabling you to meet the requirements for iOS apps.
Optimize PWA for App Store Submission: Make sure your PWA adheres to Apple's App Store Review Guidelines. This includes ensuring user privacy, providing a high-quality user interface, and integrating iOS features.
Test Your PWA on iOS Devices: Before submission, thoroughly test your PWA on multiple iOS devices to ensure it functions correctly and provides a good user experience.
Create an App Store Listing: Prepare metadata for your app listing, including the app's name, description, keywords, screenshots, and preview videos.
Submit Your PWA to the App Store: Once ready, submit your PWA through App Store Connect for review. Apple will review your app to ensure it meets all guidelines.
Monitor the Review Process: Apple will notify you of the progress of the review process and any issues that need addressing. Respond promptly to any feedback.
Release Your PWA: After approval, set a release date for your PWA, and it will be available on the App Store for users to download and install.

Remember, while PWAs offer many benefits, publishing them on the App Store requires additional steps to meet Apple's native app standards. This process can provide a broader reach and potentially increase user trust due to the App Store's credibility.

Tipps für Website-Betreiber, die WordPress und Joomla verwenden

Um Progressive Web Apps (PWAs) für iOS mit WordPress oder Joomla effektiv zu erstellen, können Entwickler verschiedene Strategien und Tools nutzen, die auf diese Content-Management-Systeme zugeschnitten sind:

Für WordPress:

Verwenden Sie ein Plugin wie miTT PWA for WP, das die Umwandlung einer WordPress-Website in eine PWA durch die Handhabung von Service Worker, Manifest und Offline-Unterstützung vereinfacht.
Verwenden Sie PWA-freundliche Themes und stellen Sie sicher, dass sie responsive sind und moderne Webstandards einhalten.
Je nach Anforderung, nutzen Sie die REST-API von WordPress, um dynamische Inhalte abzurufen und reibungslose Interaktionen innerhalb der PWA zu ermöglichen.

Für Joomla:

Entdecken Sie Erweiterungen wie miTT PWA FIRE Push oder miTT PWA für Joomla, die eine unkomplizierte Möglichkeit bieten, PWA Funktionen wie Offline-Zugriff und Homescreen Installation zu implementieren.
Entscheiden Sie sich für Templates, die für Leistung und mobile Nutzung optimiert sind, um das PWA Erlebnis für die Nutzer zu verbessern. Das Standard Cassiopeia Template in Joomla 4 und Joomla 5 ist ein gutes Beispiel dafür.
Nutzen Sie die in Joomla eingebauten Web Services für besseres dynamisches Laden von Inhalten und interaktive Benutzererfahrungen.

Sowohl WordPress- als auch Joomla-Entwickler sollten:

Konzentrieren Sie sich darauf, ein Benutzererlebnis zu schaffen, das den nativen iOS-Anwendungen ähnelt, und ermutigen Sie die Benutzer durch Aufforderungen und klare Anweisungen, die PWA zu installieren. miTT PWA for WP und miTT PWA for Joomla verfügen über einen Hinweisbanner zur Konfiguration.
Aktualisieren Sie den Inhalt regelmäßig, um die Nutzer bei der Stange zu halten und sicherzustellen, dass die PWA relevant und wertvoll bleibt.
Implementieren Sie eine übersichtliche Navigationsstruktur, verwenden Sie schlanke Schriftarten, um das Laden zu beschleunigen, und stellen Sie browserübergreifende Funktionalität sicher, einschließlich Safari auf iOS.
Schaffen Sie eine Offline Funktionalität, indem Sie dementsprechend den Service Worker einrichten, die wichtige Assets und Seiten zwischenspeichern, so dass Benutzer auch ohne Internetverbindung auf Inhalte zugreifen können.
Analysieren und minimieren Sie regelmäßig die Dateigrößen, um die Ladezeiten zu verkürzen, und führen Sie gründliche Tests mit verschiedenen Browsern und Geräten durch, um Kompatibilität und Leistung sicherzustellen.

Wenn Sie diese Tipps befolgen, können Entwickler die Leistung und Kompatibilität von PWAs auf iOS-Geräten optimieren und dabei die robusten Funktionen und die Erweiterbarkeit von WordPress und Joomla nutzen.

Eine PWA steht und fällt allerdings mit der Website darunter: Veraltete PHP- oder CMS-Versionen legen den Service Worker genauso lahm wie die Seite selbst. Wer die Updates nicht selbst fahren möchte, findet im Wartungsvertrag für WordPress und Joomla ein Paket, das PHP-, CMS- und Erweiterungs-Updates übernimmt, inklusive Hosting in Deutschland.

Tools und Ressourcen für PWA-Entwickler

Diese Tools und Frameworks helfen bei der Entwicklung von PWAs für iOS, indem sie Entwicklern dabei helfen, ihren Arbeitsablauf zu rationalisieren und die Effizienz ihres Entwicklungsprozesses zu verbessern.

Außerdem können Entwickler auf Tutorials und Dokumentationen für die PWA-Entwicklung auf renommierten Online-Plattformen wie z. B.:

web.dev, das eine Reihe von Tools und Dokumentation für PWA Entwickler bereitstellt.
developer.mozilla.org
PWA Asset Generator für die Generierung von App Icons und Splash Screens für iOS und Android.
Tipps für die Optimierung einer PWA

Lighthouse prüft Performance, Barrierefreiheit, Best Practices und SEO. Die frühere PWA-Kategorie wurde eingestellt. Installation, Service Worker, Offline-Verhalten und Push müssen zusätzlich mit Browser-Entwicklertools und auf echten Geräten geprüft werden. Hinweis zur Einstellung der Lighthouse-PWA-Tests.

PWA oder Store-App für Ihre Website?

Für eine Website mit Home-Screen-Installation, ausgewählten Offline-Inhalten und Web Push kann eine PWA ausreichen. Prüfen Sie erforderliche Geräteschnittstellen und Hintergrundaufgaben vor der Umsetzung. Mit miTT PWA für WordPress oder miTT PWA für Joomla können Sie diese Funktionen auf Ihrer bestehenden Website aufbauen.

Häufig gestellte Fragen

Ja. Websites können als Web-Apps zum Home-Bildschirm hinzugefügt werden. Safari unterstützt das direkt; seit iOS 16.4 können auch andere Browser diese Systemaktion anbieten. Home-Screen-Web-Apps sind auch in der EU nutzbar.

Safari auf iOS unterstützt derzeit weder Background Sync noch Periodic Background Sync. Native Schnittstellen sind nur teilweise als Web-APIs verfügbar. Speicherquoten hängen vom Gerät und Browser ab; es gibt keine allgemeine feste Grenze von 50 MB.

Ja, seit iOS und iPadOS 16.4 für Web-Apps auf dem Home-Bildschirm. Der Nutzer muss Benachrichtigungen erlauben, und die Abfrage muss auf eine Nutzeraktion folgen. Ein gewöhnlicher Safari-Tab auf dem iPhone genügt nicht.

Eine PWA ist eine Website mit zusätzlichen App-Funktionen. Das Manifest beschreibt etwa Name, Symbole und Startadresse. Ein Service Worker kann ausgewählte Inhalte für die Offline-Nutzung zwischenspeichern.

Öffnen Sie die Website in Safari, öffnen Sie das Teilen-Menü und wählen Sie „Zum Home-Bildschirm“. Aktivieren Sie „Als Web-App öffnen“, falls diese Option angezeigt wird, und tippen Sie auf „Hinzufügen“.

miTT PWA for WP

PWA Solution for WordPress with Push Notifications

miTT PWA for Joomla

Joomla PWA Solution for Joomla

Progressive Web Apps auf iOS
Installation, Web Push und aktuelle Grenzen