What is Web Native?
Learn about the benefits of using a web native approach to developing your enterprise-grade mobile applications.
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.
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.
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 it 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.
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.
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
Accessing Native Device Features
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.
To learn more about building modern web native apps, explore these articles: