1 - Cordova

Well, it's not just that. What happens is that the preview part of the app runs on top of the webview, but the cord provides a native integration with the features of the device itself. The great advantage aside from the speed of development is you do not have to worry about the component standards of each platform, since the plugins deal with them for you.

Ionic (which works over the cordova) creates an object called window.cordova, which allows direct api access to the system. This allows you to make a call by javascript, and internally the cell detects the platform on which it is running and then runs the appropriate tool for it. You can access your camera, accelerometer, microphone, files, location, and any other feature on your device, provided that a plugin for that (even you can do it yourself) is developed.

2 - React Native

There is also how to create hybrid apps using js without being on top of web views. This is the case of React Native , a platform developed by facebook developers (it is also used in facebook apps). It allows you to create native cross-platform apps using React, and the advantages of it are a better performance than the previous option and as the cordova also allows you to have less headaches with other platforms.

When you use a hybrid architecture, you may have to create "bridges" between the HTML5 layer and the native layer to access native platform features. For example, accessing contacts from the mobile.

Normally you would have to select a method of communication between Javascript and native code (which is not trivial, unfortunately) and also implement this communication for the task you are doing.

The advantage of using a Cordova framework is that this kind of thing has already been done, either in the framework itself or in some plug-in.

The disadvantage is that there is the learning curve of the framework, which is not small in the case of Cordova; and you "home" with it, becoming subject to the future moods of the framework project.

My personal opinion: Cordova was most advantageous when there were 4 or 5 viable mobile platforms (iOS, Android, Windows Phone, Blackberry, Tizen, Meego ...) At the moment the market was reduced to iOS and Android only . Implementing only business logic in Javascript, and using React Native or even native view will provide a better result with less framework dependency.

For those developing native applications with the Android Studio IDE, I have a quick Webview example:

Create an index.html file in assets and change your MainActivity.java file, as done below:

package br.com.webview.android;

import android.os.Bundle; 
import android.support.design.widget.FloatingActionButton; 
import android.support.design.widget.Snackbar; 
import android.support.v7.app.AppCompatActivity; 
import android.support.v7.widget.Toolbar; 
import android.view.View; 
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.checkbox_webview);
        webView.getSettings().setJavaScriptEnabled(true);

        webView.loadUrl("file:///android_asset/index.html");

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

}

See above I called the webview through a id called checkbox_webview .

To call activity:

Intent intent = new Intent(this, MainActivity.class);
            startActivity(intent);

Your webview screen:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <WebView
            android:id="@+id/checkbox_webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="08dp"
            android:layout_marginRight="08dp"
            android:clickable="true"
            android:focusable="true"
            android:enabled="true"
            android:textStyle="normal"
            android:textColor="@android:color/black"
            android:paddingRight="6dp"
            android:paddingLeft="6dp"
            android:lineSpacingMultiplier="1.1"
            android:textColorLink="#309BE3"
            android:background="#f2f2f2"
            android:textSize="14sp"
            android:focusableInTouchMode="true"
            android:contextClickable="true"
            android:longClickable="true"
            android:nestedScrollingEnabled="true"
            android:textIsSelectable="true"
            android:scaleType="centerCrop"
            android:importantForAccessibility="auto"/>
    </ScrollView>
</RelativeLayout>

I hope I have helped.