So veröffentlichen Sie eine PWA im App Store und bei Google Play

Eine Progressive Web App (PWA) ist eine Website, die über den Browser installiert werden kann. Das ist praktisch, aber die meisten Kunden suchen nach Apps immer noch im App Store und bei Google Play. Wenn Ihre PWA auf einem Telefon bereits gut funktioniert, können Sie sie für beide Stores verpacken, ohne sie neu zu schreiben.

Der Haken ist, dass die beiden Stores webbasierte Apps sehr unterschiedlich behandeln. Google hat eine offizielle Route für PWAs. Apple tut dies nicht, und sein Prüfteam erwartet mehr als nur eine neu gestaltete Website. Dieser Leitfaden behandelt die realistischen Optionen, die wichtigen Regeln und eine Checkliste für den Erhalt einer PWA durch Überprüfung.

Warum überhaupt eine PWA in den App Stores veröffentlichen?

Eine PWA bietet Benutzern bereits eine Installationsaufforderung, ein Startbildschirmsymbol und ein Vollbilderlebnis. Store-Einträge fügen Dinge hinzu, die bei einer Browserinstallation nicht möglich sind:

• Discovery. Die Leute durchsuchen die Geschäfte nach Produkten wie Ihrem, und ein Eintrag führt zu einer Seite, die dort rankt.
• Trust. Ein Store-Eintrag mit Rezensionen und einem verifizierten Herausgeber ist ein stärkeres Signal als „Zum Startbildschirm hinzufügen“ auf einer Website.
• Zuverlässige Installation. Auf dem iPhone ist die Installation einer PWA über den Browser im Teilen-Menü verborgen. Eine Store-Installation ist mit nur einem Fingertipp möglich.
• Native Kanäle. Eine verpackte App kann Push-Benachrichtigungen und Deep-Links über die Plattform verwenden, anstatt davon abhängig zu sein, was der Browser bereitstellt.

Nichts davon bedeutet, dass Sie die PWA aufgeben sollten. Die Website bleibt das Produkt; Die Store-Apps sind eine weitere Möglichkeit, dorthin zu gelangen. Informationen zu den Kompromissen zwischen einer PWA, einer WebView-App und einem vollständig nativen Build finden Sie hier PWA vs. nativ vs. WebView.

Option 1: Vertrauenswürdige Webaktivität für Google Play

Google Play unterstützt PWAs durch a Vertrauenswürdige Webaktivität (TWA). Eine TWA ist eine Android-App, die Ihre PWA im Vollbildmodus mithilfe des vom Benutzer installierten Chrome-Browsers anstelle einer eingebetteten WebView öffnet. Laut Chrome-Dokumentation verifizieren sich die App und die Website gegenseitig mit Digital Asset Links, was beweist, dass beide vom selben Entwickler stammen.

Werkzeuge wie z Luftpolsterfolie (ein Befehlszeilentool) und PWABuilder Generieren und erstellen Sie das Android-Projekt für Sie. Die üblichen Schritte sind:

1. Stellen Sie sicher, dass Ihre PWA über ein gültiges Web-App-Manifest, eine über HTTPS erreichbare Start-URL und Symbole verfügt.
2. Generieren Sie das Android-Projekt mit Bubblewrap oder PWABuilder.
3. Veröffentlichen Sie eine Digital Asset Links-Datei auf Ihrer Domain, damit die App überprüft werden kann.
4. Erstellen Sie ein signiertes Android-App-Bundle und laden Sie es auf die Google Play Console hoch.

Was Sie wissen sollten, bevor Sie diese Route wählen:

• Das Erlebnis hängt davon ab, dass Chrome auf dem Gerät installiert und auf dem neuesten Stand ist. Wenn die Überprüfung fehlschlägt oder Chrome nicht verfügbar ist, wird den Benutzern eine Browser-Symbolleiste angezeigt.
• Die Host-App kann Ihre Webinhalte, Cookies oder lokalen Speicher nicht direkt lesen. Die Kommunikation mit nativem Code ist begrenzt.
• Sie benötigen weiterhin ein Play Console-Konto, einen Store-Eintrag, eine Datenschutzrichtlinie und die Testanforderungen, die Google für neue persönliche Konten anwendet. Unser Verlagsführer geht diese durch, einschließlich der Closed-Test-Regel.

Ein TWA eignet sich gut, wenn Sie mit Befehlszeilentools vertraut sind und nur Android benötigen.

Option 2: DIY-Wrapper für iOS

Apple hat kein TWA-Äquivalent. Um eine PWA in den App Store zu stellen, benötigen Sie eine native iOS-App, die sie lädt, normalerweise über WKWebView. Die DIY-Variante sieht so aus:

1. Erstellen Sie ein Xcode-Projekt auf einem Mac.
2. Laden Sie Ihre PWA in einer Webansicht und fügen Sie Symbole, einen Startbildschirm und Navigation hinzu.
3. Melden Sie sich beim Apple Developer Program an und registrieren Sie eine Bundle-ID.
4. Signieren, archivieren und laden Sie den Build über die Toolchain von Apple in App Store Connect hoch.
5. Testen Sie mit TestFlight, vervollständigen Sie die Auflistung und die Datenschutzantworten und reichen Sie sie zur Überprüfung ein.

PWABuilder kann ein iOS-Projekt als Ausgangspunkt generieren, aber Sie öffnen und signieren es trotzdem selbst, wofür ein Mac und Xcode erforderlich sind. Wir gehen ausführlicher auf diesen Prozess ein So konvertieren Sie eine Website ohne Xcode oder Mac in eine iOS-App.

Das größere Problem ist nicht technischer Natur. Als nächstes befassen wir uns mit der Frage, ob die App akzeptiert wird.

Was Apple von einem PWA-Wrapper erwartet

In den App-Review-Richtlinien von Apple heißt es, dass eine App „Funktionen, Inhalte und Benutzeroberfläche enthalten sollte, die sie über eine neu verpackte Website hinausheben“ (Richtlinie 4.2). Eine in einer reinen Webansicht geladene PWA ist genau die Art der Übermittlung, auf die die Richtlinie abzielt.

Weitere wissenswerte Punkte:

• Richtlinie 4.2.2 sagt, dass Apps, anders als Kataloge, nicht in erster Linie Marketingmaterialien, Webausschnitte, Inhaltsaggregatoren oder eine Sammlung von Links sein sollten.
• Richtlinie 2.1 erwartet einen endgültigen, funktionierenden Build und Demo-Anmeldeinformationen, wenn Ihre App über einen Login verfügt.
• Richtlinie 4.2.6 besagt, dass Apps, die aus einer kommerzialisierten Vorlage oder einem App-Generierungsdienst erstellt wurden, abgelehnt werden, es sei denn, sie werden direkt vom Anbieter des App-Inhalts eingereicht. Veröffentlichen Sie unter Ihrem eigenen Entwicklerkonto, nicht unter dem eines Anbieters.

Es gibt keine Formel, die die Zulassung garantiert, und kein Tool kann sie versprechen. Was Sie tun können, ist, den Rezensenten einen Grund zu geben, eine echte App zu sehen: native Navigation, Push-Benachrichtigungen, für die sich Benutzer entscheiden, funktionierende Deep-Links und ein ausgefeiltes Lade- und Offline-Erlebnis. Eine vollständige Anleitung zu den Überprüfungsregeln finden Sie unter Apple-Richtlinie 4.2: Wird Apple eine Website-App ablehnen?.

Option 3: Verwenden Sie einen Konverter für beide Geschäfte

Ein Konverter wie SiteTo.App übernimmt die Paketierung für beide Plattformen über Ihre URL. Sie geben Ihre Website-Adresse ein, legen den App-Namen, das Symbol, die Farben, den Begrüßungsbildschirm und die Navigation fest, zeigen eine Vorschau auf Ihrem Telefon an und fordern einen Build an.

Basierend auf der heutigen Funktionsweise des Produkts:

• Android-Builds können als APK oder AAB erstellt werden.
• iOS-Builds werden mit Ihrem Apple Developer-Konto signiert und in Ihrem App Store Connect-Konto an TestFlight übermittelt. Von dort aus können Sie sie zur Überprüfung einreichen.
• Push-Benachrichtigungen werden über Firebase eingerichtet.
• Die Website bleibt die Quelle der Wahrheit, sodass Änderungen, die Sie im Web veröffentlichen, App-Benutzer erreichen, ohne dass eine neue Store-Version veröffentlicht wird.
• Der Preis beträgt einmalig 29 $ für Android, 79 $ für iOS oder 99 $ für beide. Die Gebühren für Apple- und Google-Entwicklerkonten sind unterschiedlich.

SiteTo.App behandelt Ihre PWA wie eine Website: Es lädt Ihre öffentliche URL in die App. Ob sich PWA-spezifische Funktionen wie Service-Worker-Caching, Offline-Seiten oder die Web-Installationsaufforderung innerhalb der App-Shell verhalten, hängt von der Webansicht ab, die die App verwendet. Testen Sie sie also in der Vorschau, anstatt nur Vermutungen anzustellen. Push-Benachrichtigungen in der App werden über Firebase und nicht über den Web-Push Ihrer PWA konfiguriert.

Konverter können Sie in unserem vergleichen Leitfaden für die besten Website-zu-App-Konverter, und sehen Sie sich die Kostenseite an Wie viel kostet es, eine Website in eine App umzuwandeln?. Wenn Ihre Website auf einer bestimmten Plattform läuft, ist die Plattformseiten Erklären Sie, was für diesen Stapel überprüft werden soll.

Welchen Weg sollten Sie nehmen?

• Nur Android, bequem mit der Befehlszeile: Eine TWA über Bubblewrap oder PWABuilder ist ein guter, offizieller Weg.
• iOS und Sie haben einen Mac und einen Entwickler, der mit Xcode vertraut ist: Ein DIY-Wrapper gibt die volle Kontrolle, aber Sie besitzen jeden Neuaufbau und die SDK-Updates.
• Beide Geschäfte, ohne eigene Projekte zu besitzen: Ein Konverter ist der geringste Aufwand und Sie behalten die Website als Produkt.
• Eine PWA, die stark vom Offline-Verhalten oder der Hintergrundsynchronisierung abhängt: Testen Sie sorgfältig, bevor Sie sich verpflichten, egal für welche Route Sie sich entscheiden.

Bereiten Sie Ihre PWA vor, bevor Sie sie verpacken

Ein Store-Eintrag deckt Schwachstellen auf, die ein Browser-Tab verbirgt. Bevor Sie verpacken:

• Überprüfen Sie, ob jeder Bildschirm reagiert und mit Touch und der System-Zurück-Geste verwendet werden kann.
• Stellen Sie sicher, dass die Anmeldung, das Auschecken und das Hochladen von Dateien in einer eingebetteten Ansicht funktionieren, einschließlich der Authentifizierung durch Dritte, die ein Popup oder eine Weiterleitung öffnet.
• Fügen Sie eine Seite mit Datenschutzrichtlinien und eine Support-Seite hinzu, die ohne Anmeldung erreichbar sind.
• Entscheiden Sie, welche externen Links in der App und welche den Browser öffnen.
• Behandeln Sie Offline- und Fehlerzustände mit einer klaren Meldung statt mit einem leeren Bildschirm.
• Entfernen Sie alle Meldungen, die Benutzer auffordern, „diese App zu installieren“, da sie dies bereits getan haben.

Der Bereitschaftscheckliste und Kostenplaner kann Ihnen helfen, Lücken zu erkennen, bevor Sie mit dem Bau beginnen.

Store-Eintrag und Checkliste für Bewertungen

• Entwicklerkonten sind Eigentum Ihres Unternehmens und nicht eines Auftragnehmers.
• App-Name, Symbol und Screenshots zeigen die echte App und stimmen mit dem Build überein.
• Die Datenschutzrichtlinie und die Antworten zum Store-Datenschutz beziehen sich auf die Website, die Analyse- und Zahlungstools, die in der App geladen werden.
• Die Referenzen der Prüfer funktionieren und sind in den Prüfnotizen enthalten.
• Die App bietet über die Website hinaus native Mehrwerte wie Navigation, Benachrichtigungen oder Deep Links.
• Beide Builds wurden bei einer Neuinstallation auf realen Geräten getestet.
• Jemand wird beauftragt, Bewertungsnachrichten anzusehen und mit Einzelheiten zu antworten.

Häufig gestellte Fragen

Kann ich eine PWA ohne nativen Wrapper im App Store veröffentlichen?

Nein. Der App Store vertreibt nur native App-Binärdateien. Eine PWA muss darin verpackt sein und die verpackte App muss den Richtlinien von Apple entsprechen.

Ist eine PWA bei Google Play erlaubt?

Ja. Google unterstützt PWAs durch Trusted Web Activities, und Sie können auch eine Wrapper-App veröffentlichen.

Funktioniert meine PWA weiterhin offline in der App?

Es hängt von der Route und der Webansicht ab. Testen Sie das Offline-Verhalten in der Vorschau oder einem Test-Build, anstatt davon auszugehen, dass es übernommen wird.

Brauche ich einen Mac?

Für einen DIY-iOS-Build ja. Ein Konverter erstellt die App für Sie, Sie benötigen jedoch weiterhin ein Apple Developer-Konto für App Store Connect.

Garantiert die Veröffentlichung die Genehmigung?

Nein. Apple und Google entscheiden über jede Einreichung. Eine bessere Auflistung und ein eher App-ähnliches Erlebnis verbessern Ihre Chancen, können das Ergebnis jedoch nicht garantieren.

Nächste Schritte

Wenn Ihre PWA bereit ist, Vorschau als App mit SiteTo.App und testen Sie es auf Ihrem eigenen Telefon, bevor Sie sich für eine Route entscheiden. Wenn Sie zufrieden sind, überprüfen Sie es Preisgestaltung und folgen Sie dem Leitfaden erstellen und veröffentlichen.