Webview-based hybrid application development at Telefónica
At Telefónica, we specialize in building hybrid applications for Android and iOS. A hybrid application is one that combines a webview with native mobile functionality.
The webview is a component that acts as a container for web content. It is essentially a dummy web browser embedded within the native mobile app, Android or iOS either. This allows us to reuse the same web code across multiple platforms, saving time and resources.
However, there are some important considerations to keep in mind when building hybrid applications. One is performance. Because the webview is running within the native app, it may not always be as fast as a standalone web application. It is important to optimize the web code and test the performance of the hybrid app to ensure a smooth user experience.
Another consideration is security. Webviews are potentially vulnerable to attacks, such as cross-site scripting (XSS) and man-in-the-middle (MITM) attacks. It is important to take measures to protect against these types of threats, such as implementing proper input validation and using secure network communication.
In summary, we build hybrid applications that combine web functionality with native mobile functionality. By doing so, we can create engaging and convenient experiences for our users. It is important to consider performance and security when developing these applications.
The webview is a component that acts as a container for web content. It is essentially a dummy web browser embedded within the native mobile app, Android or iOS either. This allows us to reuse the same web code across multiple platforms, saving time and resources.
However, there are some important considerations to keep in mind when building hybrid applications. One is performance. Because the webview is running within the native app, it may not always be as fast as a standalone web application. It is important to optimize the web code and test the performance of the hybrid app to ensure a smooth user experience.
Another consideration is security. Webviews are potentially vulnerable to attacks, such as cross-site scripting (XSS) and man-in-the-middle (MITM) attacks. It is important to take measures to protect against these types of threats, such as implementing proper input validation and using secure network communication.
In summary, we build hybrid applications that combine web functionality with native mobile functionality. By doing so, we can create engaging and convenient experiences for our users. It is important to consider performance and security when developing these applications.
Enhancing performance blending native and web components
Our apps are more than just a webview. We’ve integrated native components within the webview to
enhance the performance of our app.
The way native components communicate with the web part in our framework is through a JavaScript bridge. This bridge acts as an intermediary between native code and web code, allowing bidirectional communication and access to device features from web code.
By integrating native components within the webview allows us to offer improved performance compared to a purely web-based app. Using native components rather than relying solely on the webview, we can take advantage of the device’s power and offer a smoother user experience.
The way native components communicate with the web part in our framework is through a JavaScript bridge. This bridge acts as an intermediary between native code and web code, allowing bidirectional communication and access to device features from web code.
By integrating native components within the webview allows us to offer improved performance compared to a purely web-based app. Using native components rather than relying solely on the webview, we can take advantage of the device’s power and offer a smoother user experience.
Image that shows an application screen indicating which components are native and which is a webview.
Overpower the user experience
Navigating in hybrid mobile apps
can be a challenge for developers due to the combination of web and native content. However, our framework
simplifies this process by allowing users to navigate as if they were using a native application.
There are two types of navigation in our apps. The first is client side routing navigation, controlled by the web, which allows web developers to decide what type of navigation and animation to use. This form of navigation is ideal for data that require fast and smooth navigation without having to reload the entire page.
The second way to navigate is i ntercepting URLs that are loaded at runtime. We apply a series of animations and navigation based on a configuration downloaded at the start of the application. This file contains information about how we want the app to behave when a certain URL is loaded. This allows us to tailor the navigation to the specific needs of each application.
In addition, our framework also allows developers to describe navigation behavior by decorating a URL with queryparams. This is especially useful when you want to specify navigation behavior for a single URL instead of creating a complete configuration file.
To conclude, we want to emphasize the importance of delegating the rendering of dialogs, alerts, or popups to the operating system. Also certain types of hardware access, such as making the device vibrate in certain flows or even accessing certain sections of the operating system, we can further enhance the user experience.
All of these flows are developed in web and are supported by our framework so that the hybrid mobile app has all the capabilities and potential of the device. This helps to improve the user experience and make the app feel more like a native application.
And that concludes it. We hope you enjoyed this first piece. If you found this article helpful, please give it a clap and share it with your friends!
In the next article, we will delve into the technical aspects of how our framework specifically operates.
There are two types of navigation in our apps. The first is client side routing navigation, controlled by the web, which allows web developers to decide what type of navigation and animation to use. This form of navigation is ideal for data that require fast and smooth navigation without having to reload the entire page.
The second way to navigate is i ntercepting URLs that are loaded at runtime. We apply a series of animations and navigation based on a configuration downloaded at the start of the application. This file contains information about how we want the app to behave when a certain URL is loaded. This allows us to tailor the navigation to the specific needs of each application.
In addition, our framework also allows developers to describe navigation behavior by decorating a URL with queryparams. This is especially useful when you want to specify navigation behavior for a single URL instead of creating a complete configuration file.
To conclude, we want to emphasize the importance of delegating the rendering of dialogs, alerts, or popups to the operating system. Also certain types of hardware access, such as making the device vibrate in certain flows or even accessing certain sections of the operating system, we can further enhance the user experience.
All of these flows are developed in web and are supported by our framework so that the hybrid mobile app has all the capabilities and potential of the device. This helps to improve the user experience and make the app feel more like a native application.
And that concludes it. We hope you enjoyed this first piece. If you found this article helpful, please give it a clap and share it with your friends!
In the next article, we will delve into the technical aspects of how our framework specifically operates.
