Attiva obiettivo condivisione web nell'attività web attendibile

André Cipriani Bandarra
André Cipriani Bandarra

Destinazione condivisione web consente alle PWA di ricevere contenuti condivisi da altre applicazioni installate sul dispositivo. Questa funzionalità può essere utilizzata, ad esempio, da applicazioni come editor di immagini per ricevere un'immagine da un'app della fotocamera o un social network per ricevere un'immagine o un video da condividere.

A partire da Chrome 86, Condivisione web di destinazione è ora disponibile anche per le applicazioni che utilizzano l'Attività web attendibile. Anche se la PWA dovrebbe funzionare da subito, sono necessarie alcune modifiche all'applicazione per Android.

Questo articolo presuppone che lo sviluppatore abbia familiarità con le attività web attendibili. I lettori che non hanno mai utilizzato la tecnologia possono iniziare dalla guida all'integrazione.

Analogamente, una spiegazione completa dell'implementazione del target della condivisione web in una PWA non rientra nell'ambito e gli sviluppatori possono trovare ulteriori informazioni in questo articolo.

L'applicazione demo all'indirizzo https://scrapbook-pwa.web.app/ verrà utilizzata come PWA per questo articolo e il suo codice sorgente è disponibile su GitHub, mentre l'applicazione Android si basa sulla demo di base di Attività web attendibile.

Aggiungi Web Share Target all'app per Android

Per modificare un'applicazione basata su Attività web attendibile esistente e implementare la destinazione della condivisione web, sono necessarie modifiche a tre diversi file:

build.gradle

La libreria android-browser-helper è stata aggiornata con il supporto per Web Share Target. Come primo passaggio, aggiorna l'applicazione in modo che utilizzi una versione successiva o uguale alla 2.0.1.

dependencies {
    ...
    implementation 'com.google.androidbrowserhelper:androidbrowserhelper:2.2.0'
}

res/strings.xml

L'applicazione deve comunicare all'attività web attendibile i dettagli della condivisione che supporta la ricezione, ad esempio quali URL aprire, il metodo da utilizzare e i tipi MIME supportati.

Questa operazione viene eseguita tramite un file JSON, reso disponibile all'attività web attendibile con una risorsa di tipo stringa. I campi sono gli stessi del campo share_target disponibile nel manifest web e possono essere aggiunti a una stringa all'interno di strings.xml, quasi così com'è, con due note importanti:

  1. Il valore dell'attributo action deve essere l'URL completo, incluso l'origine.
  2. È necessario eseguire l'escape delle virgolette doppie, in modo che ogni " diventi \".

Ecco l'aspetto della sezione share_target di https://scrapbook-pwa.web.app/manifest.json:

{
  ...
  "share_target": {
    "action": "/_share-target",
    "enctype": "multipart/form-data",
    "method": "POST",
    "params": {
      "files": [{
        "name": "media",
        "accept": [
          "audio/*",
          "image/*",
          "video/*"
        ]
      }]
    }
  },
  ...
}

E il nuovo elemento stringa sarà simile al seguente:

<string name="share_target">
{
    \"action\": \"https://twa-web-scrapbook.web.app/_share-target\",
    \"method\": \"POST\",
    \"enctype\": \"multipart/form-data\",
    \"params\": {
      \"files\": [{
          \"name\": \"media\",
          \"accept\": [\"image/*\", \"audio/*\", \"video/*\"]
      }]
    }
}
</string>

AndroidManifest.xml

Sono necessarie alcune modifiche al file manifest Android. Innanzitutto dobbiamo assicurarci che DelegationService sia dichiarato, esportato e abilitato.

Per gli sviluppatori che hanno creato la propria applicazione sulla base della demo di base, il servizio sarà già incluso e il markup dovrebbe essere all'interno del tag dell'applicazione e avere il seguente aspetto:

<service
    android:name="com.google.androidbrowserhelper.trusted.DelegationService"
    android:enabled="true"
    android:exported="true">

    <intent-filter>
        <action android:name="android.support.customtabs.trusted.TRUSTED_WEB_ACTIVITY_SERVICE"/>
        <category android:name="android.intent.category.DEFAULT"/>
    </intent-filter>
</service>

Infine, devi aggiungere due nuovi elementi al tag attività LauncherActivity: - Un tag meta-data che fa riferimento al codice JSON definito nel file shortcuts.xml. - Un intent-filter che dichiara i tipi MIME che l'applicazione è in grado di gestire per altre app sul dispositivo.

<meta-data
    android:name="android.support.customtabs.trusted.METADATA_SHARE_TARGET"
    android:resource="@string/share_target"/>

<intent-filter>
    <action android:name="android.intent.action.SEND" />
    <action android:name="android.intent.action.SEND_MULTIPLE" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="audio/*" />
    <data android:mimeType="image/*" />
    <data android:mimeType="video/*" />
</intent-filter>

Come puoi vedere nel markup sopra, è necessario aggiungere un elemento data per ogni mime-type dichiarato nel codice JSON share_target.

Conclusione

L'integrazione della destinazione della condivisione web consente alle PWA all'interno di un'attività web attendibile di essere integrate più profondamente con altre applicazioni installate su un dispositivo Android.

Come descritto nei passaggi precedenti, il markup aggiuntivo necessario per aggiungere il supporto dell'API in un'app per Android esistente che utilizza Attività web attendibile è reso più semplice da android-browser-helper.

Consulta l'articolo sulla destinazione della condivisione web per saperne di più sull'utilizzo dell'API su una PWA e l'API Web Share per scoprire come condividere i contenuti dall'app web progressiva.

Risolvere i problemi

La mia applicazione non viene visualizzata come opzione quando provo a condividere un file da un'altra applicazione.

Se l'applicazione non viene visualizzata come opzione, significa che intent-filter non è corretto. Controlla il markup intent-filter e assicurati che contenga le azioni, la categoria e i mime-types corretti gestiti dall'applicazione.

Come opzione, viene visualizzata la mia applicazione: la PWA viene avviata, ma i dati non vengono condivisi.

Le cause possono essere diverse. Ecco un elenco di controllo degli aspetti da esaminare:

  • Assicurati che la convalida di Digital Asset Links sia riuscita.
  • Verifica che il file JSON all'interno di stringhe.xml sia corretto.