Header Ads Widget

Ticker

6/recent/ticker-posts

Ionic 5 y ThemeableBrowser Webview: cree una aplicación móvil multiplataforma para su sitio web receptivo

 En la parte anterior , hemos visto cómo crear una aplicación que muestre su sitio web a los usuarios de su aplicación utilizando Ionic 5 y el complemento InAppBrowser, que puede ser una solución alternativa para las personas que ya tienen un sitio web receptivo y no quieren invertir tiempo o dinero construyendo una aplicación desde cero para su negocio.

También hemos visto que no es la mejor solución en términos de rendimiento y también debido a algunos problemas de implementación con InAppBrowser.

Después de investigar un poco, hemos encontrado una solución relativamente mejor utilizando el complemento ThemeableBrowser Cordova, que no es más que una bifurcación de InAppBrowser con más características como:

  • ThemeableBrowser le permite agregar un navegador de aplicaciones con estilos personalizados
  • Agregue menús y botones con acciones personalizadas.

Se supone que esta es una mejor solución que InAppBrowser, pero nuevamente estamos en un mundo de errores, por lo que esperamos no encontrar ningún error al usar ThemeableBrowser para convertir nuestro sitio web receptivo en una aplicación móvil.

¡Ahora comencemos!

Generando un nuevo proyecto Ionic 5 / Angular e instalando ThemeableBrowser

Si viene de la publicación anterior, puede usar el proyecto generado anteriormente. Si no solo asegúrese de tener todos los requisitos instalados, Cordova e Ionic, genere un nuevo proyecto Ionic 5 / Angular usando:

ionic start myWebsiteApp blank --type=angular

Para su uso, vamos a continuar con el proyecto anterior y simplemente intercambiaremos InAppBrowser con ThemeableBrowser.

A continuación, debemos agregar una plataforma de destino. Como apuntamos a Android, podemos usar este comando:

ionic platform add android 

Nota: asegúrese de tener Java y Android instalados en su sistema.

Si desea apuntar a iOS, necesita un MACOS.

Ahora necesitamos agregar el complemento The Ionic Native y el complemento Cordova para ThemeableBrowser simplemente abriendo una terminal, navegando dentro de nuestra carpeta de proyecto y ejecutando los siguientes comandos:

ionic plugin add cordova-plugin-themeablebrowser
npm install --save @ionic-native/themeable-browser

Para poder inyectar ThemeableBrowser en nuestro constructor de clase, debemos proporcionarlo en el archivo src / app / app.module.ts

Así que adelante, abre el archivo src / app / app.module.ts y comienza importando ThemeableBrowser desde el módulo @ ionic-native / themeable-browser .

A continuación, agréguelo a la lista de proveedores:

/* other imports */
import { ThemeableBrowser } from '@ionic-native/themeable-browser';

@NgModule({
declarations: [
    MyApp
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp
],
providers: [
    StatusBar,
    SplashScreen,
    ThemeableBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

A continuación, abra el componente de su aplicación y agregue código para crear un navegador en la aplicación:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { ThemeableBrowser, ThemeableBrowserOptions, ThemeableBrowserObject } from '@ionic-native/themeable-browser';

@Component({
template: '<p>loading...</p>'
})
export class MyApp {

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen ,private themeableBrowser: ThemeableBrowser) {
    platform.ready().then(() => {

    statusBar.styleDefault();
    splashScreen.hide();

    const options: ThemeableBrowserOptions = {
        statusbar: {
            color: '#ffffffff'
        },
        toolbar: {
            height: 44,
            color: '#f0f0f0ff'
        },
        title: {
            color: '#003264ff',
            showPageTitle: true
        },
        backButton: {
            image: 'back',
            imagePressed: 'back_pressed',
            align: 'left',
            event: 'backPressed'
        },
        forwardButton: {
            image: 'forward',
            imagePressed: 'forward_pressed',
            align: 'left',
            event: 'forwardPressed'
        },
        closeButton: {
            image: 'close',
            imagePressed: 'close_pressed',
            align: 'left',
            event: 'closePressed'
        },
        customButtons: [
            {
                image: 'share',
                imagePressed: 'share_pressed',
                align: 'right',
                event: 'sharePressed'
            }
        ],
        menu: {
            image: 'menu',
            imagePressed: 'menu_pressed',
            title: 'Test',
            cancel: 'Cancel',
            align: 'right',
            items: [
                {
                    event: 'helloPressed',
                    label: 'Hello World!'
                },
                {
                    event: 'testPressed',
                    label: 'Test!'
                }
            ]
        },
        backButtonCanClose: true
    };

    const browser: ThemeableBrowserObject = this.themeableBrowser.create('https://ionic.io', '_self', options);



    });
}
}

imagey los imagePressedvalores se refieren a los recursos que necesita proporcionar.

Puede cambiar los colores y las imágenes para obtener un tema personalizado para el navegador de la aplicación.

También puede escuchar eventos y proporcionar un comportamiento personalizado de la aplicación.

Conclusión

¡Eso es todo! Esperamos sinceramente que obtenga el requisito deseado de esta serie de artículos que están diseñados para mostrarle cómo convertir su sitio web alojado receptivo en una aplicación móvil que se puede compilar para las principales plataformas como Android, iOS y Windows Universal Platform.

Si está satisfecho con el rendimiento de su aplicación, bienvenido. También puede adoptar otro enfoque que consiste en crear una verdadera aplicación nativa con una vista web utilizando NativeScript, que logrará el mismo requisito en este tutorial pero con un rendimiento mejorado, ya que solo tendrá una vista web en lugar de dos vistas web utilizadas en Ionic 5. / Caso Córdoba.

Publicar un comentario

0 Comentarios