Aitor Sánchez - Blog - Nov. 1, 2023, 10:31 a.m.
¿Pensando en incluir un sistema de navegador web dentro de tu aplicación? O, quizás ya sabes cómo se utiliza Browser Tab Ionic, pero lo que estás buscando es algún detalle, cómo una función o el valor de un campo de clase, para hacerla funcionar cómo tú quieres ¿me equivoco?
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo aprenderás cómo, de una manera sencilla y práctica, a abrir pestañas de navegación web dentro de tu aplicación gracias al componente Browser Tab Ionic.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
Y ahora si, comenzamos. Let´s go!
En primer lugar, y cómo con todos los componentes desacoplados del core, necesitamos instalarlo. Para ello vamos a ejecutar las dos siguientes líneas de código de consola:
ionic cordova plugin add cordova-plugin-browsertab
npm install @ionic-native/browser-tab
La primera instalará el plugin que hará las veces de puente entre el código TS y la parte nativa de la aplicación.
La segunda será el componente con el código TS necesario para que podamos usar el sistema de las tabs.
Ahora, y en el caso de que no vayamos a usar el componente ngx (versiones inferiores de Ionic 4) tenemos que incluir el módulo en los providers de nuestra app así:
...
import { BrowserTab } from "@ionic-native/browser-tab/ngx";
...
providers: [
...,
BrowserTab,
...
]
...
Listo, sigamos…
Para bien, o para mal, este componente no utiliza ninguna configuración adicional. No será necesario configurar nada a menos que lo extendamos, cómo veremos más adelante en el curso y donde os explicaré cómo se hace.
Pues cómo hemos visto en la introducción, sobre los componentes que utiliza, esté módulo solo está disponible para las siguientes plataformas:
No sé si estarán trabajando para incluir más, pero de momento son solo estas. Aunque no le veo utilidad más allá de estas. Si crees que tendría alguna más, déjalo en los comentarios y lo hablamos ?
Continuamos con la explicación y llegamos a la parte que más nos gusta a todos. Los ejemplos de código. Pues bien, cómo en todos los tutoriales, primero el ejemplo y luego la explicación.
import { BrowserTab } from '@ionic-native/browser-tab/ngx';
constructor(private bTab: BrowserTab) {
bTab.isAvailable()
.then(isAvailable => {
if (isAvailable) {
bTab.openUrl('https://ionic.io');
} else {
// Abre la URL con InAppBrowser integrado o SafariViewController
}
});
}
Bueno, pues cómo se ve en el ejemplo, solicitamos una promesa sobre la instancia del componente que hemos inyectado previamente en el constructor llamando a “isAvailable”.
La promesa se resolverá y con ella llegará un booleano que nos permitirá conocer si podemos hacer uso de la pestaña para poder abrir la URL.
En caso afirmativo la usaremos y en caso negativo forzaremos una llamada al navegador del sistema para que abra la URL.
Y listo, así es cómo funciona todo. ¿A qué es muy sencillo? Si tienes cualquier duda, y antes de continuar, déjamelo en los comentarios y estaré encantado de ayudarte a resolverla.
Bueno, cómo hemos podido ver hasta ahora, e intuir, se trata de un módulo muy pequeñito. Tanto es así, que solo tiene 3 funciones. Son las siguientes:
Este método no recibe parámetros y devuelve una promesa que tenemos que controlar. Con ella llega un booleano que nos permitirá conocer si es posible usar el tab para abrir la URL.
Cómo su nombre indica, nos permite cargar la URL sobre el TAB en cuestión. Recibe la URL queremos abrir cómo parámentro.
Fuerza un cierre de la pestaña.
Pero esta vez vas a ver una alterantiva por que no he conseguido encontrar ningún vídeo que ilustre el uso de los Browser Tab. Es una alternativa totalmente válida cómo verás a continuación. Se trata de usar un InAppBrowser en lugar de un Browser Tab.
Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.
Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.
Geniete, espero haberte ayudado con tus dudas y nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!