I have an Angular 2+ app wrapped with Capacitor.
I want to add a splash screen animation to it.
After researching this issue I understood that animating the splash screen is not possible, but we can wait until the app is launched and add the animation to it.
Can someone explain the process of loading animation into an app?
How do applications load an animation upon app startup?
Sharing Android/iOS code is appreciated.
Creating Splash Screens and Icons
Follow the steps in here
First install
npm install -g cordova-res
Create a resources folder in the project with icon.png ( must be at least 1024×1024px) and splash.png (must be at least 2732×2732px). The resources folder should be at the same level as src folder.
Run the following commands for iOS/Android:
cordova-res ios --skip-config --copy
cordova-res android --skip-config --copy
Good luck! :)
Related
I am doing ionic application with capacitor.
I have to use https://ionicframework.com/docs/native/themeable-browser plugin for one funcationality but when I make build and upload to apple store app is rejected because of UiWebView issue.
Commands for installing themeable plugin
npm install cordova-plugin-themeablebrowser
npm install #ionic-native/themeable-browser
ionic cap sync
If I remove that plugin and upload it to apple build process pass successfully.
Apple no longer accepts new submissions using UIWebView:
https://forums.developer.apple.com/thread/122114
There is also an Ionic blog article: https://ionicframework.com/blog/understanding-itms-90809-uiwebview-api-deprecation/
You can use Capacitor's Browser API, but it is quite limited compared to some existing Cordova plugins. However it is built around WKWebView and is therefore compliant.
There is AFAIK no alternative but to move to WKWebView if you want your app to be on the Apple App Store.
I assume you are using Themeable Browser instead of InAppBrowser because you need to customize the toolbar and other components. Unfortunately Themeable Browser is no longer a supported project. In InAppBrowser version 5.0.0 https://cordova.apache.org/announcements/2021/02/16/inappbrowser-release-5.0.0.html only uses WKWebView and you can now set InAppBrowserStatusBarStyle to "darkcontent". Unfortunately, other changes have to be applied manually. I succeeded for Android and I fight for Ios :-)
Problem
When I release a new version to the production channel in Ionic Pro Deploy (Channels) then I have to cycle my app twice in order to get the latest version. Even worse, on the first cycle my app reverts back to a far earlier version for some reason.
What I mean by cycling is, starting from a state where the application is shut down and not open, I open the app, wait for the splash screen to go away and app to be ready, and then close the app.
Question
How do I get my app to download the latest version on the very next time I open the Ionic app following my production release?
Plugin configuration
I used the plugin config from the dashboard.ionicjs.com page:
cordova plugin add cordova-plugin-ionic --save \
--variable APP_ID="[myappid]" \
--variable CHANNEL_NAME="Production" \
--variable UPDATE_METHOD="background"
Execute the command you already showed but set UPDATE_METHOD to "auto"
If you wand more control over your updating methods have a look at this:
https://ionicframework.com/docs/pro/deploy/plugin-api.html
In my case, live deploy worked correctly on a "blank" Ionic project. Live deploy also worked correctly on "my" app on iOS but not on Android.
I followed the follow steps and successfully fixed Android. However, during this process iOS suddenly had the same problem (would apply update on app install/close/open).
Set versions as per Ionic support. IonicPro live deploy currently requires these versions. Ionic are in the process of fixing this dependency:
"cordova-plugin-ionic-webview": "1.1.19",
"cordova-plugin-ionic": "4.1.7",
Install a new version of "blank" project. Update my app to use the same npm plugin versions (some of my app plugins were old).
Remove/add android platform. My hunch is this is what ultimately resolved the issue.
I wanted to try a remove/add ios platform to see if that also resolved the issue on iOS. But it was less work to ultimately switch over to IonicPro rather than re-config the local build setup.
Live deploy worked correctly on both iOS and Android after creating binaries in IonicPro.
I'm developing an ionic v2 app but even working on ionic lab it gets a complete white screen on the ionic view. If I do the same withe the ionic v1 it works.
ionic start sample --v2
cd sample
ionic lab
ionic upload
It shows white but
ionic start sample
cd sample
ionic lab
ionic upload
It works perfectly. No changes on the code at all
Thanks
ionic 2 needs at least 4.4 android to work, lost a lot of time on this and there is nothing on the ionic website informing about that. Writing down here to help anyone in the future.
Ionic v2 supports android 4.4 and up. The older browser on pre-4.4 devices do not have the features needed for ionic2 and angular 2 to work. Though this can be fixed with crosswalk.
The supported platforms are list here:
http://ionicframework.com/docs/overview/#browser-support
You can go back to 4.1 with crosswalk it states.
ionic 2 needs at least 4.4 android to work,.. for more info debug app in chrome.
from ionic 2 Ionic officially stops to use ionic lab.
You can run and test your app in browser using command "ionic serve".
Ionic2 app was initially created with --v2 flag but now they removed it . So nothing happens with --v2
Better way to solve the code 1st time by running directly into android devices by
Ionic cordova run android or
Ionic run android
Then connect your device with your system and open chrome and enter chrome://inspect to the url
Now you can console log the the error and can find the way of solutions.
Now try to run by ionic view
Remove the platform and then add it again.
please try eionic start sample --type=ionic-angular
I'm working on ionic2.Few days ago,ionic2 was updated.After splash screen,we get the white screen for 14-15 second ,due to ionic2 was updated.
Add the --prod flag during any of the following CLI commands:
// If iOS
ionic emulate ios --prod
ionic build ios --prod
ionic run ios --prod
// If Android
ionic emulate android --prod
ionic build android --prod
ionic run android --prod
More about this.
there is some issues with that, you can follow them here github.com/driftyco/ionic/issues/9686 there is also some issue in ionic-app-scripts and there is some solutions try it
I'm assuming this in Android specific. I was having the same problem, the issue is two-fold:
The app is loading very slowly. If you watch console logs you'll see you get a note about it's taking 11000ms to load or whatever
Android is trying to be helpful by hiding the splash screen before you app is actually ready
I can't help you with #1, review your plugins, google around a bunch, and good luck. As for #2, you can add the line to config.xml to resolve
<preference name="AutoHideSplashScreen" value="false" />
Increase the SplashScreenDelay until you the app is reliably loaded before it hides.
Make sure you have SplashScreen.hide() in your platform.ready function in your main module as well so that when your app actually does load it'll hide.
You can find a bit more in Cordova, Android, incredibly slow loading
I want to use the Ionic 2 app I build as web app (progressive web app). But I want to when build, it will ONLY use android material design. Right now in localhost by running Ionic serve, the result on my browser is random - sometimes it looks like Apple with tabs at the bottom, and sometimes it looks Android with tab up top.
How can I build the app to make sure the output www folder will ONLY use Android style. And I can deploy the build as a website (run on desktop with no Cordova stuffs)?
You should be able to set the mode prop in the config options when you bootstrap your app in app.ts:
ionicBootstrap(MyApp, [SomeProviders], {mode: 'md'});