Currently I'm developing an apps in Ionic.
However, as the hybrid curse says, I have this big delay when navigating between pages, which only happened after the apps deployed to android device.
After I took a while to investigate about it. Now I know that it is caused by the heavy rendering which Ionic does when we navigate to the other page.
I found that this rendering only happened once at the time we visit that page. The second time we visit, it's already cached so it is faster.
The question is. Anyone knows how to force render all pages in Ionic?
Thank you!
You can set cahce: false in your ui-router, to states you want never to be cached.
.state('foo.bar', {
cache: false;
url : '/foo/bar'
....
})
If you want dont want to cache any state ( which will allow you to rerender each state )
You can set $ionicConfigProvider.views.maxCache(0);
For more references see here
Related
We are adding a feature to our Cordova app to catch unhandled exceptions and restart the app. We would like the browser history to be cleared in this case so the user can't hit back on an Android device to go back to the screen that crashed.
It isn't possible to clear the browser history programmatically, but I expected there to be a Cordova plugin that reinstantiates the whole app (i.e. deletes the current webview and creates a new one). I wasn't able to find anything like this though.
Is there a good way to do this that will work on both iOS and Android?
In Android for every WebView instance you can do:
webView.clearCache(true);
webView.clearHistory();
webView.clearFormData();
For IOS please read here: Clearing UIWebview cache
I'd rather suggest cordova-plugin-cache-clear, in order to handle more than just Chrome on Android. but having an Activity restart itself cannot be accomplished by some Cordova plugin (and in case of an Exception, not even by Activity.recreate()), but it would require a helper Service, which gets notified (of course these have to be handled exceptions, un-handled exceptions would nevertheless just crash) and then handles the situation accordingly. It might make more sense, to iron out possible reasons for crashes - instead of wasting time to creating questionable workarounds for code which was not properly forged, in the first place. besides, if this is JavaScript which bugs out, there might be no way to work around these issues at all, but to fix them.
recently I have observed thath my android app uses too much of RAM.
When i open it it takes ~~120mb and after few changes of pages it goes to 400mb.
What can I do?
To change page I use popover with:
this.navCtrl.setRoot(StatisticsPage);
Some data from profiler:
link to data
Whenever you need to go into the child component then instead of using this.navCtrl.setRoot(StatisticsPage); you can use this.navCtrl.push(StatisticsPage);
this could be one point of improvement.
I have installed an Ionic app (beta 14) on my Android (Lollipop) device using:
ionic platform add android
ionic run android
I have also manually built the app and installed it with adb.
The app uses ion-side-menus, and the animations for the transitions between simple views (list -> detail -> detail) are incredibly laggy on a capable phone. The animation when the side menu slides out is very smooth in contrast.
To further investigate the situation, I served the www directory from my dev machine and opened that page in Chrome on the phone and it was as smooth as one would expect. The app also runs smoothly on iOS devices.
Does anyone have any clues as to why it is so slow when the app is in Ionic, but performs as expected when it is just being rendered in the browser?
I faced with the same issue. It's worse in cases that you need to load a lot of information. In those occasion, I disable the transition effect by setting:
nav-transition=none
if you need to disable the transition from your controller, do the following:
app.controller('ctrl', function($scope,$state, $ionicViewSwitcher){ $scope.goBack = function(){
$ionicViewSwitcher.nextTransition('none');
$state.go('back');
});
I found some solutions by which I face problem in ionic app transitiosn..
After State Change I use this code..
//OnState Change..
$scope.$on('$stateChangeSuccess', function() {
$ionicLoading.show();
MyTeamListing();
})
which hit serve every time when i change state.. which is slow down the app.
i just Remove first line and my code is working fine...
I don't know it is a good or bad way but its working for me fine..
Transaction is become slow if too much data is load on transaction
so that I use ionic events which load data after transaction done.
$scope.$on('$ionicView.afterEnter', function(){
console.log("afterEnter");
$ionicLoading.show();
loadRemoteData();
$ionicLoading.hide();
});
Well, the perks of developing hybrid application is its code re-usability and faster development however, what advantage we get on development results in slow hybrid apps. We can make the application relatively faster if we follow following points:
absolutely remove the comments and unnecessary functions
minimize the white-space, make your functions as small as possible
use minified css and js
optimize the images, the fewer the images the faster the application
if possible, preload the images check here
keep the nonessential js file to the bottom of the page just before the end of body tag
remove the unnecessary pages, unnecessary scrolling and large pages.
limit the usage of input boxes; make use of radio buttons,checkboxes and comboboxes if possible.
don't use jquery library unless of utmost necessity, use javascript
I know there are a few techniques to see if IOS and Android apps are opened again (so if a user minimizes the app and then reopens it to the same state), but I am not sure how to do this in Cordova. Has anyone had success with this?
My only thoughts on how to solve this is to either just doing a check on the data that I am concerned with every x-seconds to see if there are changes in the background, but that seems bad practice with data on mobile, even though they should be small.
The other thought was to try writing a new plugin that can use the native techniques, but have not reached the point where that seems like a good fit either.
Hoping someone has a better idea or can at least tell me that one of these thoughts is not completely crazy.
Looking at:
http://cordova.apache.org/docs/en/4.0.0/cordova_events_events.md.html#resume
I see:
document.addEventListener("resume", yourCallbackFunction, false);
Which says:
The resume event fires when the native platform pulls the application
out from the background.
Applications typically should use document.addEventListener to attach
an event listener once the deviceready event fires.
My question is essentially a follow up or clarification to this question.
I have an Android app built using Javascript and Adobe's Phonegap Build service, and I'm using "local storage" to store data on the device.
From that other question, I learned that data stored in local storage is essentially "permanent", in that it will stay on the device indefinitely, unless the user acts on it by manually clearing the cache for the app or deletes the app (and maybe other unusual circumstances that I'm willing to live with).
However, part of the accepted answer was confusing to me in that it started to blur the lines between talking about the phone's browser and talking about a Phonegap app.
What is unclear to me is if an app on Android using Phonegap uses the same cache as the phone's built in browser. Is Phonegap essentially an extension of the existing browser facility, or is it it's own separate stand-alone and self contained browser?
Critically, if a user clears the cache in their browser, will that impact an installed app based on Phonegap?
Since Phonegap uses Webiview to render your app : WebView and Phonegap.
And For security reason each app that uses WebView has its own cache and history.
"No User or OS wants such data to be accessed by 3rd party applications".
So in a nutshell, your app will keep its own history and data in its cache folder and will be deleted in one of the following cases:
User manually deleted them.
User used app setting screen and deleted them.
App uninstalled.
To read more about this. take look at WebView cache : Cookie and window management
Nope, the cache created within the in-app browser can only be deleted with the methods:
window.localStorage.removeItem("key");
or
window.localStorage.clear();
or app uninstall
or manual action (delete data/cache) in the application manager.
But the best answer is to make an experiment yourself and see what happens.
Yes it is separate but there are time where you need to pass a variable of some kind to the In App Browser. It makes coding so much more easier to pass a ls item from a current webview to another one like in iOS.
Here is what I did in PhoneGap
I use the InAppBrowser executeScript() to pass a copy of the current webviews localStorage to another.
//add the listener to detect when the page loads after inappbrowser is called into view
ref.addEventListener('loadstop', function(){
ref.executeScript({code: 'SetInAppBrowserLocalStorage(\''+localStorage+'\');'});
});
//In your inAppBrowser page you create a function that will get called on loadStop
//This will pass "all" the contents of the main webviws localStorage to the webview
//created by InAppBrowser
function SetInAppBrowserLocalStorage(localStorageThatWasPassed){
localStorage = localStorageThatWasPassed;
};
You could also clear the localStorage created by SetInAppBrowserLocalStorage() before the use leaves that view as well.
Tested and working 100% :)...let me know if you need more help
***UPDATE*****
This still works ...but not consistently anymore. After much testing I realize this is simply not the way to go. Sometimes the data simply is not passed fast enough when the inappbrowser instance is created. I talked to the cordova guys via there issue tracker and they told me it wasn't a secure way of doing things...I get that...but my response to them was what if I just want to pass ls variables between pages in my app..those are not even accessible from the internet... I honestly don't understand why the ls items can't be accessible globally in the app like it is in iOS and the rest of the web. If anyone has a better solution I would love to hear about it.
By making this setting in your mainActivity (which is extending Droidgap.)
super.appView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
We are making our app to not to store cache.