Skip to main content

Deep Linking

La app de Vivla soporta deep links para permitir la navegacion directa a pantallas especificas desde URLs externas, notificaciones push y otras aplicaciones.

Esquemas de URL por entorno

Cada entorno tiene su propio esquema de URL para evitar conflictos entre versiones instaladas simultaneamente:
La app configura Associated Domains para manejar Universal Links:
  • applinks:vivla.app
  • applinks:*.vivla.app
Esto permite que enlaces web abran directamente la app cuando esta instalada.

Servicio de linking

El archivo src/shared/services/linkingService.ts es el punto central para el manejo de URLs entrantes, tanto desde deep links como desde notificaciones push.

Rutas soportadas

Ruta generica de encuestas

La ruta /survey permite abrir cualquier encuesta como modal sin crear rutas especificas. Soporta dos formatos de deep link:
El servicio infiere automaticamente:
  • scopeId de queryParams.scopeId ?? queryParams.propertyId ?? queryParams.bookingId
  • scopeType de queryParams.scopeType ?? (queryParams.bookingId ? 'booking' : 'property')
  • entryPoint default: 'deep_link'

Parametro entryPoint

Las rutas de encuesta aceptan un parametro opcional entryPoint que indica como se accedio a la encuesta. Se usa para analytics:

PendingDeepLinkStore

El store src/shared/stores/pendingDeepLinkStore.ts se encarga de preservar deep links cuando el usuario no esta autenticado.

Metodos

Este mecanismo asegura que los deep links no se pierdan cuando la app requiere autenticacion. El usuario es redirigido a login y, una vez autenticado, se navega automaticamente a la ruta original.
Las notificaciones push pueden incluir un campo deep_link en su payload. Cuando el usuario interactua con la notificacion:
  1. El linkingService recibe la notificacion
  2. Extrae el campo deep_link del payload
  3. Procesa la URL y navega a la ruta correspondiente
  4. Si el usuario no esta autenticado, el deep link se almacena en PendingDeepLinkStore
Asegurate de que las notificaciones push incluyan el campo deep_link con una ruta valida. Rutas invalidas seran ignoradas silenciosamente por el servicio de linking.

Plugin withNavigationSchemes

El plugin personalizado withNavigationSchemes agrega esquemas de navegacion externa en iOS mediante LSApplicationQueriesSchemes. Esto permite que la app pueda abrir otras aplicaciones de mapas:

Google Maps

Esquema comgooglemaps://

Waze

Esquema waze://

Apple Maps

Esquema nativo de iOS

Configuracion en app.config.ts

La configuracion de deep linking se define en app.config.ts:
Con typedRoutes: true habilitado, el compilador de TypeScript valida que las rutas de navegacion sean correctas en tiempo de compilacion, evitando errores por rutas inexistentes.

Abrir un enlace desde dentro de la app

Para abrir cualquier URL desde el codigo hay un unico punto de entrada: linkingService.openURL(url). Nunca Linking.openURL directo. openURL decide antes de delegar en el sistema operativo:
  • Es un enlace nuestro (esquema propio, o vivla.app / dev.vivla.app / staging.vivla.app) → lo resuelve a una ruta y navega con el router. Si es nuestro pero no casa con ninguna ruta, muestra la pantalla de error in-app.
  • Es externo → lo abre el sistema operativo, como siempre.
Llamar a Linking.openURL con una URL de un dominio que la propia app reclama no abre la app: abre el navegador. Es comportamiento deliberado de iOS (QA1916): cuando la llamada viene de dentro de la app que reclama el dominio, el sistema no la trata como universal link. Por eso la decision vive en linkingService y no en cada pantalla.

La forma del enlace por esquema propio

Linking.parse resuelve con new URL(), asi que con dos barras el primer segmento de la ruta se lee como hostname: parseURL recompone la ruta cuando detecta ese caso, asi que ambas formas funcionan dentro de la app. Pero cualquier enlace por esquema que se genere fuera de la app —por ejemplo el puente de vivla-app-site, que reabre la app cuando un enlace cae en el navegador— debe usar tres barras, porque las versiones ya instaladas no llevan esa correccion.