Attività web attendibili con più origini

André Cipriani Bandarra

Le attività web attendibili sono un nuovo modo per integrare i contenuti dell'app web, ad esempio la PWA, con l'app Android utilizzando un protocollo basato sulle schede personalizzate.

navigazione ff-origin

Un'attività web attendibile richiede che le origini siano aperte per essere convalidate utilizzando Link agli asset digitali per mostrare i contenuti a schermo intero.

Quando un utente esce dall'origine convalidata, viene visualizzata l'UI della Scheda personalizzata. La barra degli URL nella Scheda personalizzata indica agli utenti che stanno navigando in un dominio esterno all'applicazione, fornendo al contempo un pulsante X che consente loro di tornare rapidamente all'origine convalidata.

Tuttavia, è comune anche che le app web creino esperienze che coprono più origini: un esempio potrebbe essere un'applicazione di acquisto 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 delle schede personalizzate è indesiderabile, non solo perché l'utente si trova nella stessa applicazione, ma anche perché la barra superiore potrebbe indurre l'utente a pensare di aver lasciato l'applicazione e abbandonare la procedura di pagamento.

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

Configurazione della convalida per più origini

Come nell'origine principale, la convalida viene ottenuta 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, avremmo:

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

Poiché ogni dominio si connette alla stessa applicazione Android, i file assetlinks.json saranno identici.

Supponendo che il nome del pacchetto dell'applicazione per Android sia com.example.twa, entrambi i file assetlink.json conterranno qualcosa di simile al seguente:

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

Aggiungi più origini all'applicazione per Android

Nell'applicazione per Android, è necessario aggiornare la dichiarazione asset_statements in modo che contenga 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>

Aggiungi origini extra a LauncherActivity

Utilizzo di LauncherActivity predefinito

LauncherActivity che fa parte della libreria di assistenza di android-browser-helper consente di 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 convalidare sarà all'interno di un sottoelemento item:

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

Successivamente, aggiungi un nuovo tag meta-data all'interno dell'elemento attività esistente che faccia 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 un LauncherActivity personalizzato

Quando utilizzi un codice personalizzato per avviare un'attività web attendibile, puoi aggiungere ulteriori origini richiamando 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

Con questi passaggi, l'Attività web attendibile è ora 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 ha alcune parti variabili. Se nell'applicazione viene ancora visualizzata la barra Schede personalizzate in alto, è probabile che ci sia qualche problema di configurazione.

La guida rapida Attività web attendibile contiene un'ottima sezione per la risoluzione dei problemi su come eseguire il debug dei problemi relativi a Digital Asset Link.

C'è anche l'incredibile strumento Asset Link di Pietro, che consente di eseguire il debug di Digital Asset Links sulle applicazioni installate sul dispositivo.