What is a Web Native App?

Web Native is an approach to cross-platform mobile application development that uses web technologies to create native mobile applications for iOS and Android, as well as mobile-optimized Progressive Web Apps. 

Web Native apps are built utilizing modern web technologies and the web platform while embracing the full native functionality available on modern mobile devices. Web Native apps look and feel like other native apps because they fully support the UI patterns of each platform they run on.

Web Native is a term coined by the Ionic team to characterize the development approach used when building apps with Capacitor, an open source cross-platform native bridge built and maintained by the Ionic team. Capacitor is used as the foundation for all apps built with the Ionic SDK. Capacitor is also a popular choice for web developers building apps outside of the Ionic ecosystem, using their web-based UI library of choice. 

The primary advantages of Web Native development are:

• Excellent native mobile performance
• Faster time to develop an application
• Use of familiar web technologies, frameworks, and languages
• Complete customization of the UI layer of the application

How is “Web Native” different from “Hybrid”?

Hybrid apps have come to be associated with apps built using PhoneGap/Cordova, a project created in 2009. PhoneGap/Cordova focused on implementing experimental Web APIs before browsers did, by extending native Web View components available on iOS/Android/etc. And creating essentially a more capable “browser” for each platform.

The expressed goal of PhoneGap/Cordova was to “cease to exist” by having these experimental Web APIs be replaced with browser functionality in the Web View once vendors caught up. Thus, PhoneGap was true to its name in bridging the gap between mobile and web.

Additionally, PhoneGap/Cordova was created in a previous generation of web technologies where there was not a proliferation of powerful app frameworks or UI libraries focused on bringing native mobile experiences to the web.

In contrast, Web Native centers around using the full power of modern web technologies and the ecosystem around them to build high-quality mobile apps utilizing the full native functionality available on each platform.

Web Native apps do not attempt to abstract away the details of each platform. Rather, they utilize tools like Capacitor that make it relatively trivial to extend a modern web app with rich native functionality when necessary.

Web Native apps look and feel like any other native app because they utilize powerful APIs and native functionality available to them, focus on rich and fluid animations, and fully match the UI systems native to each platform.

Truly Native

Web Native apps are truly native, in the sense that they are downloaded from the app stores and installed as an IPA or APK file on a mobile device. They have full access to the native operating system and can access any native device API. Most Web Native runtimes, like Capacitor, include a library of prewritten native APIs for accessing common device functionality. You can also drop into the native platform and write your own custom APIs to interface with any feature available on the device - the same way as traditional native development. There is literally nothing that you can’t access so Web Native apps are indeed truly native.

Truly Web

At the same time, Web Native apps are fully web-based. The UI layer of your Web Native app executes in a web browser on the mobile device, known as a Web View control. This means that anything you can do in a web application can be done in a Web Native app. Want to use ag-grid for data visualization? You can do that in a Web Native app! Have other web libraries you want to take advantage of? Anything that runs on the web can be incorporated into a Web Native app. The same goes for web UI libraries like Material UI or Bootstrap. And if you’d like to customize the look and feel to match your brand colors, fonts, or other stylings, you can do that easily using the same CSS customizations that you’re already familiar with. The short story is that if you’re a web developer looking to build mobile apps, you’ll be right at home using a Web Native approach.

Why Web Native?

Native Mobile and Web in One Codebase

Web Native apps embrace the “build once, run everywhere” mantra. Since they are built using web technologies - aka “web-first” development - this provides the best opportunity to reach the most platforms. 

Using Web Libraries

Since a Web Native app is a web application at its core, any web library can be used. With thousands of them available, and many that you’ve likely used previously in desktop web apps you’ve built, the opportunities to reuse existing work are endless.

Using Web UI Components

Much of the work in building Web Native applications consists of building interactive user interfaces. Teams typically spend most of their time making sure it works well on mobile form factors and has a mobile UI experience that users expect (UI frameworks like Ionic Framework provide this experience out of the box).

Custom CSS Styling

With modern CSS practices applied, it’s easy to create a Web Native app that matches your brand or theme. This includes support for dark mode, CSS variables (reference a value in multiple places, change CSS dynamically at runtime, etc.), and encapsulation of styles in UI components with Shadow DOM.

How does Web Native work?

Web to Native Communication via the Native Runtime and Bridge

The Web View accesses native functionality by passing messages over the native bridge through to the native runtime. After the runtime has executed native code, a message containing data and the result of the call (success/failure) is sent back to the Web View.

Native Bridge

The Web View needs a way to access native functionality, interact with OS level native controls, and access custom native code or 3rd party plugins. It does that using the native bridge inside of Capacitor.

The native bridge is where Capacitor’s runtime JS API, including all known native plugins and their methods, are exported to the Web View. Capacitor loads all known plugins that have been installed or coded directly into the native project, and then exports window.Capacitor.Plugins containing every loaded plugin and every known method that plugin has exported to the Web View.

Finally, the bridge manages message passing and tracking native invocations between the Web View and the native runtime.

Native Runtime

Calls to native plugins and custom native code are routed from the Web View to the native runtime. When the Web Native app first starts, the runtime loads any installed plugins and custom native plugins. The runtime also initializes the Web View and injects the JavaScript Symbols for all known plugins into the Web View.

When plugins are invoked, the runtime processes each invocation as a message, constructs a method call to the corresponding plugin, and executes it.

All calls in Capacitor are asynchronous, so the runtime manages a set of “active” calls that have yet to be completed. These calls might be as simple as calling a Native API, or as complicated as opening an intent and processing the result of another app (such as the Camera on Android).

Once those calls are complete, a message is constructed and sent back to the Web View, which ultimately causes the original plugin call in your app to resolve.

Web UI Layer

The web UI layer runs the web application, consisting of HTML, CSS, and JavaScript. All visual interactivity, animations/gestures, and UI components are found here. Open source UI libraries like Ionic Framework are available to make sure the app looks and feels the way you would expect from a native mobile app, including mobile-optimized navigation, gestures, and animations. 

Accessing Native Device Features

Unsurprisingly, native code needs to be written to access native features. However, this is abstracted away from the web developer via plugins, packages of code that communicate with the native platform. The web developer makes calls to JavaScript APIs exposed by the plugin, and Capacitor executes the underlying native code. Besides the benefit of not needing to learn the iOS and Android-specific programming languages, Capacitor seamlessly calls web code when required and native code when available using the exact same API. As an example, instead of three separate APIs to open a device’s camera (getPhotoWeb, getPhotoiOS, getPhotoAndroid), it’s just one: getPhoto.

Capacitor apps are native apps. The project files used to build the native iOS and Android binaries are a plain iOS app for Xcode and a plain Android app using Gradle. This means teams can add arbitrary native code to the app and invoke it from the Web View through the Capacitor Plugin API. Teams with web and native developers can work alongside each other, shipping new features faster than ever.

Web View Component

A Web View is a native browser control that is used to display web content. It’s a lightweight instance due to being chrome-less (standard browser UI shell elements including the address bar, tabs, and navigation buttons aren’t included). Thus, visually, there’s not much to it - only the browser engine is available, and the developer decides which content to display to the end user.

You’ve likely interacted with a Web View and didn’t know it, as they are used in native apps all the time. Beyond Web Native apps, one common use case is in-app browsing, where a website is loaded (with limited navigation controls) within the app. This is useful for content that changes regularly, such as customer support documentation. Teams can update the documentation at their leisure, and native app users always get the latest information. Another example is 3rd party authentication, such as logging users in with social media or various email providers. The user is directed to the 3rd party, signs into that service, then is redirected back to the native app with only the data needed to securely authenticate them. Another Web View use case is advertising. Since ads change dynamically based on the user viewing them, loading them from the web is the easiest way to manage and deploy them.

Deploying to App Stores

Because Web Native apps are normal native apps at the end of the day, the way they are deployed to the App Stores is just like any other native app. Developers use the native integrated development environments (IDEs) - Android Studio and Xcode - to build and compile each native app version. The app files (APK and IPA) are signed with a private key representing the developer/company, then are uploaded to the app stores. The last mile of app store deployment is managed within the app store portals, including release management, marketing and promotional materials, user reviews, and more.

Deploying as a Mobile Web App or PWA

Web Native apps are simply web apps, so normal deployment capabilities and rules apply. When you’re ready to publish your Progressive Web App and share it with the world, just upload the contents of your web directory (for example, the www/ or build/ folder) to your hosting provider of choice.

Further reading

To learn more about building modern web native apps, explore these articles:

Ionic vs. React Native: Performance Comparison

Building Cross-platform Apps with Capacitor

What is a Progressive Web App and Why Do You Need One?

5 Questions to Ask Before Beginning Mobile App Development

Official Capacitor Plugins

About Ionic

Ionic is a leader in enterprise mobile app development, with 5 million developers worldwide and thousands of enterprise customers who use Ionic to build mission-critical apps for their customers, both external and internal. It powers 15% of apps in the app store, not including thousands of apps built internally at enterprises for every line-of-business need. Ionic is unique in that it takes a web-first approach, leveraging HTML, CSS, and Javascript to build high-quality iOS, Android, desktop, and Progressive Web Apps.