How to reduce Ionic2 app load time - ionic2

I am currently developing an Ionic2 app.
My app has
- Total 29 Pages
My plugins are
cordova-plugin-compat 1.1.0 "Compat"
cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-file 4.3.2 "File"
cordova-plugin-file-transfer 1.6.2 "File Transfer"
cordova-plugin-network-information 1.3.2 "Network Information"
cordova-plugin-splashscreen 4.0.2 "Splashscreen"
cordova-plugin-statusbar 2.2.1 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
cordova-plugin-zip 3.1.0 "cordova-plugin-zip"
cordova-sqlite-storage 2.0.2 "Cordova sqlite storage plugin"
ionic-plugin-keyboard 2.2.1 "Keyboard"
config.xml is almost default set.
I do npm run ionic:build --aot + ionic prepare android --prod --release, after that I create signed apk from android studio.
My app start time is 9-10 seconds.
How can I reduce it.
Please advice.

There is an ongoing discussion on the forums about this painfull issue
For now, the possible steps may help:
Hiding the splashscreen manually and disable autohide
Shrink the code with rollup, make sure to build for production
Adding lazy loading of some elements
Upgrading to newer ionic version 3+ which brings angular4

Related

ionic cordova plugin add cordova-plugin-advanced-http already installed

I am new on Ionic Mobile application development, so I am trying to POST data from Ionic app. Whenever I have run the app in browser using
ionic cordova run browser
It display below issue in console,
Native: tried calling HTTP.post, but the HTTP plugin is not installed.
Install the HTTP plugin: 'ionic cordova plugin add cordova-plugin-advanced-http'.
I have installed same plugin using terminal but terminal give warnings as its already installed.
Please Suggest.
Based on this https://ionicframework.com/docs/native/http/ you also need to run
npm install --save #ionic-native/http
and referencing it correctly in your app, please take a look at above link
Also for running app in browser try below command
Ionic serve
See https://github.com/ionic-team/ionic-native/issues/1975
The issue appears to have been fixed but there might be a lag in updating npm
I hade the same problem and I solve it with uninstall and reinstall the plugin
Uninstall plugin completely
ionic cordova plugin remove cordova-plugin-advanced-http
npm uninstall #ionic-native/http
and reinstall it
ionic cordova plugin add cordova-plugin-advanced-http
npm install #ionic-native/http
The Native Http plugin is the only way to handle the CORS from the client-side.
The way I see your problem, there might two possible fixes
Check whether the plugin is called after the platform.ready().
Even after it, if doesn't work or show the same error then follow this method.
// Declare cordova as a global constant
declare const cordova;
// directly call the cordova pulgin using "cordova.pulgin.http"
cordova.plugin.http.post(apiUrl, {}, {},
response => {},
response => {})

usage of --livereload command in Ionic2/ Ionic3

Ionic CLI 3.8 has come up with a --livereload option to live reload the changes from your app. Can someone tell the proper command for using it?
I tried with only --livereload and also ionic cordova --livreload but neither seems to work!
Just like #Duannx mentioned in the comments, the proper CLI command is
ionic cordova run android --livereload / ionic cordova run ios --livereload
or
ionic cordova run android --l / ionic cordova run ios --l
(Or just ionic run android/ios --l if you're using an older version of the CLI).
Please notice that in order to make the livereload feature to work, both the device and the computer running the command must be in the same WIFI network.
Otherwise you'll see errors like:
The connection to the server was unsuccessful
(http://XX.XX.XX.XX:XXXX)

Ionic 2 app takes too much time to load even build with --prod flag

Well, I am new to ionic 2 and build my first app having 2 pages and 2 services which are the very simple and for a news website.
The problem is, first I build my app for android using --release flag the file size was near 4MB and when I deploy on my mobile the load time was 14 - 17 seconds.
Then I search for 2 days to fix this issue and came up with the idea that I should enable production mode in main.ts and build using --prod flag . Now file size is 2.65MB and load time is 8 - 11 seconds which I think too much time for a mobile device. :(
My system information is:
ordova CLI: 6.5.0
Ionic Framework Version: 3.2.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.10.0
Xcode version: Not installed
In my app I simply pulling news from rest server and displaying on my page. Am I doing something wrong or is there any issue with new version of ionic? I also read by some people that ionic 1 speed was good than the latest version.
Note: I run my app on 3 different devices the issue remain the same.
Check your config.xml, and set SplashScreenDelay value to zero
<preference name="SplashScreenDelay" value="0"/>.
For me, below command worked:
ionic cordova build ios --prod --aot --minifyjs --minifycss --optimizejs
You can use your own platform in above command instead of ios.
It decreased app load time in my case.
Please find more details here https://forum.ionicframework.com/t/ionic-app-takes-too-long-to-start/97546

Why PWA ServiceWorker don’t work for me with Ionic 2?

I am having great difficulty in operating the ServiceWorker with ionic 2.
I start a new project with ionic this:
$ Ionic start pwa-project blank --v2
The default structure created by the ionic me two important folders:
- src
- www
In both there are the files:
- Index.html (where I have to uncomment the call to service-worker)
- Manifest.json (which set up the data from my app)
- Service-worker.js (the my service worker itself)
The logic for developers in ionc is not touching anything in the www folder and only work in the src folder. And I did, ran the $ ionic serve and started to edit my html, service-worker and manifest, all in the src folder. But I noticed that the changes are not reflected on the same files in the www folder.
Restarted the $ ionic serve and nothing happened.
All right, then I proceeded to edit these three files directly in the www folder to Activate from my service-worker.
This time I came across another problem. The service-worker does not run.
The script invokes the service-worker in the index.html file prints to the console the success message "service worker installed" confirming that it was installed, but I wrote some console.log() in my service-worker of events and these events are not fired, and I can not say why.
console.log ( '[SERVICE WORKER] Install');
console.log ( '[SERVICE WORKER] Activate');
console.log ( '[SERVICE WORKER] Fetch');
None of these is displayed on the console, which makes me believe that the service-worker for some reason, is not running.
In Chrome DevTools, Application pane, appears that the service-worker is installed and enabled.
Has anyone experienced this problem? Managed to solve?
PS .: When I create a project in vanilla javascript everything works fine, the service-worker is installed, running and messages are usually displayed on the console, which makes me believe that there is any interference Ionic (v2).
My Ionic info is:
Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic CLI Version: 2.1.4
Ionic App Lib Version: 2.1.2
OS: Distributor ID: elementary OS Description: elementary OS Freya
Node Version: v5.12.0
Late to the party, but for my current setup, all is working fine:
cli packages: (/home/khophi/Developments/Ionic/KhophiPwa/node_modules)
#ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2
global packages:
Cordova CLI : 7.0.1
local packages:
#ionic/app-scripts : 2.1.3
Cordova Platforms : android 6.2.3 ios 4.4.0
Ionic Framework : ionic-angular 3.6.0
System:
Android SDK Tools : 26.0.2
Node : v7.10.1
npm : 4.2.0
OS : Linux 4.10

Can't create an Ember.js application using bpm

I am trying to follow the directions on this ud3323/bpm wiki page to create an Ember.js application using bpm. The very first command on this page (bpm init hello_world) is throwing an exception - "No such file or directory - C:/apps/ruby-1.9.3/lib/ruby/gems/1.9.1/gems/execjs-1.2.13/lib/execjs/support/which.bat" (see the issue logged here - my comment is the second one). I checked the files under execjs directory - there is no file called which.bat. Note that I installed bpm using "gem install bpm". I don't know how to build ud3323's fork (don't know Ruby - I installed it just to try out bpm). Can anybody help me get past this issue?
Thanks in advance for your time.
Naresh,
I got some free time and found the issue. The current build of BPM requires the use of the gem execjs version 1.2.4. You probably have the latest version which is 1.3.0 or the latest from the 1.2.x branch.
What you need to do is install the correct version by running the command gem install execjs --version 1.2.4. After that BPM should work fine. I have it running on Windows7 64bit with a clean installation of Ruby 1.9.2.
Also for anyone else, I have detailed instructions of exactly what I did on this page: https://github.com/ud3323/bpm/wiki/Installing-with-Windows