Attività web attendibili con più origini

Le Attività web attendibili sono un nuovo modo per integrare i contenuti delle app web, come le PWA, con la tua app per Android utilizzando un protocollo basato su Custom Tabs.

navigazione ff-origin

Un'attività web attendibile richiede l'apertura delle origini per essere convalidata utilizzando Digital Asset Links, in modo da mostrare i contenuti a schermo intero.

Quando un utente esce dall'origine convalidata, viene visualizzata l'interfaccia utente della scheda personalizzata. La barra degli URL nella scheda personalizzata indica agli utenti che stanno navigando in un dominio esterno all'applicazione e fornisce anche un pulsante X che consente di tornare rapidamente all'origine convalidata.

Tuttavia, è anche comune che le app web creino esperienze che abbracciano più origini. Un esempio è un'applicazione di shopping con l'esperienza principale all'indirizzo www.example.com, mentre il flusso di pagamento è ospitato all'indirizzo checkout.example.com.

In questi casi, la visualizzazione di Custom Tabs non è auspicabile, non solo perché l'utente si trova nella stessa applicazione, ma anche perché la barra superiore potrebbe fargli pensare di aver abbandonato l'applicazione e di aver abbandonato il pagamento.

Le attività web attendibili consentono agli sviluppatori di convalidare più origini e l'utente rimarrà in schermo intero quando naviga tra queste origini. Come per il dominio principale, lo sviluppatore deve essere in grado di controllare ogni origine convalidata.

Configurare la convalida per più origini

Come per l'origine principale, la convalida viene eseguita tramite Digital Asset Links e ogni dominio da convalidare deve avere il proprio file assetlinks.json.

Nel nostro esempio con www.example.com e checkout.example.com, avremo:

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

Poiché ogni dominio viene collegato alla stessa applicazione Android, i file assetlinks.json hanno esattamente lo stesso aspetto.

Supponendo che il nome del pacchetto per l'applicazione Android sia com.example.twa, entrambi i file assetlink.json contengono qualcosa di simile a quanto segue:

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

Aggiungere più origini all'applicazione Android

Nell'applicazione Android, la dichiarazione asset_statements deve essere aggiornata in modo da contenere tutte le origini che devono essere convalidate:

<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>

Aggiungere origini aggiuntive a LauncherActivity

Utilizzo di LauncherActivity predefinito

LauncherActivity, che fa parte della libreria di supporto android-browser-helper, offre un modo per aggiungere più origini da convalidare configurando il progetto Android.

Innanzitutto, aggiungi un elemento string-array al file res/values/strings.xml. Ogni URL aggiuntivo da verificare sarà all'interno di un elemento secondario item:

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

Aggiungi un nuovo tag meta-data all'interno dell'elemento attività esistente che fa riferimento a LauncherActivity, all'interno di 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>
...

Utilizzo di una LauncherActivity personalizzata

Quando utilizzi codice personalizzato per avviare un'attività web attendibile, puoi aggiungere origini aggiuntive chiamando setAdditionalTrustedOrigins durante la creazione dell'intent per avviare l'attività web attendibile:

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);
}

Conclusione

Dopo questi passaggi, l'Attività web attendibile è pronta per supportare più origini. android-browser-helper ha un'applicazione di esempio per le Attività web attendibili con più origini. Assicurati di controllarlo.

Risoluzione dei problemi

La configurazione di Digital Asset Links prevede alcuni passaggi. Se l'applicazione continua a mostrare la barra Tab personalizzate in alto, è probabile che ci sia un problema di configurazione.

La Guida introduttiva all'attività web attendibile contiene una sezione di risoluzione dei problemi su come eseguire il debug dei problemi di Digital Asset Link.

Esiste anche lo straordinario strumento di collegamento degli asset di Peter, che aiuta a eseguire il debug dei link agli asset digitali sulle applicazioni installate sul dispositivo.