Archivo de la etiqueta: ionic-native-http-connection-backend

Como mejorar el rendimiento de ionic en iOS y soluci贸n al problema de las peticiones http CORS

En el siguiente enlace tienes el 铆ndice para acceder al resto de entradas de este tutorial:

 

隆隆Atenci贸n!! este tutorial se basa en ionic 3 y est谩 desactualizado por lo que es posible que los ejemplos no funcionen en la 煤ltima versi贸n de ionic, haz click aqu铆 para acceder a un tutorial mas actual de 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: