En el siguiente enlace tienes el índice para acceder al resto de entradas de este tutorial:
Indice Tutorial Ionic >>
- Tutorial de Ionic - Construye Apps móviles multiplataforma con ionic desde cero
- Tutorial de Ionic - Instalar ionic y las herramientas necesarias para el desarrollo
- Tutorial de Ionic - Hola Mundo en Ionic
- Tutorial de Ionic - Estructura de un proyecto Ionic
- Tutorial de Ionic - Mini Juego de acertar números en ionic 2, el controlador de la página y Data Binding y *ngIF
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 1 - Navegación por Tabs
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 2: Mostrando el mapa.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 3: Añadiendo FAB, marcador y ventana modal.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 4 - Mostrando la dirección a partir de las coordenadas y sacando foto con la cámara.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 5 - Guardando nuestros sitios en una base de datos local
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 6 - Mostrar detalles del sitio guardado y abrir navegador gps para llegar a el.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 7 - Modificar nuestros sitios.
- Tutorial de Ionic - Crear una aplicación para guardar nuestros sitios geolocalizados - Parte 8 - Eliminar un sitio desde el listado deslizando el item con "ItemSliding".
- Tutorial de Ionic - Peticiones http - API REST
- Tutorial de Ionic - Firebase - parte 1: Autenticación con correo y contraseña
- Tutorial de Ionic - Firebase - parte 2: Database - Guardar nuestros sitios en la nube.
- Como mejorar el rendimiento de ionic en iOS y solución al problema de las peticiones http CORS
- Libro: Desarrollo de aplicaciones móviles multiplataforma y PWAs con Ionic y Firebase desde cero.
- Firmar el apk para subirlo a Google Play
- Mostrar un mapa offline en Ionic con Leaflet
- Directiva para mostrar y ocultar menú al hacer scroll en Ionic
- Como crear una app multi idioma con Ionic
- Como crear componentes personalizados con Ionic
Hola a todos:
Esta semana he estado trabajando en una aplicación con ionic para un cliente.
La aplicación funcionaba estupendamente en todos los dispositivos Android donde la he probado, evidentemente en dispositivos más antiguos el funcionamiento era un poco menos fluido pero aceptable en cualquier caso, sin embargo a la hora de probar la app en un dispositivo iOS, concretamente en un iPhone 6 que tengo para probar las apps en un dispositivo real me he llevado una decepción.
La aplicación tiene que mostrar una lista con imágenes e información bastante grande, además tiene un buscador para filtrar el listado por varios campos.
El scroll no iba muy fino a pesar de utilizar [virtualScroll] para el listado, cuando filtraba el listado por algunos campos a la hora de refrescar el contenido del listado iba a trompicones y tardaba en responder… en fin, la experiencia de usuario dejaba bastante que desear.
Lo primero que he hecho es pulir el código todo lo que he podido intentando que sea lo más eficiente posible, pero no ha sido suficiente.
Investigando un poco en el blog oficial de ionic me he encontrado con WKWebView.
Podéis leer la entrada del blog de ionic en este enlace:
http://blog.ionic.io/cordova-ios-performance-improvements-drop-in-speed-with-wkwebview/
Como sabemos ionic utiliza apache cordova que a su vez utiliza la webview del sistema para mostrar el contenido de nuestra aplicación.
Actualmente, la plataforma iOS proporciona dos webviews diferentes.
Está la webview más antigua (y más lenta) llamada “UIWebView” y otra mas nueva llamada “WKWebView“.
El navegador web predeterminado de iOS es Safari, internamente Safari utiliza WKWebView, sin embargo ionic debido a diversas incompatibilidades y problemas técnicos utiliza UIWebView.
WKWebView es más rápida que UIWebView, además Apple proporciona actualizaciones en cada versión de iOS.
Para utilizar WKWebView solo tenemos que instalar en nuestra aplicación un plugin que proporciona ionic-team.
Para instalar el plugin desde consola ejecutamos el siguiente comando:
ionic cordova plugin add https://github.com/ionic-team/cordova-plugin-wkwebview-engine.git --save
Solo con instalar este plugin mi aplicación iba muchísimo mas fluida en mi iPhone.
Probad vuestra aplicación con este plugin y si todo va bien perfecto, sin embargo yo tuve problemas con CORS (Cross Origin Resource Sharing) al hacer peticiones al servidor ya que yo no tenia acceso para cambiar nada en el servidor y por lo tanto no podía cambiar las cabeceras de respuesta del servidor para aceptar peticiones cross origin.
Esto lo podemos resolver de dos maneras, utilizando en plugin de ionic native HTTP: https://ionicframework.com/docs/native/http/
El único problema es que sólo funciona en el dispositivo y no proporciona toda la potencia del servicio Http de Angular.
Para solucionar esto podemos utilizar ionic-native-http-connection-backend que podéis encontrar en github: https://github.com/sneas/ionic-native-http-connection-backend
La forma de instalarlo sería:
npm install ionic-native-http-connection-backend --save ionic cordova plugin add cordova-plugin-http2
Después en app.module.ts tendríamos que añadir lo siguiente:
import { NgModule } from '@angular/core'; import { NativeHttpFallback, NativeHttpModule } from 'ionic-native-http-connection-backend'; import { RequestOptions, Http } from '@angular/http'; @NgModule({ declarations: [], imports: [ NativeHttpModule ], bootstrap: [], entryComponents: [], providers: [ {provide: Http, useClass: Http, deps: [NativeHttpFallback, RequestOptions]} ], }) export class AppModule { }
Una vez hecho esto ya podemos realizar peticiones http sin problemas, si quieres saber como relizar peticiones http con ionic puedes consultar el siguiente post: Tutorial de Ionic – Peticiones http – API REST
Con estas dos cosas he conseguido que la aplicación funcione correctamente y con una fluidez mas que aceptable en iOS.
Bueno, por hoy aquí lo dejo con estos pequeños consejos, espero que os sea útil.
Si necesitas desarrollar una aplicación móvil no dudes en solicitarme un presupuesto sin compromiso: