All Web content\/app runs inside of Web Views within a Native Wrapper\/Container<\/p>\n\n\n\n
![\"\"](\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Web-View.webp\")
<\/figure>\n\n\n\nResponsive Web Design: A Web design approach aimed at crafting web pages to provide an optimal viewing experience\u2014easy reading and navigation with a minimum of resizing, panning, and scrolling\u2014across a wide range of devices (from mobile phones to desktop computer monitors). Web content must be Responsive Design to display properly within each defined Web View. A Responsive Design web page displays properly within a the mobile device browser and desktop\/notepad browser without any change to the code base.<\/p>\n\n\n\n
Multiplatform Support
Leveraging Hybrid App for Multiplatform Support: This requires writing the container in Native mobile language. HTML5 Web components can be reused across all platforms without need to customize.<\/p>\n\n\n\n
\u2022 iOS: Objective C container + HTML5
\u2022 Android: Java Container + HTML5
\u2022 Windows: C# Container + HTML5<\/p>\n\n\n\n
Leveraging Hybrid App for Cross-platform Support: This requires writing the container in Cross-platform tool only ONCE. HTML5 Web components can be reused across all platforms without need to customize.
\u2022 Appcelerator + HTML5 OR Xamarin + HTML5
Multiple Form Factor Support: Responsive Web Design enables support across many form factors without a need to rewrite HTML5 code, namely,<\/p>\n\n\n\n
iPhone
\u2022 5: 1136\u00d7640
\u2022 4S: 640\u00d7960
iPad
\u2022 First & second generations: 1024\u00d7768
\u2022 Third generation: 2048\u00d71536
iPad Mini 1024\u00d7768<\/p>\n\n\n\n
Android Phones & Tablets
\u2022 Small screens: 426dp x 320dp
\u2022 Normal screens: 470dp x 320dp
\u2022 Large screens: 640dp x 480dp
\u2022 Extra-large screens: 960dp x 720dpNative Wrapper Integration<\/p>\n\n\n\n
Native: Performance Optimization<\/p>\n\n\n\n
Responsive Web Design
\u2022 Implement Device-Specific Functionality in Native Code (Speech Recognition, GPS, Accelerometer etc.)
o Faster performance
o Tighter feature integration with the device
o Access to the complete set of device-specific functionality<\/p>\n\n\n\n
\u2022 Minimize Graphics\/Animation on Web Content
o Graphic-intensive pages:Tend to render slowly in HTML, and also require bandwidth to be accessed from remote server
o Animation is optimized within native view<\/p>\n\n\n\n
\u2022 Optimize Data Access
o Remote content access for dynamically generated HTML pages
o Use Local HTML access for static content<\/p>\n\n\n\n
Native\/Web View Communication<\/p>\n\n\n\n Direct Web View API Invocation<\/p>\n\n\n\n The first aspect of communication between the web view and the native aspect of a hybrid app is about the native part invoking methods on the web view.<\/p>\n\n\n\n Open an URL: The native app invokes a method on the web view component to open and display the contents of a specified URL. Navigation: The web view component provides API methods to perform navigation while visiting a web site. The native application invokes navigation methods on the web view Web View to Native: Web View Event Captures<\/p>\n\n\n\n There are certain events generated from the web view that indicate the occurrence of an activity on the web view. These include: When these events are fired from the web view, the native app can capture these by means of event handlers so that an appropriate action can be executed. Typically, this is done on Appcelerator Studio or Titanium Studio using event listeners JavaScript Injections<\/p>\n\n\n\n \u2022 The native app can communicate with the web view to send messages using the first methodology we talked about earlier.![\"\"](\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Native-or-Web-View-Communication-1024x489-1.webp\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Direct-Web-View-API-Invocation.webp\")
<\/figure>\n\n\n\n
\u2022 Lets assume that the web view object is called \u2018webview\u2019.
\u2022 The native invokes a method on \u2018webview\u2019 as such: webview.openURL(\u2018url_to_open\u2019);
\u2022 The web view sends a request, fetches the response and displays the content.<\/p>\n\n\n\n
\u2022 webview.goForward(); \u2013 Allows the user to navigate forward in history
\u2022 webview.goBackward(); \u2013 Allows the user to navigate backward in history
\u2022 webview.canGoForward(); \u2013 Allows the user to test if forward navigation can be done
\u2022 webview.canGoBack(); \u2013 Allows the user to test if backward navigation can be done<\/p>\n\n\n\n![\"\"](\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Web-View-Event-Captures.webp\")
<\/figure>\n\n\n\n
\u2022 Web page beginning to load
\u2022 Web page loading done
\u2022 Single tap\/Double tap events on web view
\u2022 Swipe event on web view
\u2022 Click event on web view<\/p>\n\n\n\n
\u2022 webview.addEventListener(\u2018load\u2019, function(){
\/\/event handler code goes here
});
On native platforms like iOS, this is done using delegate methods.<\/p>\n\n\n\n![\"\"](\"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/JavaScript-Injections.webp\")
<\/figure>\n\n\n\n
\u2022 However, there are scenarios when the native app needs to fetch or send custom data from\/to the web view respectively.
\u2022 This is because of the fact that the web page displayed in the web view usually consists of HTML and JavaScript.
\u2022 In order to change certain behavior of the web page being displayed in the web view, or to fetch data from the web view, which otherwise won\u2019t be accessible directly, the native app needs to be able to send or pull data pertaining to the web view\u2019s execution environment.
\u2022 Generally, the web view\u2019s execution environment runs JavaScript, which has its own scope, variables, methods, event listeners etc.
\u2022 Attempting to solve the issues outlined above requires injection of custom JavaScript into the web view\u2019s execution environment.
\u2022 This may also involve running a JavaScript code against the web view to fetch certain data pertaining to either the DOM or the web view\u2019s JavaScript scope.
\u2022 On Appcelerator Studio, this is achieved by invoking the method call \u2018evalJS\u2019 on the web view object.
\u2022 Using \u2018evalJS\u2019, JavaScript code can be injected to alter the web page\u2019s behavior, or the native app can send\/fetch custom data to\/from the web page.<\/p>\n","protected":false},"excerpt":{"rendered":"