Un nuevo enfoque para combinar el motor web con aplicaciones nativas
¿Qué pasa si le digo que las 7 líneas de JSON anteriores, de color naranja, es todo lo que necesita para convertir un sitio web en una aplicación móvil? No es necesario reescribir su sitio web usando alguna API de marco solo para que se comporte como una aplicación móvil. Simplemente traiga su sitio web existente como está y combínelo en una aplicación nativa con una referencia de URL simple.
¿Y si, con solo ajustar un poco el marcado JSON, puede acceder a todas las API nativas, los componentes de la interfaz de usuario nativa, así como las transiciones de vista nativas listas para usar?
Así es como se ve un ejemplo mínimo en acción:
Observe cómo he incrustado una página web de github.com, pero el resto del diseño son todos los componentes nativos de la interfaz de usuario, como el encabezado de navegación y la barra de pestañas inferior. Y la transición es automáticamente nativa sin que tenga que volver a escribir el sitio web utilizando ninguna API.
Antes de explicar cómo, puedes preguntar: "Eso es genial, pero ¿puedes hacer algo significativo además de mostrar la página web en un marco de aplicación nativo?"
Gran pregunta, porque ese es el tema principal de esta publicación. Todo lo que necesita hacer es crear un canal de comunicación bidireccional sin interrupciones entre la vista web y la aplicación , para que la aplicación principal pueda activar cualquier función de JavaScript dentro de la vista web y la vista web pueda llegar al exterior para llamar a las API nativas.
Aquí hay uno de esos ejemplos:
Tenga en cuenta que esta vista contiene:
- Encabezado de navegación nativo, completo con funcionalidad de transición incorporada
- A Web view, which embeds a QR code generator web app
- A native chat input component at the bottom
All this can be described by just tweaking some of the JSON markup attributes we saw above.
Finally, note that the QR code changes as you enter something from the chat input. The chat input triggers a JavaScript function inside the QR code web app that re-generates the image.
No app development framework has tried to fundamentally solve this problem of “seamless integration of web view into native apps” because they’re all focused on picking either 100% native or 100% HTML5 side.
Whenever you hear someone talk about the future of mobile apps, you would probably hear them talk about “Will it be the HTML5 approach that wins out? Or will it be native?”
None of them see native and html as something that could co-exist and furthermore, create synergy and achieve things that are not easily possible otherwise.
In this article I’m going to explain:
- Why blending web engine and native components is often a good idea.
- Why a seamless integration of HTML and Native is not easy, and how I implemented one.
- Most importantly, how YOU can use it to build your own app instantly.
Why would you use HTML in a native app?
Before we go further, let’s first discuss whether this is even a good idea, and when you may want to take this approach. Here are some potential use cases:
1. Use Web Native Features
Some parts of your app may be better implemented using the web engine. For example, Websocket is a web-native feature that’s designed for the web environment. In this case it makes sense to use the built-in web engine (WKWebView for iOS and WebView for Android) instead of installing a 3rd party library that essentially “emulates” Websocket.
No need to install additional code just to do something that you can do for free, which brings us to the next point.
2. Avoid Large Binary Size
You may want to quickly incorporate features that will otherwise require a huge 3rd party library.
For example, to incorporate a QR code image generator natively, you will need to install some 3rd party library which will increase the binary size. But if you use the web view engine and a JavaScript library through a simple