Agrega interactividad a tu PWA con URI schemes - Episodio I

⭐️ A través de este tutorial, repasamos los URI schemes que nos facilitan la interacción con otras aplicaciones y servicios de los dispositivos móviles, desde nuestra PWA.

Abrir un hipervínculo web o enviar un nuevo correo electrónico, son formas comunes de utilizar un URI scheme, pero, ¿sabías que existen opciones que nos permiten llamar por teléfono, enviar un tuit, un mensaje de WhatsApp o un simple SMS, y hasta abrir el mapa predeterminado de nuestra App directamente con instrucciones de navegación hacia un destino?

A través de este tutorial repasaremos las opciones que nos permiten otorgarle grandes poderes a nuestras PWAs.

Llamar por teléfono

Si bien algunos sistemas operativos móviles detectan automáticamente los teléfonos incluidos en una web y genera el hipervínculo de forma automática para iniciar una llamada, debemos conocer que existen URI schemes dedicados a esta acción. Para ello, en el hipervínculo de un número telefónico o imagen asociada a un teléfono, debemos incluir el siguiente código:

  <a href="tel:54911-1234-5678">Llámenos</a>
  

  var a = document.createElement('a');
  var h = a.setAttribute('href', "tel:54911-1234-5678");
  a.click();
  

Enviar un SMS

Aunque la mayoría utilizamos WhatsApp y Telegram, seguidos de iMessage o Facetime, para comunicarnos, el SMS tiene su URI scheme dedicado. Para permitir que el usuario de nuestra PWA envíe un SMS sin tener que copiar el número de destino, agregamos el siguiente código:

  <a href=”sms://+54911-1234-5678?body=hola%20mundo!”>Envíenos un SMS desde aquí</a>
  

Como podemos ver en el ejemplo, al armar el URI scheme, primero lo iniciamos con la referencia del hipervínculo que deseamos generar, en este caso SMS. Luego los dos puntos y la doble barra, seguido del número de teléfono de destino. A continuación, agregamos un símbolo ?, seguido de ‘body=’, este atributo indica que el texto que continúa después del signo igual, corresponde al cuerpo del mensaje de texto. En lugar de espacios en blanco entre palabra y palabra, utilizamos la codificación ‘%20’.

Llamar por Skype

Si utilizamos Skype de manera frecuente, también podemos establecer formas de iniciar una comunicación por esta vía desde nuestra PWA. Para ello, utilizamos el siguiente hipervínculo:

  <a href=”skype:fernando.o.luna?call”>Llámenos por Skype</a>
  

Si en lugar de una llamada deseamos realizar una videoconferencia, utilizamos este otro link:

  <a href=”skype:fernando.o.luna?call;video=true”>Llámenos por Skype</a>
  

Si deseamos realizar una llamada o videoconferencia con múltiples participantes, solo debemos cargar el nombre de cada participante, separándolos por un punto y coma.

  <a href=”skype:fernando.o.luna;pwaexperts.io?call;video=true”>Llámenos por Skype</a>
  

Y si solo deseamos iniciar un chat por Skype, simplemente reemplazamos en el hipervínculo, el indicador call por el indicador chat, y eliminamos la referencia video=true.

Comunicarse por WhatsApp

El hipervínculo para iniciar una conversación por WhatsApp es muy similar a los anteriores:

  <a href=”https://wa.me/5491112345678”>Escríbenos por WhatsApp</a>
  

Y si deseamos agregarle a la comunicación un texto predeterminado, dentro del hipervínculo del número de teléfono agregamos ?text=más%20el%20texto%20deseado.

Interacción con Twitter

Para interactuar desde una PWA con la red de microblogging, podemos encontrar varias opciones, entre ellas, visualizar un perfil particular o de una compañía:

  <a href=”twitter://user?screen_name=PWAExpertsIO”>Léenos en Twitter</a>
  

Si deseamos que los usuarios posteen un mensaje desde nuestra PWA a Twitter:

  <a href=”twitter://post?message=Hola%20mundo!”>Twitea</a>
  

Si deseas que los usuarios tuiteen y mencionen a un usuario:

 
  <a href=”twitter://post?message=Hola%20?screen_name=PWAExpertsIO”>Twitea</a>

O para acceder a un hashtag predeterminado:

  <a href=”twitter://search?query=%23PWA”>Investiga el ecosistema PWA en Twitter</a>

¿Qué pasa si incluyo una URI Scheme en mi PWA y el usuario no tiene una App asociada?

En este caso, pueden ocurrir dos cosas:

• Que el sistema operativo arroje un error a través de un mensaje en pantalla, indicando que no puede abrir el hipervínculo solicitado.
• Que aparezca la ventana de asociación de extensiones, pidiéndole al usuario que indique con qué App desea abrir el hipervínculo relacionado.

Debido al poco tiempo que llevan las PWA interactuando con los diferentes sistemas operativos, no podemos todavía ejecutar acciones mucho más profundas para tener así un mejor control. Como mucho, podremos evaluar sobre qué sistema operativo se está ejecutando nuestra plataforma y evitar la generación de hipervínculos relacionados a un número de teléfono, si el usuario ejecuta nuestra PWA en un sistema operativo desktop.

Continuará...

Hasta aquí, algunos de los URI schemes más populares para automatizar tu PWA y hacerla interactuar con otras Apps de dispositivos móviles. No te pierdas la segunda entrega de URI schemes, donde investigaremos un poco más, qué otros tipos de interactividad podemos integrar en nuestra aplicación web progresiva, con los ecosistemas móviles y de escritorio.

Si tienes dudas, deja un comentario para que entre todos podamos ir mejorando.

Saludos! 👋