Attività web attendibili con più origini

André Cipriani Bandarra

Le attività web attendibili sono un nuovo modo per integrare i contenuti delle tue app web, ad esempio la tua PWA con utilizzando un protocollo basato sulle schede personalizzate.

navigazione ff-origin

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

Quando un utente esce dall'origine convalidata, viene visualizzata l'interfaccia utente della scheda personalizzata. La barra dell'URL nella sezione Il tasto Tab indica agli utenti che stanno ora navigando in un dominio esterno all'applicazione e allo stesso tempo mettendo a disposizione dell'utente un pulsante con una X che gli consente di tornare rapidamente all'origine convalidata.

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

In questi casi, non è consigliabile mostrare le schede personalizzate, non solo perché l'utente si trova nella nella stessa applicazione, ma anche perché la barra superiore potrebbe far pensare all'utente di aver abbandonato l'applicazione e abbandoni la procedura di pagamento.

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

Configurazione della convalida per più origini

Come nell’origine principale, la convalida viene eseguita tramite Digital Asset Links e ogni dominio da convalidato deve avere un 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 viene connesso alla stessa applicazione Android, i file assetlinks.json sono esattamente uguali.

Se il nome del pacchetto dell'applicazione Android è com.example.twa, entrambi assetlink.json contengono 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 Android

Sull'app per Android, la dichiarazione asset_statements deve essere aggiornata per contenere tutti origini da convalidare:

<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 dell'Attività di avvio app predefinita

Il LauncherActivity che fa parte della libreria di assistenza 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 si trova all'interno di un sottoelemento item:

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

Poi, aggiungi un nuovo tag meta-data all'interno dell'elemento attività esistente che fa riferimento al 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'attività LauncherActivity personalizzata

Quando utilizzi un codice personalizzato per avviare un'attività web attendibile, puoi aggiungere origini aggiuntive chiamata a 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 a supportare più origini. android-browser-helper ha un'applicazione di esempio per attività web attendibili multiorigine. Marca assicurati di controllarlo.

Risoluzione dei problemi

La configurazione di Digital Asset Links è soggetta a una serie di operazioni. Se l'applicazione mostra ancora Barra delle schede personalizzate in alto, è probabile che ci sia qualche problema nella configurazione.

La Guida rapida alle attività web attendibili contiene un'ottima sezione di risoluzione dei problemi su come eseguire il debug dei problemi di Digital Asset Link.

C'è anche l'incredibile strumento Peter's Asset Link, che aiuta a eseguire il debug di Digital Asset Links. sulle applicazioni installate sul dispositivo.