I have an angular/ionic website that has registration, login, and dashboard pages. I want to build an android & ios app with the same code base.
When users download the app from the play store, if I add a new page/make a change to the existing page I have to submit the app for review, and then it will show the option for the update. Also, the user may not update the app. I want to show the latest changes to users as soon as I am ready with the update.
To achieve this I have followed the below steps:
1.I have built and deployed a web app(without native code). Let's call it xyz.com
2.I created a new ionic project for the APK file. I have placed an iframe with src=xyz.com
When I take the APK build of a new project, because of the iframe tag I can see the complete web app loaded. Whenever I make changes to the main web app project, after deploying to xyz.com just reopening the mobile app I can see the latest changes.
3.I have to read OTP during user login. So, after validation of user credentials in the web app, the next step is to enter the OTP. Now I have sent the event from the web app to the parent window(mobile app) like this:
window.parent.postMessage('ReadSMS','*')
In the mobile app, I listened to events from the website loaded in iframe like this:
window.addEventListener('message', handleMessage, false);
function handleMessage(event) {
if(event.data === 'ReadSMS'){
// Start native plugin cordova-plugin-sms-receive to read incoming sms
// After reading the SMS it is sent to the web app(in iframe)
myIframe.contentWindow.postMessage('SMSResult', '*',{OTP:otpfromsms});
}
}
In the web app, I listen to the events sent from the mobile app and auto-populate the OTP in the input box.
With the above iframe approach, users can use the new pages/bug fixes without updating the mobile app from the play store.
Since I use very less native plugins and they are not changed frequently. If I make any native code changes, then users have to update the app from play store, I am ok with that.
We have a tool called Ionic Appflow which has Live Update feature lets you update the UI and business logic of your app remotely, in real-time. Push HTML, JS, and CSS updates directly to your users without going through the app store to instantly fix bugs and ship new features.
The ionic Appflows is a paid tool and we can't afford it. However, I'm able to achieve live update feature and native functionality with just iframe and window message events.
Is there any disadvantage in the approach I have taken? Will, there be a problem while getting approval for listing my mobile app in the android play store and ios app store?
Can somebody please tell me the cons of the approach I have followed.
Thank You