Ionic Portals is a micro frontends tool for mobile applications that speeds up development time by providing the capability for web developers to add rich web experiences to Android and iOS mobile applications (Native or CrossPlatform).

Ionic Portals is a strategic front-end technology with an aim to create uniform user experience across digital touch points and devices, while minimizing effort by maximum reuse of current code base and capability to maintain single codebase across touchpoints.

Key Highlights of the Technology

1. Ionic Portals as best fit solution technology that satisfies key criteria of uniform user experience, code re-use and single codebase
2. Ionic Portals provides capability to integrate existing web screens to native mobile apps along with seamless navigation between native and web screens
3. Live Update feature provides capability to deploy app updates in real time without going through traditional app store submission process.
4. Common authentication solution i.e. the authentication solution used in mobile needs to be extended to web for seamless integration

Technology Fitment – Key Features

1. Capability to extend this as a super app with multiple microapps i.e. microapps developed in web (across any technology) can be embedded into a Mobile Super App using Ionic Portals
2. Access native app features via Capacitor bridge from the Webview to deliver truly native mobile experiences

Technology Benefits

1. Basic framework that provides capability to bundle web screens into mobile apps
2. Web code base can be reused and presented in native mobile apps
3. Omni channel – Uniform user experience across web, android and iOS channels
4. Single codebase using web code without having to re-implement such features in Android and iOS

Updating Web Code into Mobile Repo

The traditional approach is to copy over the dist folder from the web build to the specified folders in the mobile apps (Android/iOS).However this would require re-build and publishing of mobile apps via app store/play store.Ionic Portals provides alternate options for updating the web component of the apps without requiring the app to be updated.

Live Update Options:
1. Ionic AppFlow
2. Self-Hosted

Approach 1: Live Updates: Ionic Appflow

• Ionic Appflow is a mobile DevOps solution that provides CI/CD capabilities to Ionic apps and is a feature provided by Ionic Portal platform.
• It enables developers to automate their build, test, and deployment processes, making it easier to deliver high-quality apps quickly and efficiently.

Key Features:
• Appflow is its ability to provide live updates to Ionic apps.
• Developers can fix bugs, add new features, and make other changes to their app on-the-fly, without having to go through the app store review process.​
• This process is fully compliant with Apple and Android requirements

Steps: To enable live updates in an Ionic app using Appflow, developers need to follow these steps:​
1. Create an Appflow account and set up project in the Appflow dashboard.​
2. Install the Appflow CLI and connect it to their Appflow account.​
3. Add the Appflow SDK to Native app.​
4. Configure app to use live updates by adding the appropriate code to app’s entry point.​
5. Build and deploy the app using Appflow.

Approach 2: Live Updates: Self hosted

• Self-Hosted Live Update is a similar feature to Appflow Live Update, but it allows you to host the live update server
rather than using Ionic Portal, if ​having any specific code security or compliance requirements.
• Need to set up and maintain own live update server

Key Features:
• More control over the update process
• With Self-Hosted Live Update, can push updates to mobile apps without requiring users to download a new version from the app store.

Key Considerations & Recommendation – Pros & Cons

Ionic Portals would be best fit as a technology solution option based on the following considerations for mobile frontend technology:

(a) Code reusability – Quick deployment of existing web features on mobile

(b) Microfrontend on Mobile – Capability to provide Microfrontend based architecture on Mobile apps

(c) Live Updates of mobile features without the need for resubmission of the mobile apps to play store/app store

(d) Provides seamless user experience embedding web content into native.

Cons

(a) Currently supports only Native Android/IOS and React Native. Support for other cross platform frameworks (such as Flutter) is currently not available.

(b) Portals requires a license to run on a production environment.

(c) There could be additional integration effort of ensuring seamless authentication between web and mobile as the authentication protocols of both platforms might be different (for example – tokens for Mobile app and cookies for web)