Saltar al contenido principal

Configurar App Links para Android

Aprende cómo configurar enlaces de aplicación (app links) para una aplicación de Android creada con Flutter.

El enlace profundo (deep linking) es un mecanismo para iniciar una aplicación con una URI. Esta URI contiene un esquema, un host y una ruta, y abre la aplicación en una pantalla específica.

Un App Link es un tipo de enlace profundo que utiliza http o https y es exclusivo para dispositivos Android.

Configurar App Links requiere poseer un dominio web. De lo contrario, considera usar Firebase Hosting o GitHub Pages como una solución temporal.

Una vez que hayas configurado tus enlaces profundos, puedes validarlos. Para obtener más información, consulta Validar enlaces profundos.

1. Personalizar una aplicación de Flutter

#

Escribe una aplicación de Flutter que pueda manejar una URL entrante. Este ejemplo utiliza el paquete go_router para manejar el enrutamiento. El equipo de Flutter mantiene el paquete go_router. Este proporciona una API simple para manejar escenarios de enrutamiento complejos.

  1. Para crear una nueva aplicación, escribe flutter create <app-name>:

    flutter create deeplink_cookbook
    
  2. Para incluir el paquete go_router en tu aplicación, agrega una dependencia de go_router al proyecto:

    Para agregar el paquete go_router como una dependencia, ejecuta flutter pub add:

    flutter pub add go_router
    
  3. Para manejar el enrutamiento, crea un objeto GoRouter en el archivo main.dart:

    main.dart
    dart
    import 'package:flutter/material.dart';
    import 'package:go_router/go_router.dart';
    
    void main() => runApp(MaterialApp.router(routerConfig: router));
    
    /// This handles '/' and '/details'.
    final router = GoRouter(
      routes: [
        GoRoute(
          path: '/',
          builder: (_, _) => Scaffold(
            appBar: AppBar(title: const Text('Home Screen')),
          ),
          routes: [
            GoRoute(
              path: 'details',
              builder: (_, _) => Scaffold(
                appBar: AppBar(title: const Text('Details Screen')),
              ),
            ),
          ],
        ),
      ],
    );
    

2. Modificar el archivo AndroidManifest.xml

#
  1. Abre el proyecto de Flutter con VS Code o Android Studio.

  2. Navega al archivo android/app/src/main/AndroidManifest.xml.

  3. Agrega la siguiente etiqueta de metadatos y filtro de intents dentro de la etiqueta <activity> con .MainActivity.

    Reemplaza example.com con tu propio dominio web.

    xml
    <intent-filter android:autoVerify="true">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="http" android:host="example.com" />
        <data android:scheme="https" />
    </intent-filter>
    
#

Aloja un archivo assetlinks.json utilizando un servidor web con un dominio de tu propiedad. Este archivo le indica al navegador móvil qué aplicación de Android debe abrir en lugar del navegador. Para crear el archivo, obtén el nombre del paquete de la aplicación de Flutter que creaste en el paso anterior y la huella digital sha256 de la clave de firma que utilizarás para compilar el APK.

Nombre del paquete

#

Localiza el nombre del paquete en AndroidManifest.xml, en la propiedad package bajo la etiqueta <manifest>. Los nombres de los paquetes suelen tener el formato com.example.*.

huella digital sha256

#

El proceso puede diferir dependiendo de cómo esté firmado el apk.

Uso de la firma de aplicaciones de Google Play

#

Puedes encontrar la huella digital sha256 directamente en la consola de desarrolladores de Play Store. Abre tu aplicación en Play Console, en la pestaña Release > Setup > App Integrity > App Signing:

Captura de pantalla de la huella digital sha256 en la consola de desarrolladores de Google Play

Uso de un almacén de claves (keystore) local

#

Si estás almacenando la clave localmente, puedes generar el sha256 utilizando el siguiente comando:

keytool -list -v -keystore <path-to-keystore>
#

El archivo alojado debería verse similar a este:

json
[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.example.deeplink_cookbook",
    "sha256_cert_fingerprints":
    ["FF:2A:CF:7B:DD:CC:F1:03:3E:E8:B2:27:7C:A2:E3:3C:DE:13:DB:AC:8E:EB:3A:B9:72:A1:0E:26:8A:F5:EC:AF"]
  }
}]
  1. Establece el valor de package_name con el ID de tu aplicación de Android.

  2. Establece sha256_cert_fingerprints con el valor que obtuviste en el paso anterior.

  3. Aloja el archivo en una URL similar a la siguiente: <webdomain>/.well-known/assetlinks.json

  4. Verifica que tu navegador pueda acceder a este archivo.

Pruebas

#

Puedes usar un dispositivo real o el emulador para probar un App Link, pero primero asegúrate de haber ejecutado flutter run al menos una vez en los dispositivos. Esto asegura que la aplicación de Flutter esté instalada.

Captura de pantalla del emulador

Para probar solo la configuración de la aplicación, usa el comando adb:

adb shell 'am start -a android.intent.action.VIEW \
    -c android.intent.category.BROWSABLE \
    -d "http://<web-domain>/details"' \
    <package name>

Para probar ambas configuraciones (web y aplicación), debes hacer clic en un enlace directamente a través del navegador web o de otra aplicación. Una forma es crear un documento de Google Doc, agregar el enlace y tocarlo.

Si todo está configurado correctamente, la aplicación de Flutter se iniciará y mostrará la pantalla de detalles:

Captura de pantalla del emulador con enlace profundo (Deeplinked)

Apéndice

#

Código fuente: deeplink_cookbook