Habilitar Web Share Target en Trusted Web Activity

André Cipriani Bandarra
André Cipriani Bandarra

El objetivo de uso compartido web permite que las AWP reciban contenido compartido de otras aplicaciones instaladas en el dispositivo. Por ejemplo, las aplicaciones, como los editores de imágenes, pueden usar esta función para recibir una imagen de una app de cámara o una red social a fin de recibir una imagen o un video para compartir.

A partir de Chrome 86, el objetivo de uso compartido en la Web también está disponible para aplicaciones que usan la actividad web de confianza. Si bien la AWP debería funcionar de inmediato, se requieren algunos cambios en la aplicación para Android.

En este artículo, se asume que el desarrollador conoce Trusted Web Activities. Los lectores que son nuevos en esta tecnología pueden comenzar con la Guía de integración.

De la misma manera, una explicación completa de la implementación del objetivo de uso compartido web en una AWP está fuera del alcance, y los desarrolladores pueden encontrar más información en este artículo.

Se usará la aplicación de demostración https://scrapbook-pwa.web.app/ como la AWP de este artículo y su código fuente está disponible en GitHub, y la aplicación para Android se basa en la demostración básica de la actividad web de confianza.

Agrega Web Share Target a la app para Android

Para modificar una aplicación existente basada en la actividad web de confianza a fin de implementar Web Share Target, se requieren modificaciones en tres archivos diferentes:

build.gradle

Se actualizó la biblioteca android-browser-helper para que sea compatible con el objetivo de uso compartido en la Web. Como primer paso, actualiza la aplicación para usar una versión posterior o igual a 2.0.1.

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

res/strings.xml

La aplicación debe indicarle a la actividad web de confianza los detalles del uso compartido que admite recibir, como las URLs que se deben abrir, el método que se usará y los tipos de MIME compatibles.

Esto se hace a través de un JSON, que está disponible para Trusted Web Activity con un recurso de cadenas. Los campos son los mismos que el campo share_target disponible en el manifiesto web y se pueden agregar a una cadena dentro de strings.xml, casi como están, con dos notas importantes:

  1. El valor del atributo action debe ser la URL completa, incluido el origen.
  2. Las comillas dobles se deben escapar, por lo que cada " se convierte en \".

Así se ve la sección share_target de 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/*"
        ]
      }]
    }
  },
  ...
}

Y el nuevo elemento de string se verá de la siguiente manera:

<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

Se requieren algunos cambios en el manifiesto de Android. Primero, debemos asegurarnos de que DelegationService esté declarado, exportado y habilitado.

Los desarrolladores que compilaron su aplicación con base en la demostración básica ya tendrán el servicio incluido, y el lenguaje de marcado debería estar dentro de la etiqueta de aplicación y tener el siguiente aspecto:

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

Por último, se deben agregar dos elementos nuevos a la etiqueta de actividad LauncherActivity: - Una etiqueta meta-data que haga referencia al JSON definido en strings.xml. - Es un intent-filter que declara qué tipos de MIME la aplicación puede controlar a otras apps del 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>

Como se puede ver en el lenguaje de marcado anterior, se debe agregar un elemento data por cada mime-type declarado en el JSON de share_target.

Conclusión

La integración de Web Share Target permite que las AWP dentro de una actividad web de confianza se integren más a otras aplicaciones instaladas en un dispositivo Android.

Como se describió en los pasos anteriores, android-browser-helper simplifica el lenguaje de marcado adicional necesario para agregar compatibilidad con la API en una app para Android existente que usa Trusted Web Activity.

Consulta el artículo Web Share Target para obtener más información sobre el uso de la API en una AWP y la API de Web Share para aprender a compartir contenido desde la app web progresiva.

Solución de problemas

Mi aplicación no se muestra como una opción cuando intento compartir un archivo desde otra aplicación.

Si la aplicación no se muestra como opción, significa que intent-filter es incorrecto. Vuelve a verificar el lenguaje de marcado de intent-filter y asegúrate de que contenga las acciones, la categoría y el elemento mime-types correctos que controla la aplicación.

Mi aplicación se muestra como opción, se inicia la AWP, pero no se comparten los datos.

Esto puede deberse a algunos motivos. Esta es una lista de verificación de los puntos a tener en cuenta:

  • Asegúrate de que la validación de Vínculos de recursos digitales se realice correctamente.
  • Comprueba que el JSON dentro de strings.xml sea correcto.