Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Cómo obtener acceso a la API de phonegap desde una página remota

Tengo que seguir la situación: Tengo una página web ya existente y quiero desarrollar una aplicación que utiliza esta página. Hasta aquí todo bien. Cuando inicio la aplicación, el index.html local se carga y redirecciona ( window.open target: _self ) al sitio web externo. Este sitio web se abre en la vista web del teléfono. En el sitio web externo agregué el cordova.js para obtener acceso a la API nativa del phonegap. Pero no funciona correctamente. El evento deviceReady se activa correctamente, pero no tengo acceso a la API de phonegap, por ejemplo, navigator.camera.

¿Cómo puedo hacerlo para obtener acceso a la API?

  • Cree un cursor de matriz en lugar de DB
  • No se pudo resolver resource @ style / Widget.Holo.Light.ActionMode.Inverse
  • Iniciar lanzador android predeterminado mediante programación
  • Cambiar el color de la flecha desplegable de Spinner en XML
  • ¿Qué tamaño deben tener los iconos de Barra de Acción (Barra de herramientas) en el nuevo diseño de Material Android?
  • Formato de fecha y hora según la configuración regional
  • Por favor, no comente que será rechazado por AppStore, etc., etc.

    ¡Gracias por tu ayuda!

  • Maven desarrolla la aplicación Android - BuildConfig
  • Android NavigationView (material support lib) no interactúa con la barra de estado correctamente
  • Forzar Android Fast Scroll Bar en ListViews para dibujar dentro de relleno
  • Android Habilitar TLSv1.2 en OKHttp
  • Emulador de Android TV con API de Google
  • En Android, ¿qué significa la dimensión% p?
  • 6 Solutions collect form web for “Cómo obtener acceso a la API de phonegap desde una página remota”

    Bueno, para mí la solución era una mezcla de varias fuentes, pero la mayor parte de la solución se encontró aquí .

    Lo que debe hacer es lo siguiente:

    1. Defina su config.xml para apuntar directamente al index.html remoto.

       <content src="http://your-remote-location/index.html" /> 
    2. En su index.html cualquier referencia a un recurso de dispositivo android local prepend con algún prefijo único como **injection** . Por ejemplo, para cordova.js se le cordova.js algo como:

       <script type="text/javascript" src="**injection**www/cordova.js"></script> 
    3. Busque SystemWebViewClient.java en la siguiente ubicación: your-project-location\platforms\android\CordovaLib\src\org\apache\cordova\engine .

    4. Agregue la siguiente declaración de enum en la sección de miembros privados de la clase en la parte superior:

       private enum WebExtension { PNG, MP3, MP4, TTF, SVG, JS, ICO, HTML, CSS, EOT, WOFF, JSON; } 
    5. Busque el método shouldInterceptRequest y añada lo siguiente justo después de try { line:

       if(url != null && url.contains(INJECTION_TOKEN)) { String assetPath = url.substring(url.indexOf(INJECTION_TOKEN) + INJECTION_TOKEN.length(), url.length()); try { String mimeType = "text/plain"; String ext = assetPath.substring(assetPath.lastIndexOf(".") + 1, assetPath.length()); WebExtension extension = WebExtension.valueOf(ext.toUpperCase()); switch(extension) { case PNG: mimeType = "image/png"; break; case MP3: mimeType = "audio/mpeg"; break; case MP4: mimeType = "video/mp4"; break; case TTF: mimeType = "application/x-font-ttf"; break; case SVG: mimeType = "image/svg+xml"; break; case JS: mimeType = "application/javascript"; break; case ICO: mimeType = "image/x-icon"; break; case HTML: mimeType = "text/html"; break; case CSS: mimeType = "text/css"; break; case EOT: mimeType = "application/vnd.ms-fontobject"; break; case WOFF: mimeType = "application/x-font-woff"; break; case JSON: mimeType = "application/json"; break; } WebResourceResponse response = new WebResourceResponse( mimeType, "UTF-8", parentEngine.webView.getContext().getAssets().open(assetPath) ); return response; } catch (IOException e) { e.printStackTrace(); // Failed to load asset file } } 

    El resultado de todo ello será la interceptación de cada solicitud de recurso y en caso de que contenga la cadena **injection** en ella, se reducirá la ubicación del recurso y lo solicitará desde la ubicación del dispositivo local en el que se ejecuta la aplicación . El mimeType es necesario para cargar el recurso de la manera correcta por el navegador de la aplicación.

    Espero que ayude a alguien.

    Incluir el script cordova.js en el sitio remoto va a ser complicado, porque hay un cordova.js diferente para cada plataforma. Podría modificar el servidor para que devuelva el cordova.js correcto basado en el agente de usuario, pero esto también es complicado porque incluirá este script cuando vea el sitio desde un navegador móvil y esto es indeseable porque los errores de javascript podrían ser Mostrado al usuario. La misma historia al ver el sitio desde una computadora de escritorio, el cordova.js no debe ser incluido.

    Me parece que tienes una página web local (con el script cordova incluido) y desde allí cambias a la página remota (que también incluye el script). No estoy seguro de que este cambio de página vaya a funcionar. Si funcionó, puede que tenga que esperar el segundo evento deviceready.

    Pero sólo puede configurar la página del sitio remoto como la página raíz en la aplicación cordova, sin necesidad de una página "cargador" intermedia. Sólo tienes que configurarlo en el archivo config.xml:

     <content src="http://your.website.fake/index.html" /> 

    Debe asegurarse de que permite cargar su sitio en la aplicación. En este mismo archivo, debe agregar:

     <access origin="http://your.website.fake" subdomains="true"/> 

    También he tenido este problema y cambiar cosas en config.xml (contenido y etiquetas de acceso) no funcionó. He inspeccionado la aplicación mientras se estaba ejecutando en el teléfono y descubrí que cuando cargué el sitio remoto había algunos archivos que faltaban.

    En primer lugar es el archivo llamado cordova_plugins.js que puede encontrar para cada plataforma en la carpeta de la plataforma. A continuación, también necesita algunos archivos específicos de complemento. Usted puede encontrar estos haciendo una construcción y extraerlos de allí. Para android, la ruta es la siguiente APK / assets / www / plugins. Simplemente copie el contenido de su servidor y estará listo para hacerlo.

    NOTA : también puede encontrar los archivos específicos del complemento en la carpeta de la plataforma, pero están incompletos, ya que están desaparecidos cordova.define ("… al principio. Esto lleva a requerido y el módulo está indefinido, por lo que acaba de hacer una compilación Y obtener de allí.

    Este complemento resuelve el problema sin tener que codificarse una solución de Android.

    https://www.npmjs.com/package/cordova-plugin-remote-injection

    https://github.com/TruckMovers/cordova-plugin-remote-injection

    El complemento de inyección remota permite que un sitio remoto interactúe con las API javascript de cordova cuando se cargan en su aplicación cordova.

    • Injeta cordova e instala el plugin JS en la vista web para cualquier página remotamente explorada, permitiéndoles el mismo acceso al objeto cordova y sus complementos como una aplicación cordova empaquetada.

    • Soporte para plataformas iOS y Android.

    Lo probé y funciona bien. Lo único que debes recordar es que tendrás que esperar a que cordova esté listo, así:

     <html> <head> </head> <body> <script> document.addEventListener("deviceready", function() { document.write("Now you can use plugins"); }, false); </script> </body> </html> 

    Es una limitación impuesta por Cordova / PhoneGap aquí :

      if (startFilePath == nil) { loadErr = [NSString stringWithFormat:@"ERROR: Start Page at '%@/%@' was not found.", self.wwwFolderName, self.startPage]; NSLog(@"%@", loadErr); self.loadFromString = YES; appURL = nil; } 

    He inhabilitado este cheque en el pasado para permitir a Cordova trabajar con direcciones de archivos no locales.

    He trabajado para que funcione durante mucho tiempo para la depuración rápida de phoneGap, pero no pude encontrar una forma de hacer que la API funcione sin tener el cordova.js junto con la aplicación (no en una ubicación remota).

    No sé exactamente por qué esto no funciona. Si conoces el funcionamiento interno, espero escucharlo …

    Lo último que he intentado fue poner un 100% por 100% iframe en el html principal y cargar el cordova.js local en el mismo documento. Entonces pude usar la API pero hubo algunos problemas de escala en iOS, que es otra pregunta …

    No recuerdo la forma exacta en que he implementado y estructurado esto, pero lo editaré si lo encuentro.

    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.