See how Portals fits into the entire Ionic Ecosystem

Micro Frontends for Mobile.

Allow multiple teams to build, test, and ship in parallel with hyper-focused embedded web experiences in your native mobile apps.

Start building

Supports iOS and Android

Documentation

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

WHY PORTALS?

Allow multiple teams to contribute to large scale mobile projects.

Portals provides an 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 you to dramatically scale application development.

  • layer icon

    Embedded Micro Experiences

    Easily embed custom web-based experiences that are focused on a specific feature or functionality, like a mobile checkout flow.

  • 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

Portals gives you everything you need to bring hyper-focused, embedded micro experiences to mobile.

Deliver web-based experiences that are invisible to your users.

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.

import IonicPortals
class HomeViewController: AppParticipantViewController {
override func ViewDidLoad() {
let portal = PortalBuilder("myPortal")
.setInitialContext(["startingRoute", "/home"])
.setStartDir("web_app")
.create()
self.view = PortalWebView(frame: view.frame, portal: por
super.viewDidLoad()
}
}
import io.ionic.portals.Portal;
import io.ionic.portals.PortalFragment;
class ProfileFragment : PortalFragment {
override fun onViewCreated(@NotNull View view, Bubdle savedInstanceState ) {
val portal: Portal = PortalBuilder("myPortal")
.addPlugin(ShopAPIPlugin::class.java)
.asetInitialContext(mapOf("startingRoute” to "/home”)
.setStartDir("web_app")
.create()
var portalView = PortalWebView();
super.onViewCreated(portalView, savedInstanceState);
}
}
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

Specifically designed for iOS and Android native apps

While many micro frontend solutions target traditional web apps, only Portals is specifically designed to address the needs of native mobile applications. It seamlessly integrates with the mobile device and provides an experience that is invisible to your users.

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.

layered android, iods, and portals icons
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 are responsible for one or more large scale mobile projects 

  • checkmark icon

    You’d like to scale app development with multiple teams working in parallel

  • checkmark icon

    You have hyper-focused functionality that you want to reuse across applications

  • checkmark icon

    You want empower your web teams to participate in mobile app development

  • checkmark icon

    You want to do all of this without ripping out your existing native projects

Portals is NOT for you if...

  • circle with line through icon

    One team is enough to manage all of your mobile applications

  • circle with line through icon

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

  • circle with line through icon

    You’re not interested in reusing features or functionality across applications

  • 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

ionic portals icon

Start building today.

Enhance your native mobile apps with web experiences today.

Community

For businesses with less than USD $1M ARR

Start building
Enterprise

For businesses with greater than USD $1M ARR

Portals Web View
100+ mobile-ready web UI components
20+ Core native plugins
Community support
Premium enterprise support
Dedicated Customer Success Manager
Guaranteed response SLA
Hot-fixes and priority ticketing
Expert Advisory services
Training opportunities