Ionic describes its new web view component, Ionic Portals, as a "supercharged" version of the native web view controls available on iOS and Android. It aims to make it easier for developers to integrate web apps with native code in an efficient way.
Ionic Portals is based on Capacitor, a native runtime that enables the creation of hybrid native apps using JavaScript, HTML, and CSS. According to Ionic, Capacitor is a perfect solution for web developers wishing to package their web apps as a native app. Ionic Portals focuses, instead, on the other half of the problem, that of app developers who need to integrate an existing web workflow, such as authentication with a portal or a product catalog, into a native app.
The features that Ionic Portals builds on top of the stock web view provided by the OS include the possibility of exposing native capabilities to the web experience, a web-to-native communication bridge enabling to consume the results produced by the web layer, the ability to program plugins to define new APIs to expose native capabilities and data to the web view, and more.
Portals are the fundamental abstraction in Ionic Portals, providing the means to embed a web app into a native app. You can embed multiple web apps through different portals or embed different screen of the same web app into different portals.
According to Ionic, the use of Ionic Portals also helps native and web development teams to better collaborate while keeping their respective responsibilities intact.
Portals enforces good security practices to protect developers and users alike. Native developers can set granular permissions that designate which parts of the native app the web teams can touch. With this feature, native and web teams can safely collaborate while ensuring that no unauthorized access to data or accidental overwriting of important features and data occurs.
The suggested way to add Ionic Portals to an iOS project is through CocoaPods, by placing the following dependency into your project Podfile:
pod 'IonicPortals', '~> 0.2.0'
Similarly, on Android, you add the Ionic Portals dependency to your build.gradle file:
dependencies {
implementation 'io.ionic:portals:0.2.0'
}
You can use the same approach to extend Ionic Portals by including any of Capacitor's 20+ plugins, which enable accessing the camera, clipboard, local filesystem, and so on.
Once Ionic Portals is integrated within your project, you can initialize it calling PortalManager.register() with your API key, then instantiate a portal with a locally stored web app while also initializing all required plugins:
PortalManager.newPortal("profile")
.setStartDir("webapp")
.addPlugin(CameraPlugin.class)
.setInitialContext(initialContextProfile)
.create();
Ionic Portals also supports the possibility of updating an app without a new app store review or release.
Ionic Portals is open source but requires a free license key.