Veröffentlichen von PWAs in großen App Stores: Das Warum und Wie

Beginnend mit dem Google Play Store sprang ein App-Marktplatz nach dem anderen auf den Zug auf, Progressive-Web-Apps (Was ist Progressive-Web-App?) in seinem Store willkommen zu heißen, was ihn zum neuen Go-to-Ansatz für die Softwarebereitstellung machte. Angesichts all dessen wäre es eine Verschwendung, diese neu entdeckte Technologie nicht zu nutzen, um die Reichweite Ihrer App besser zu erweitern.

Um Ihnen einen klareren Überblick über die gesamte Progressive Web App-Bewegung zu geben, insbesondere den Veröffentlichungsprozess, werden wir heute den aktuellen Stand von PWAs auf großen App-Marktplätzen sowie die Veröffentlichung einer PWA in diesen Stores überprüfen.

Warum sollten Sie Ihre Progressive Web App in großen App Stores veröffentlichen?

Früher waren Progressive Web Apps nur auf Webinstallationen (Zum Startbildschirm hinzufügen) beschränkt. Mit der Zeit begannen App-Marktplätze wie Google und Microsoft jedoch, das Potenzial von PWAs zu erkennen und Initiativen zu ergreifen, um die Einführung dieser Technologie der Zukunft voranzutreiben.

Wenn Sie über die Fähigkeiten und Mittel verfügen, sollten Sie es unserer Meinung nach tun – machen Sie Ihre PWA zu einer Omni-Plattform. Schließlich sind große Marken wie Twitter, Uber und Spotify alle auf den Zug aufgesprungen und haben hervorragende Ergebnisse erzielt, was beweist, dass diese Technologie nicht nur Marketing ist und eine Überlegung wert ist. Microsoft selbst ging sogar noch einen Schritt weiter und plante, Progressive Web Apps zum primären Erlebnis in Windows zu machen.

 Empfohlene Lektüre : 12 beste Beispiele für progressive Web-Apps.

So veröffentlichen Sie Ihre PWA in großen App-Stores

Google Play Store

Als Vorläufer der PWA-Bewegung wäre es nicht verwunderlich, wenn der Google Play Store offene Arme für Progressive Web Apps hätte. Mit TWA (Trusted Web Activities) wurde die gesamte Veröffentlichungssequenz viel einfacher und sollte in kürzester Zeit abgeschlossen sein.

Anforderungen

• Android Studio installiert
• Ein Google-Entwicklerkonto
• Eine funktionierende und qualitätsgeprüfte Progressive Web App.

Schritt 1 : Erstellen Sie einen Klon der TWA Starter Android App und ändern Sie ihn

• Klonen Sie das Projekt svgomg-twa mit dem folgenden Befehl:

 Git-Klon https://github.com/GoogleChromeLabs/svgomg-twa.git

• Importieren Sie das Projekt mit Datei > Neu > Projekt importieren in Android Studio.

Passen Sie in /app/build.gradle twaManifest an Ihren Zweck an. Die Einzelheiten dazu, was und wie geändert werden soll, finden Sie in der Datei build.gradle.

Hinweis: Die applicationId -ID sollte dem Format <com>.<your-brand>.<your-app> folgen

Nach Änderungen sollte Ihre /app/build.gradle so ​​​​aussehen:

 def twaManifest = [
    Anwendungs-ID: 'com.simicart.app',
    hostName: 'simicart.com', // Die Domäne, die in der TWA geöffnet wird.
    launchUrl: '/', // Der Startpfad für die TWA. Muss relativ zur Domäne sein.
    name: 'SimiCart PWA', // Der im Android Launcher angezeigte Name.
    themeColor: '#ED8A19', // Die für die Statusleiste verwendete Farbe.
    navigationColor: '#303F9F', // Die für die Navigationsleiste verwendete Farbe.
    backgroundColor: '#bababa', // Die Farbe, die für den Hintergrund des Begrüßungsbildschirms verwendet wird.
    enableNotifications: false, // Auf true setzen, um die Benachrichtigungsdelegierung zu aktivieren.
    // Fügen Sie hier Verknüpfungen für Ihre App hinzu. Jede Verknüpfung muss die folgenden Felder enthalten:
    // - Name: Zeichenfolge, die in der Verknüpfung angezeigt wird.
    // - short_name: Kürzerer String, der verwendet wird, wenn |name| es ist zu lang.
    // - url: Absoluter Pfad der URL, mit der die App gestartet werden soll (zB '/create').
    // - Symbol: Name der Ressource im Drawable-Ordner, die als Symbol verwendet werden soll.
    Abkürzungen: [
        Name: 'Öffne SimiCart', 
        short_name: 'Öffnen', 
        url: '/öffnen', 
        Symbol: 'Spritzer'
    ]
,
    // Die Dauer der auszublendenden Animation in Millisekunden, die beim Entfernen des Begrüßungsbildschirms abgespielt werden soll.
    splashScreenFadeOutDauer: 300
]

Schritt 2 : Erstellen Sie einen Schlüsselspeicher und überprüfen Sie APK

Schlüsselspeicher oder Upload-Schlüssel sind für die Verifizierung Ihres APK erforderlich. Um einen Schlüsselspeicher zu erstellen, starten Sie Android Studio und navigieren Sie zu Build → Generate Signed Bundle/APK und füllen Sie die erforderlichen Felder aus.

Nachdem Sie einen Schlüsselspeicher erstellt haben, müssen Sie den SHA256 -Fingerabdruck mit den folgenden Befehlen daraus extrahieren:

 keytool -list -v -keystore ~/dlbr-keystore.jks -alias twa -storepass •••••• -keypass •••••• 

 Eintragstyp: PrivateKeyEntry
...
Zertifikat-Fingerabdrücke:
         SHA1: ...
         SHA256: 2A:9B:A8:64:32:0A:69:99...: ? kopiere diese Zeile

Schritt 3 : Konfigurieren Sie den Digital Asset Link

Ein Digital-Asset-Link ist für die Eigentumsüberprüfung Ihres Webinhalts erforderlich, der später zum Verknüpfen mit Ihrem APK verwendet werden kann.

Erstellen Sie eine Kontoauszugsdatei

Verwenden Sie den zuvor extrahierten SHA256 -Fingerabdruck und generieren Sie mit dem Statement List Generator and Tester eine Auszugsdatei.

Nachdem Sie eine Kontoauszugsdatei generiert haben, besteht der nächste Schritt darin, eine öffentlich zugängliche Datei zu erstellen, die Informationen aus dem Digital Asset Tool enthält. Die Datei sollte auf Ihrem Webhost und an diesem Ort abgelegt werden:

 .well-known/assetlinks.json

Der Speicherort dieser Datei hängt vom Build-Prozess Ihrer Web-App ab, aber normalerweise sollte sie sich in den bereitgestellten Verzeichnissen befinden, nämlich in den Verzeichnissen „public“ oder „dist“.

Wenn alles erledigt ist, besteht der nächste und letzte Schritt für Sie darin, Ihre App bereitzustellen.

Schritt 4 : Erstellen und veröffentlichen Sie Ihre App bei Google Play

Gehen Sie mit Ihrer Google Play Console in den Standardeinstellungen zu Alle Anwendungen → Anwendung erstellen .

Erstellen Sie einen internen Test

Navigieren Sie zu App-Releases → Interner Testtrack → Release erstellen, um einen internen Testtrack Ihrer App zu erstellen.

Erstellen Sie ein signiertes APK

Navigieren Sie in Android Studio zu Build → Generate Signed Bundle/APK und verwenden Sie den SHA256 -Schlüsselspeicher, den wir zuvor extrahiert haben. Stellen Sie sicher, dass Sie beide Kontrollkästchen für die Signaturversion aktivieren.

Laden Sie die APK hoch

Sie sind jetzt am Ende dieses Prozesses. Um Ihre apk hochzuladen, gehen Sie einfach zu Google Play Store, App Releases → Internal Test Track → Edit Release .

Vergessen Sie nicht, den Store-Eintrag auszufüllen

Alle erforderlichen Felder müssen ausgefüllt werden, bevor Ihre App für den Überprüfungsprozess aufgelistet werden kann. Diese Felder werden für wichtige Informationen wie Preisdetails, Store-Eintrag, Inhaltsbewertung usw. benötigt. Wenn dieser Vorgang abgeschlossen ist, sollten Sie vier grüne Häkchen ️ sehen, die darauf hinweisen, dass alle erforderlichen Felder ausgefüllt sind.

Und das ist es. Ihre PWA kann jetzt überprüft und in wenigen Stunden öffentlich heruntergeladen werden.

Apple App-Store

Von allen großen App-Marktplätzen ist der Apple App Store vielleicht derjenige, der PWAs am wenigsten willkommen oder sogar feindlich gegenübersteht, was ironisch ist, wenn man bedenkt, dass Steve Jobs der Erste war, der eine Zukunft voller Progressive Web Apps voraussah.

Die vollständige Safari-Engine befindet sich im iPhone. Und so können Sie erstaunliche Web 2.0- und Ajax-Apps schreiben, die genauso aussehen und sich genauso verhalten wie Apps auf dem iPhone. Und diese Apps lassen sich perfekt in iPhone-Dienste integrieren. Sie können einen Anruf tätigen, eine E-Mail senden und einen Standort auf Google Maps nachschlagen.

Steve Jobs, 2007

In iOS sind PWAs in Bezug auf Funktionen stark eingeschränkt . Es gibt keine Unterstützung für Push-Benachrichtigungen, das Web-App-Manifest wird nur teilweise unterstützt, und neue Funktionen wie New App Gallery ignorieren PWAs oft vollständig. Und aus diesem Grund macht es nur Sinn, dass PWA im Apple App Store gemäß den App Store Review Guidelines von Apple nicht willkommen ist:

Ihre App sollte Funktionen, Inhalte und eine Benutzeroberfläche enthalten, die sie über eine neu gepackte Website hinausheben . Wenn Ihre App nicht besonders nützlich, einzigartig oder „App-ähnlich“ ist, gehört sie nicht in den App Store.

Mindestfunktionalität, App Store-Überprüfungsrichtlinien

Da Apple sein Bestes gibt, um alle Möglichkeiten von PWA zu schwächen, ist jeder Versuch, eine PWA zu veröffentlichen – selbst mit einem nativen App-Wrapper wie Cordova – zwecklos. Im Moment können wir nur hoffen, dass zukünftige iOS-Versionen eine bessere Unterstützung für PWA bringen werden, aber derzeit ist die Veröffentlichung von PWA im Apple App Store nicht möglich , weshalb Sie stattdessen einen nativen App-Ansatz in Betracht ziehen sollten, wenn die meisten Ihrer Zielgruppe verwendet iOS-basierte Geräte.

 Weiterlesen: PWAs auf iOS 14 Beta: Subtile Änderungen

Microsoft-Store

Wie in unserem Artikel „Windows 10 und PWA: Die Zukunft der Softwarebereitstellung“ erwähnt, legt Microsoft seit geraumer Zeit die Grundlagen für einen Progressive Web App Store und wird Schritt für Schritt Realität. PWAs von bekannteren Marken bevölkern bereits alle App-Marktplätze und mit nicht weniger vorbildlichen Ergebnissen, denen andere folgen werden.

Wie Google begrüßt Microsoft PWAs und plant darüber hinaus – sie planen sogar, native UWP-Apps bekannt zu machen und durch Hybrid-Apps zu ersetzen – eine Art Progressive-Web-Apps, die in native Shells gehüllt sind.

Theoretisch sollte Ihnen das Veröffentlichen Ihrer Progressive Web App im Microsoft Store keinerlei Mühe kosten, da es ursprünglich als automatischer Prozess geplant war, der Bing als Crawling-Mechanismus für hochwertige PWAs verwendet. Allerdings befindet sich das Ganze noch in einem experimentellen Stadium und funktioniert nicht ganz so effektiv wie geplant, weshalb Sie Ihre PWA manuell als Windows-App-Paket (.appx) einreichen müssten. Aber keine Sorge, der Vorgang ist nicht so nervenaufreibend wie bei einem bestimmten App-Store.

Anforderungen

• Ein Windows Dev Center-Konto
• PWABuilder
• Eine funktionierende und qualitätsgeprüfte Progressive Web App, die den Store-Richtlinien entspricht

Schritt 1 : Reservieren Sie einen Namen für Ihre App

Der erste Schritt beim Veröffentlichen einer App im Microsoft Store ist das Reservieren eines Namens. Falls Sie sich fragen, was passieren würde, wenn ein verrückter Bursche beschließen würde, alle existierenden Namen zu reservieren: Keine Sorge, die Namensreservierung läuft nach 3 Monaten ab.

Füllen Sie die erforderlichen Felder aus und notieren Sie sie irgendwo, da diese Informationen später benötigt werden.

Schritt 2: Generieren Sie eine AppX mit PWABuilder

Wie oben erwähnt, ist PWABuilder eine großartige Möglichkeit, ein Funktionspaket zu generieren, das auf den wichtigsten App-Marktplätzen veröffentlicht werden kann. Es ist eines der ersten Tools auf dem Markt, das von Microsoft ausschließlich zu dem Zweck entwickelt wurde, die Einführung von PWA voranzutreiben.

Manifest generieren

Geben Sie bei PWABuilder die URL Ihrer PWA ein und klicken Sie auf Erste Schritte . Beachten Sie, dass dieser Schritt von entscheidender Bedeutung ist, da er automatisch die fehlenden Informationen in Ihrer manifest.json identifiziert und/oder ausfüllt, was häufig für PWAs erforderlich ist, die nicht speziell für Microsoft Store erstellt wurden.

 Empfohlene Lektüre: PWA-Manifest: Einfaches Erstellen Ihres Web-App-Manifests

Der nächste Schritt ist das Erstellen von Service Workern für Ihre PWA, aber unter der Annahme, dass es sich bei Ihrer um eine typische Progressive Web App handelt, in die Service Worker bereits integriert sind, wird dieser Schritt übersprungen und wir fahren mit dem letzten Schritt fort – dem Abrufen Ihres .appx-Pakets.

Generieren Sie AppX

Wenn Sie auf AppX generieren klicken, sollten Sie so etwas wie dieses Popup sehen:

Hier können die früheren Informationen nützlich sein. Füllen Sie die Felder aus und ein Download-Feld mit dem .appx-Paket wird angezeigt. Laden Sie es herunter und Sie können Ihre PWA jetzt im Microsoft Store veröffentlichen.

Falls Sie Ihre PWA testen möchten, bevor Sie sie im Store veröffentlichen, gibt es immer die Option, sie unter Windows zu testen, indem Sie den Entwicklermodus aktivieren → Rechtsklick auf test_install.ps1 → Mit PowerShell ausführen . Dadurch wird Ihre PWA automatisch zu Ihrem Desktop und Startmenü hinzugefügt, von wo aus sie gestartet und getestet werden kann, um zu sehen, ob alles richtig funktioniert.

Schritt 3: Senden Sie Ihr App-Paket an den Microsoft Store

Um Ihre PWA im Microsoft Store zu veröffentlichen, müssen Sie zum Paketordner in der zuvor heruntergeladenen ZIP-Datei navigieren. In diesem Ordner befindet sich alles, was Sie zum Veröffentlichen im Microsoft Store benötigen. Zur Verdeutlichung: Dieser Ordner enthält keinen Ihrer Codes, da er nur als Leitmechanismus für Ihre PWA im Web und andere nicht verwandte Store-Metadaten dient.

Sobald Sie die windows.appx gefunden haben, gehen Sie zur Einreichungsseite in Ihrem Dev Center und geben Sie die erforderlichen Informationen ein:

Nachdem Sie alle Schritte abgeschlossen und alle erforderlichen Felder ausgefüllt haben, sollte die Schaltfläche „ An den Store senden “ aufleuchten, was anzeigt, dass Ihre PWA nun bereit für den Überprüfungsprozess ist. Es dauert eine Stunde bis mehrere Tage, bis dieser Vorgang abgeschlossen ist; Sobald es vorbei ist, wird Ihre PWA zertifiziert und für öffentliche/private Downloads verfügbar sein (abhängig von Ihren Verfügbarkeitseinstellungen im Dev Center).

Fazit

Nach all dem fragen Sie sich vielleicht immer noch, warum Sie überhaupt eine Progressive Web App erstellen sollten – geschweige denn, sich all diese Mühe machen, eine zu veröffentlichen. Und Sie haben Recht, solche grundsätzlichen Fragen zu stellen.

Progressive Web App erweist sich Schritt für Schritt als die Zukunft der Softwarebereitstellung und als nächster natürlicher Schritt in der Evolution der Web-Technologie. Ab sofort ist es bereits überall in der E-Commerce-Welt weit verbreitet, wo eine einheitliche und ansprechende Erfahrung auf allen Geräten der Schlüssel zu hohen Conversions ist.

Da es sich um eine neue Technologie handelt, ist es bereits schwierig genug, eine Progressive Web App so zu erstellen, wie sie ist. Mit SimiCart müssen Sie sich keine Gedanken mehr über die Entwicklungsphasen Ihrer Magento PWA machen, da wir eine vollständige und kostengünstigste Lösung auf dem Markt anbieten.