PWA (Progressive Web Apps) ist seit einiger Zeit bei uns. Jedes Mal, wenn ich es den Clients erkl?rt, wird dieselbe Frage angezeigt: ?K?nnen meine Benutzer die App mit App -Stores installieren?“ Die Antwort war traditionell Nein, aber dies ?nderte sich mit Chrome 72, der eine neue Funktion namens TWA (vertrauenswürdige Webaktivit?ten) versandte.

Vertrauenswürdige Webaktivit?ten sind eine neue M?glichkeit, Ihre Web-App-Inhalte wie Ihre PWA mit Ihrer android-App mithilfe eines Protokolls basierend auf benutzerdefinierten Registerkarten in die Integration von Yourandroid-Apps zu integrieren.

In diesem Artikel werde ich die vorhandene PWA (Wordguru) von Netguru verwenden und schrittweise erkl?ren, was getan werden muss, um die Anwendung verfügbar zu machen und direkt im Google Play App Store installiert zu werden.

Einige der Dinge, die wir hier abdecken, klingen für alle Android-Entwickler da drau?en albern, aber dieser Artikel stammt aus der Perspektive eines Front-End-Entwicklers, insbesondere eines, der noch nie Android Studio verwendet oder eine Android-Anwendung erstellt hat. Bitte beachten Sie auch, dass viel von dem, was wir hier abdecken, immer noch extrem experimentell ist, da es sich auf Chrome 72 beschr?nkt.

Schritt 1: Richten Sie eine vertrauenswürdige Webaktivit?t ein

Wenn Sie eine TWA einrichten, müssen Sie keinen Java -Code schreiben, aber Sie müssen Android Studio haben. Wenn Sie zuvor iOS- oder MAC -Software entwickelt haben, ist dies XCode insofern sehr ?hnlich, als es eine sch?ne Entwicklungsumgebung bietet, die die Entwicklung von Android -Entwicklung entwickelt hat. Also, schnapp dir das und triff mich hier zurück.

Erstellen Sie ein neues TWA -Projekt in Android Studio

Hast du Android Studio bekommen? Nun, ich kann dich nicht wirklich h?ren oder sehen, also gehe ich davon aus, dass du es getan hast. Gehen Sie voran und knacken Sie es ?ffnen und klicken Sie dann auf "Starten Sie ein neues Android Studio -Projekt". Lassen Sie uns von dort aus die Option ?Keine Aktivit?t hinzufügen“ ausw?hlen, mit der wir das Projekt konfigurieren k?nnen.

Die Konfiguration ist ziemlich einfach, aber es ist immer gut zu wissen, was was ist:

• Nennen Sie den Namen der Anwendung (aber ich wette, Sie wussten das).
• Paketname: Eine Kennung für Android -Anwendungen im Play Store. Es muss einzigartig sein, daher schlage ich vor, die URL der PWA in umgekehrter Reihenfolge zu verwenden (z. B. com.netguru.wordguru).
• Speicherort speichern: Wo das Projekt lokal existiert.
• Sprache: Dies erm?glicht es uns, eine bestimmte Codesprache auszuw?hlen. Dies ist jedoch nicht erforderlich, da unsere App bereits geschrieben ist. Wir k?nnen dies bei Java verlassen, was die Standardauswahl ist.
• Mindest -API -Ebene: Dies ist die Version der Android -API, mit der wir zusammenarbeiten, und wird von der Support Library (die wir als n?chstes abdecken). Lassen Sie uns API 19 verwenden.

Unter diesen Optionen stehen nur wenige Kontrollk?stchen. Diese sind für uns hier irrelevant, also lassen Sie sie alle deaktiviert und fahren Sie dann fort.

TWA Support Library hinzufügen

Für TWA ist eine Support -Bibliothek erforderlich. Die gute Nachricht ist, dass wir nur zwei Dateien ?ndern müssen, um diese Anforderung zu füllen, und beide leben im selben Projektverzeichnis: Gradle -Skripte. Beide hei?en build.gradle, aber wir k?nnen unterscheiden, welche durch Betrachtung der Beschreibung in der Klammern.

Es gibt einen Git -Paket -Manager namens JITPack, der speziell für Android -Apps hergestellt wurde. Es ist ziemlich robust, aber das Fazit macht das Ver?ffentlichen unserer Web -App zum Kinderspiel. Es ist ein bezahlter Service, aber ich würde sagen, dass es die Kosten wert ist, wenn dies das erste Mal ist, dass Sie etwas in den Google Play -Store bringen.

Herausgeber Hinweis: Dies ist kein gesponserter Stecker für Jitpack. Es lohnt sich, angerufen zu werden, da dieser Beitrag mit Android-Apps nur wenig bis gar vertraut oder an Google Play eingereicht wird, und es ist weniger Reibung für die Verwaltung eines Android-App-Repo, das direkt mit dem Gesch?ft verbunden ist. Das hei?t, es ist v?llig keine Voraussetzung.

Sobald Sie in Jitpack sind, verbinden wir unser Projekt mit. ?ffnen Sie die Datei "Build.gradle (Projekt: Wordguru), die wir uns gerade angesehen haben, und sagen Sie, dass sie sich JITPACK für das App -Repository ansehen sollen:

 alleProjects {
  Repositories {
    ...
    maven {url 'https://jitpack.io'}
    ...
  }
}

OK, jetzt ?ffnen wir diese andere Build.gradle -Datei. Hier k?nnen wir alle erforderlichen Abh?ngigkeiten für das Projekt hinzufügen, und wir haben tats?chlich eines:

 // Build.gradle (Modul: App)

Abh?ngigkeiten {
  ...
  Implementierung 'com.github.googlechrome: Custom-Tabs-Client: A0F7418972'
  ...
}

Die TWA -Bibliothek verwendet Java 8 -Funktionen. Daher müssen wir Java 8 aktivieren. Um dies zu tun, müssen wir derselben Datei Kompilesoptionen hinzufügen:

 // Build.gradle (Modul: App)

Android {
  ...
  kompileoptionen {
    SourceCompatibility Javaversion.version_1_8
    TargetCompatibilit?t javaversion.version_1_8
  }
  ...
}

Es gibt auch Variablen, die als Manifestplace -Inhaber bezeichnet werden, die wir im n?chsten Abschnitt behandeln werden. Fügen wir vorerst Folgendes hinzu, um zu definieren, wo die App gehostet wird, die Standard -URL und den App -Namen:

 // Build.gradle (Modul: App)

Android {
  ...
  defaultConfig {
    ...
    Manifestplace -Helder = [
      Hostname: "Wordguru.netguru.com",
      defaulturl: "https://wordguru.netguru.com",
      Launchername: "Wordguru"
    ]
    ...
  }
  ...
}

Geben Sie App -Details im Android App Manifest an

Jede Android -App verfügt über ein Android -App -Manifest (AndroidManifest.xml), das wesentliche Details zur App enth?lt, z.

Das, was uns hier wirklich befasst, ist Aktivit?t (). Dies implementiert die Benutzeroberfl?che und ist für die ?Aktivit?ten“ in ?vertrauenswürdigen Webaktivit?ten“ erforderlich.

Witzig genug, wir haben die Option ?Keine Aktivit?t hinzufügen“ beim Einrichten unseres Projekts in Android Studio ausgew?hlt, und das liegt daran, dass unser Manifest leer ist und nur das Anwendungs ??-Tag enth?lt.

Beginnen wir zun?chst die Manfifest -Datei. Wir werden den vorhandenen Paketnamen durch unsere eigene Anwendungs ??-ID und das Etikett durch den Wert der im vorherigen Abschnitt definierten Variablen der Manifestplecleders ersetzen.

Dann werden wir die TWA -Aktivit?t tats?chlich hinzufügen, indem wir ein -Tag in das -Tag hinzufügen.

<!-- manifests/AndroidManifest.xml -->

<manifest xmlns: andro package="com.netguru.wordguru"> // highlight

  <anwendung android: erlaubte="true" icon="@mipmap/ic_launcherer" label="$ {sterverername}" highlight supportsrtl="True" thema="@style/Apptheme">

    <aktivit android: name="android.support.customtabs.Trusted.launcherActivity" label="$ {sterverername}"> // highlight

      <meta-daten android: name="android.support.customtabs.Trusted.default_url" value="$ {defaulturl}"></meta-daten> // Highlight

      <!-- This intent-filter adds the TWA to the Android Launcher -->
      <intent-filter>
        <action android: name="android.intent.action.main"></action>
        <kategorie android: name="android.intent.category.launcher"></kategorie>
      filter>

      <!--
        This intent-filter allows the TWA to handle Intents to open
        our hostName
        -->
      <intent-filter android: autoverify="true">
        <action android: name="android.intent.action.view"></action>
        <kategorie android: name="android.intent.category.Default"></kategorie>
        <kategorie android: name="android.intent.category.Browsable"></kategorie>
        <daten android: scheme="https" host="$ {hostname}"></daten> // highlight
      filter>
    </intent-filter></intent-filter></aktivit>?t>
  
</anwendung></manifest>

Und das, meine Freunde, ist Schritt 1. Lassen Sie uns mit Schritt 2 fortfahren.

Schritt 2: überprüfen Sie die Beziehung zwischen der Website und der App

TWA S ben?tigt eine Verbindung zwischen der Android -Anwendung und der PWA. Dazu verwenden wir digitale Asset -Links.

Die Verbindung muss an beiden Enden festgelegt werden, wobei TWA die Anwendung und PWA die Website ist.

Um diese Verbindung herzustellen, müssen wir unsere Manifestplecleders erneut ?ndern. Dieses Mal müssen wir ein zus?tzliches Element namens AssetStatements hinzufügen, das die Informationen über unsere PWA beh?lt.

 // Build.gradle (Modul: App)

Android {
  ...
  defaultConfig {
    ...
    Manifestplace -Helder = [
      ...
      AssetStatements: '[{"Beziehung": ["Delegate_permission/Common.handle_all_urls"],', '  
        '"Ziel": {"Namespace": "Web", "Site": "https://wordguru.netguru.com"}}]'
      ...
    ]
    ...
  }
  ...
}

Jetzt müssen wir unserem Anwendungs-Tag ein neues Meta-Daten-Tag hinzufügen. Dadurch werden die Android -Anwendung informiert, die wir die Verbindung mit dem in den Manifestplecoldern festgelegten Antrag herstellen m?chten.

<!-- manifests/AndroidManifest.xml -->

<manifest xmlns: andro package="$ {packageId}">

  <anwendung>
    ...
      <meta-daten android: name="asset_statements" value="$ {assetStatements}"></meta-daten>
    ...
  
</anwendung></manifest>

Das war's! Wir haben gerade die Bewerbung auf Website -Beziehung eingerichtet. Lassen Sie uns nun in die Konvertierung der Website in die Bewerbung wechseln.

Um die Verbindung in die entgegengesetzte Richtung herzustellen, müssen wir eine .json-Datei erstellen, die im Pfad der App der App verfügbar ist. Die Datei kann mit einem Generator erstellt werden, der in Android Studio integriert ist. Sehen Sie, ich habe Ihnen gesagt, dass Android Studio die Entwicklung von Android -Entwicklung hilft!

Wir brauchen drei Werte, um die Datei zu generieren:

• Hosting -Site -Domain: Dies ist unsere PWA -URL (z. B. https://wordguru.netguru.com/).
• App -Paketname: Dies ist unser TWA -Paketname (z. B. com.netguru.wordguru).
• App -Paket -Fingerabdruck (SHA256): Dies ist ein einzigartiger kryptografischer Hash, der basierend auf Keystore von Google Play Store generiert wird.

Wir haben bereits den ersten und zweiten Wert. Wir k?nnen den letzten mit Android Studio erhalten.

Zuerst müssen wir signierte APK generieren. Im Android Studio gehen Sie zu: Erstellen → Signiertes Bundle oder APK → APK .

Verwenden Sie als n?chstes den vorhandenen Keystore, wenn Sie bereits einen haben. Wenn Sie einen brauchen, besuchen Sie zuerst ?Neu…“.

Dann füllen wir das Formular aus. Machen Sie sich unbedingt an die Anmeldeinformationen wie diese, mit denen die Bewerbung unterschrieben wird, und sie best?tigen Ihr Eigentum an der Bewerbung.

Dadurch wird eine Keystore -Datei erstellt, die zum Generieren des App -Paket -Fingerabdrucks (SHA256) erforderlich ist. Diese Datei ist ?u?erst wichtig, da sie als Beweis dafür funktioniert, dass Sie der Eigentümer der Bewerbung sind. Wenn diese Datei verloren geht, k?nnen Sie keine weiteren Aktualisierungen Ihrer Bewerbung im Gesch?ft durchführen.

Lassen Sie uns als n?chstes eine Art Bundle -Art ausw?hlen. In diesem Fall w?hlen wir "Release", weil es uns ein Produktionsbündel gibt. Wir müssen auch die Signaturversionen überprüfen.

Dadurch wird unsere APK generiert, die sp?ter verwendet wird, um eine Version im Google Play Store zu erstellen. Nach dem Erstellen unseres Keystore k?nnen wir ihn verwenden, um den erforderlichen App -Paket -Fingerabdruck (der SHA256) zu generieren.

Gehen wir zurück zum Android Studio und gehen Sie zu Tools → App Links Assistant . Dadurch wird eine Seitenleiste ge?ffnet, in der die Schritte angezeigt werden, die erforderlich sind, um eine Beziehung zwischen Anwendung und Website zu erstellen. Wir m?chten zu Schritt 3, ?Website -Association deklarieren“ und die erforderlichen Daten einfüllen: Site -Domain und Anwendungs ??-ID. W?hlen Sie dann die im vorherige Schritt generierte Keystore -Datei aus.

Nach dem Ausfüllen des Formulars drücken Sie "Datei" Digital Asset Links ", wodurch unsere Datei assetLinks.json generiert wird. Wenn wir das ?ffnen, sollte es ungef?hr so ??aussehen:

 [{{{
  "Beziehung": ["Delegate_permission/Common.handle_all_urls"],
  "Ziel": {
    "Namespace": "android_app",
    "package_name": "com.netguru.wordguru",
    "SHA256_CERT_FINGERPRINTS": ["8A: F4: ....: 29:28"]
  }
}]

Dies ist die Datei, die wir in der /.well-Bekannt/Assetlinks.json-Pfad unserer App zur Verfügung stellen müssen. Ich werde nicht beschreiben, wie es auf diesem Weg verfügbar ist, da es zu projektspezifisch und au?erhalb des Rahmens dieses Artikels ist.

Wir k?nnen die Beziehung testen, indem wir auf die Schaltfl?che ?Link und überprüfen“ klicken. Wenn alles gut geht, erhalten wir eine Best?tigung mit ?Erfolg!“

Yay! Wir haben eine Zwei-Wege-Beziehung zwischen unserer Android-Anwendung und unserer PWA aufgebaut. Von hier aus ist alles bergab, also fahren wir es nach Hause.

Schritt 3: Erhalten Sie die erforderlichen Verm?genswerte

Google Play erfordert einige Verm?genswerte, um sicherzustellen, dass die App im Gesch?ft gut pr?sentiert wird. Insbesondere hier ist, was wir brauchen:

• App -Symbole: Wir ben?tigen eine Vielzahl von Gr??en, darunter 48 × 48, 72 × 72, 96 × 96, 144 × 144, 192 × 192… oder wir k?nnen ein adaptives Symbol verwenden.
• Hochaufl?sender Symbol: Dies ist ein 512 × 512 PNG-Bild, das im gesamten Gesch?ft verwendet wird.
• Feature-Grafik: Dies ist ein 1024 × 500 JPG- oder 24-Bit-PNG-Banner (No Alpha), das Google Play in der App-Detail-Ansicht verwendet.
• Screenshots: Google Play verwendet diese, um verschiedene Ansichten der App anzuzeigen, die Benutzer vor dem Herunterladen überprüfen k?nnen.

Mit all dem k?nnen wir mit der Google Play Store Developers Console fortfahren und die Anwendung ver?ffentlichen!

Schritt 4: Ver?ffentlichen Sie bei Google Play!

Gehen wir zum letzten Schritt und schieben wir unsere App schlie?lich in den Laden.

Mit dem zuvor generierten APK (das sich im Verzeichnis von Androidstudioprojects befindet) müssen wir in die Google Play -Konsole gehen, um unsere Anwendung zu ver?ffentlichen. Ich werde den Prozess der Ver?ffentlichung einer Anwendung im Gesch?ft nicht beschreiben, da der Assistent es ziemlich unkompliziert macht und wir w?hrend des gesamten Prozesses Schritt-für-Schritt-Anleitung zur Verfügung stellen.

Es kann nur wenige Stunden dauern, bis der Antrag überprüft und genehmigt wird, aber wenn dies der Fall ist, erscheint es schlie?lich im Gesch?ft.

Wenn Sie die APK nicht finden k?nnen, k?nnen Sie eine neue erstellen, indem Sie → Signiertes Bundle / APK → APK erstellen , unsere vorhandene Keystore -Datei übergeben und den Alias ??und das Kennwort füllen, das wir bei der Generierung des Keystore verwendet haben. Nachdem die APK generiert wurde, sollte ein Hinweis angezeigt werden und Sie k?nnen zur Datei gelangen, indem Sie auf den Link ?Suchen“ klicken.

Herzlichen Glückwunsch, Ihre App ist in Google Play!

Das war's! Wir haben gerade unsere PWA in den Google Play Store gebracht. Der Prozess ist nicht so intuitiv, wie wir es gerne h?tten, aber mit ein wenig Anstrengung ist es definitiv machbar, und glauben Sie mir, es gibt diese gro?artige Füllung am Ende, wenn Sie Ihre App in freier Wildbahn sehen.

Es ist darauf hinzuweisen, dass diese Funktion immer noch sehr früh ist, und ich würde es für einige Zeit als experimentell betrachten. Ich würde nicht empfehlen, eine Produktionsver?ffentlichung Ihrer Anwendung vorerst zu machen, da dies nur mit Chrome 72 und oben funktioniert - jede Version, die die App installieren kann, aber die App selbst wird sofort abstürzen, was nicht die beste Benutzererfahrung ist.

Auch die offizielle Ver?ffentlichung von Custom-Tabs-Client unterstützt TWA noch nicht. Wenn Sie sich gefragt haben, warum wir anstelle der offiziellen Ver?ffentlichung der Bibliothek Raw Github Link verwendet haben, ist das der Grund.

Das obige ist der detaillierte Inhalt vonSo holen Sie eine progressive Web -App in den Google Play Store. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!