Vertrouwde webactiviteiten van meerdere oorsprong

Vertrouwde webactiviteiten zijn een nieuwe manier om de inhoud van uw webapp, zoals uw PWA, te integreren met uw Android-app met behulp van een protocol dat is gebaseerd op aangepaste tabbladen.

ff-oorsprong navigatie

Voor een vertrouwde webactiviteit moet de oorsprong die wordt geopend, worden gevalideerd met behulp van Digital Asset Links , om de inhoud op volledig scherm weer te geven.

Wanneer een gebruiker buiten de gevalideerde oorsprong navigeert, wordt de gebruikersinterface voor aangepaste tabbladen weergegeven. De URL-balk op het aangepaste tabblad vertelt de gebruikers dat ze nu in een domein buiten de applicatie navigeren, terwijl de gebruiker ook een X-knop krijgt waarmee hij snel kan terugkeren naar de gevalideerde oorsprong.

Maar het is ook gebruikelijk dat webapps ervaringen creëren die meerdere oorsprongen omvatten. Een voorbeeld hiervan is een winkelapplicatie met de hoofdervaring op www.example.com , terwijl het afrekenproces wordt gehost op checkout.example.com .

In dergelijke gevallen is het tonen van de aangepaste tabbladen onwenselijk, niet alleen omdat de gebruiker zich in dezelfde applicatie bevindt, maar ook omdat de bovenste balk de gebruiker zou kunnen doen denken dat hij de applicatie heeft verlaten en het afrekenen heeft verlaten.

Met vertrouwde webactiviteiten kunnen ontwikkelaars meerdere oorsprongen valideren, en de gebruiker blijft op volledig scherm wanneer hij door die oorsprongen navigeert. Net als bij het hoofddomein moet de ontwikkelaar elke gevalideerde oorsprong kunnen controleren.

Validatie instellen voor meerdere herkomsten

Net als bij de hoofdoorsprong wordt de validatie bereikt via Digital Asset Links en moet elk te valideren domein zijn eigen assetlinks.json-bestand hebben.

In ons voorbeeld met www.example.com en checkout.example.com zouden we het volgende hebben:

  • https://www.example.com/.well-known/assetlinks.json
  • https://checkout.example.com/.well-known/assetlinks.json

Omdat elk domein wordt verbonden met dezelfde Android-applicatie, zien de assetlinks.json -bestanden er precies hetzelfde uit.

Ervan uitgaande dat de pakketnaam voor de Android-applicatie com.example.twa is, zouden beide assetlink.json bestanden iets bevatten dat lijkt op het volgende:

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
  "namespace": "android_app",
  "package_name": "com.example",
   "sha256_cert_fingerprints": ["..."]}
}]

Voeg meerdere oorsprongen toe aan de Android-applicatie

Op de Android-applicatie moet de aangifte asset_statements worden bijgewerkt om alle oorsprongen te bevatten die moeten worden gevalideerd:

<string name="asset_statements">
[{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
        \"namespace\": \"web\",
        \"site\": \"https://www.example.com\"
    }
}],
[{
    \"relation\": [\"delegate_permission/common.handle_all_urls\"],
    \"target\": {
        \"namespace\": \"web\",
        \"site\": \"https://checkout.example.com\"
    }
}],
</string>

Voeg extra oorsprongen toe aan de LauncherActivity

De standaard LauncherActivity gebruiken

De LauncherActivity die deel uitmaakt van de android-browser-helper ondersteuningsbibliotheek biedt een manier om meerdere oorsprongen toe te voegen die moeten worden gevalideerd door het Android-project te configureren.

Voeg eerst een string-array element toe aan het bestand res/values/strings.xml . Elke extra URL die moet worden gevalideerd, bevindt zich in een item -subelement:

...
<string-array name="additional_trusted_origins">
    <item>https://www.google.com</item>
</string-array>
...

Voeg vervolgens een nieuwe meta-data toe binnen het bestaande activiteitselement dat verwijst naar LauncherActivity , binnen AndroidManifest.xml :

...
<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
    android:label="@string/app_name">


    <meta-data
        android:name="android.support.customtabs.trusted.ADDITIONAL_TRUSTED_ORIGINS"
        android:resource="@array/additional_trusted_origins" />


    ...
</activity>
...

Een aangepaste LauncherActivity gebruiken

Wanneer u aangepaste code gebruikt om een ​​vertrouwde webactiviteit te starten, kunt u extra oorsprong toevoegen door setAdditionalTrustedOrigins aan te roepen bij het bouwen van de intentie om de vertrouwde webactiviteit te starten:

public void launcherWithMultipleOrigins(View view) {
  List<String> origins = Arrays.asList(
      "https://checkout.example.com/"
  );


  TrustedWebActivityIntentBuilder builder = new TrustedWebActivityIntentBuilder(LAUNCH_URI)
      .setAdditionalTrustedOrigins(origins);


  new TwaLauncher(this).launch(builder, null, null);
}

Conclusie

Met deze stappen is de vertrouwde webactiviteit nu klaar om meerdere oorsprongen te ondersteunen. android-browser-helper heeft een voorbeeldtoepassing voor vertrouwde webactiviteiten van meerdere oorsprong. Zorg ervoor dat u het controleert.

Problemen oplossen

Het opzetten van Digital Asset Links kent enkele bewegende delen. Als de toepassing nog steeds de balk Aangepaste tabbladen bovenaan weergeeft, is er waarschijnlijk iets mis met de configuratie.

De Trusted Web Activity Quick Start Guide bevat een geweldig gedeelte voor probleemoplossing over het oplossen van problemen met Digital Asset Link.

Er is ook de geweldige Peter's Asset Link Tool , die helpt bij het debuggen van Digital Asset Links op applicaties die op het apparaat zijn geïnstalleerd.