Micro Frontends for Mobile.

Portals micro frontends allow multiple teams to build, test, and ship in parallel with hyper-focused embedded web experiences in your React Native, Android, and iOS mobile apps.

Supports:

  • React logo
  • Capacitor logo
  • Swift logo
  • Kotlin logo

Watch Ionic Portals in Action

A new era of scaling mobile app development is here. See how Portals breaks down barriers and increases development velocity.

WHY PORTALS?

Allow multiple teams to contribute to large scale mobile projects.

The easy way for web teams to add new features and screens to native apps in a safe, controlled way. Each Portal is a focused experience that delivers specific features and functionality, and is entirely self-contained. Teams can build, test, and ship these embedded micro experiences in parallel, allowing organizations to dramatically scale application development.

  • layer icon
    A Better Web View

    Easily embed custom web-based experiences while avoiding all the messy, annoying parts of stock Web View management.

  • checkmark square icon
    Deep Native Integration

    Build native mobile experiences that your users will love by exposing native features to the Web View in a standard and consistent way.

  • lock icon
    Highly Secure

    Empower web teams to contribute to native mobile projects, while maintaining full control of the exposed native API surface area.

How it works

Bring dynamic web experiences to mobile.

Safely and securely add web-based experiences to your existing native mobile apps. Here’s how it works:

  • 1

    Drop the Portals iOS & Android libraries into your app

  • 2

    Choose the web experiences you want to integrate with

  • 3

    Set granular permissions that designate which parts of the native app your web teams can touch

  • 4

    Choose from our pre-built native plugins to unlock full native device features in your web-based experiences

  • 5

    Build and ship 🚀

Portals takes care of the rest, without any advanced configuration or ongoing maintenance. The best part? Your web experiences are seamlessly integrated into the mobile experience, and virtually invisible to your users.

multiple phone diagram with layers
Features

Unlike stock Web Views, Portals is designed to help app teams work with the Web, not against it.

Put simply—Portals makes using Web Views enjoyable.

gear icon

A powerful API for enhanced native experiences

Portals provides a powerful cross-platform API to expose native functionality for embedding rich web apps in a controlled manner, a robust web-to-native communication bridge—and coming soon, cloud services for real-time app updates and more. Interested in testing it out early? Make sure to drop us a note.

import IonicPortals
class HomeViewController: UIViewController {
override func loadView() {
let portal = Portal(
name: "myPortal",
startDir: "web_app",
initialContext: ["startingRoute": "/home"]
)
self.view = PortalUIView(portal: portal)
}
}
class ProfileFragment : PortalFragment {
constructor() : super()
constructor(portal: Portal?) : super(portal)
companion object {
@JvmStatic
fun newInstance(): ProfileFragment {
val portal: Portal = PortalBuilder("myPortal")
.addPlugin(ShopAPIPlugin::class.java)
.setInitialContext(mapOf("startingRoute" to "home"))
.setStartDir("web_app")
.create()
return ProfileFragment(portal)
}
}
}
import ShopAPI from './ShopAPIPlugin';
import Portals from '@ionic/portals';
const App: React.FC<InitialContext> = () => {
const [sessionInfo, setSession] = useState(null);
const [startingRoute, setInitialRoute] = useState(null);
useEffect(() => {
const { context, sessionInfo } = await Promise.all(
Portals.getInitialContext());
ShopAPI.getSessionInfo());
);
setInitialRoute(context.startingRoute);
setSessionInfo(sessionInfo);
}, []);
// ...
puzzle piece icon

Rich native features and functionality

App development teams can build their own custom native functionality and easily expose it to the Web View. Likewise, the many plugins available in Capacitor core offer drop-in features and functionality when you need it.

app icon wheel
checkmark icon

Shared session info and auth tokens with web experiences

Take existing native app sessions and share with your Web based experiences and flows. Use the API to pass authentication tokens through Portals and keep users logged in, ensuring a smooth UX.

layer icon

A better Web View for iOS and Android native apps

Portals provides a superior Web View native control for iOS and Android that brings the full power of the popular Capacitor runtime bridge to existing native apps in a safe and controlled way.

layered phone
checkmark icon

Access control to your mobile projects

Native development teams get granular control over which parts of the app—including specific features and data—the web team can access when collaborating on a mobile project.

checkmark icon

Parity with platform changes and version updates

Unlike roll-your-own solutions that use the basic Web View development kit, Portals is fully managed and updated over time. That means, when mobile platform updates come out, we make sure the solution continues to work and keeps pace with the latest security guidelines.

Android, iOS, Portals layered icon
trending up icon

Increased app development velocity with web content

Enable your web development teams to bring existing rich web experiences—dynamic forms, pre-existing pages, workflows—and incorporate them seamlessly into the native app. Focus on building new experiences that require native code to shine.

flow chart for portals
Who is it for?

But wait—Portals isn’t for everyone.

Portals is for you if...

  • checkmark icon

    You'd like to accelerate app development and make more effective use of your time

  • checkmark icon

    You’re maintaining a complicated, brittle Web View on your own

  • checkmark icon

    Your apps require a seamless user experience embedding web content into native

  • checkmark icon

    You want to incorporate web-based experiences with the skills your web team already has

  • checkmark icon

    You’d like to enable both web and native teams to collaborate in a safe, effective manner

Portals is NOT for you if...

  • circle with line through icon

    You’re already content with using stock Web Views from platform vendors

  • circle with line through icon

    You prefer to roll your own security, features, and integrations

  • circle with line through icon

    You’re happy with the traditional Web View user experience in native apps

  • circle with line through icon

    You are not currently using or plan to leverage any web-based experiences in your apps

  • circle with line through icon

    You plan to keep your web and native teams focused on their respective platforms

Pricing

Contact sales for pricing.

Portals requires a license to run in a production environment. Get in touch with our team to discuss how Portals can help your team ship faster.