I am developing mobile app with ionic having splash & launch screen.
As of now, I am using below code to do my configurations & initiations and then hiding my splash screen.
angular.element(document).ready(function () {
// config & initiations
ionic.Platform.ready( function() {
if(navigator && navigator.splashscreen){
navigator.splashscreen.hide();
}
});
});
Also, I am using double tap exit at first launch page with below snippet.
.factory('backcallFactory', ['$state','$ionicPlatform','$ionicHistory','$timeout',function($state,$ionicPlatform,$ionicHistory,$timeout){
var obj={}
obj.backcallfun=function(){
var backbutton=0;
$ionicPlatform.registerBackButtonAction(function () {
if ($state.current.name == "register") {
if(backbutton==0){
backbutton++;
window.plugins.toast.showShortCenter('Press again to exit');
$timeout(function(){backbutton=0;},5000);
}else{
navigator.app.exitApp();
}
}
else{
$ionicHistory.goBack();
}
}, 100);
}
return obj;
}])
So in launch page, if i click back button twice in 5 seconds and it gets closed.
I could see app is still open in open apps list. (first or last button in android phones).
The problem is, if I relaunch the app after double tap to exit , then it is showing white screen for a while and showing launch screen (but no splash screen). I checked in other popular apps having double tap to exit function are showing splash screen again and launch screen without white screen.
How can I achieve the same in my app.
I had the same issue. It works fine by downgrading to version 2.0.0 of cordova-plugin-splashscreen.
You can refer to https://issues.apache.org/jira/browse/CB-9374.
Related
I use ionic 3 for my app and have an issue when test on android 8.
There is an event when user swipes in application from the right bottom corner to minimize it and swipes back (or stops swiping) to the initial position. Please check animated screenshot below:
I need to open keyboard when user cancels minimization, I am looking for an appropriate events, something like onstartminimization / onendminimization or onwindowminimizestart / onwindowminimizeend to handle this issue.
pauseListener:any;
resumeListener:any;
this.platform.ready().then(() => {
this.pauseListener = this.platform.pause.subscribe(() => {
console.log('**** MINIMIZE ****');
});
this.resumeListener = this.platform.resume.subscribe(() => {
console.log('**** RESUME ****');
});
});
ionViewWillUnload() {
//remove listeners
this.pauseListener.unsubscribe();
this.resumeListener.unsubscribe();
}
I am facing issue of back button disappearing in my ionic2 app.
below are the steps after which issue is occuring
Main screen - click on icon (page 1)
2.popover will come with 3 choices (popover - page 2)
3.select any option and new page will open (here back button is visible-page 3 ) click on '+' and go to new page(page 4)
4.come back to page 3 and back button is getting disappeared.
I have not written any specific code to show / hide back button as its working properly as per the default behaviour this issue only happening on android device not on ios. how to solve this?
import { App } from 'ionic-angular';
constructor(public navCtrl: NavController public appCtrl: App) {
}
function(){
this.appCtrl.getRootNav().navCtrl.push(strPagename,{params:
params});
}
Read about navigation with overlay components here like modals ,popover,etc.
https://ionicframework.com/docs/api/navigation/NavController/
Also getRootNav will be deprecated soon and we should use getRootNavById
I have created a small game and created build using Intel XDK. I installed it in device and can see the splash screen. I tried what is mentioned in other topics but unable to remove the splash screen.
function onDeviceReady(){
if( navigator.splashscreen && navigator.splashscreen.hide ) {
navigator.splashscreen.hide();
}
if( window.intel && intel.xdk && intel.xdk.device ) {
if( intel.xdk.device.hideSplashScreen ) {
intel.xdk.device.hideSplashScreen();
}
intel.xdk.device.setRotateOrientation("landscape");
intel.xdk.device.setAutoRotate(false);
intel.xdk.device.hideStatusBar();
}
}
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
This is how it looks initially when I launch the app.
I have this plugin added in the project
cordova-plugin-splashscreen
Please help me resolve this issue.
Received this answer on XDK forum
The purpose of the splashscreen is to hide the details of the
initialization process (even before your device ready fires). The
splashscreen you see is the default cordova splash screen, you can
replace it by your own graphics. You can upload custom splashscreen
through Launch Icons and Splash screens on Projects page. The
hidesplashscreen() method will hide the splashscreen that is displayed
at the initialization and the contents of your app will appear (which
happens when device is ready).
In my Phonegap app, created in a single html file using div as pages, I override the Back button to exit the app, only if the div that acts as the Home page is visible, otherwise to hide the others and show the home div. I use jQuery to attach the event handlers.
It works well at first app launch, but if the app is in the History list, the override is not working, the Back button exits the app without checking which div is visible. After deleting the app from the History list it works as expected again.
Tested on Nexus 4 with Android 4.2.
Here is the code:
$(document).on('backbutton', function (ev) {
ev.preventDefault();
if (!$('#divHomeScreen').is(':visible')) {
$('.screen').hide();
$('#divHomeScreen').show();
return false;
} else {
navigator.app.exitApp();
}
});
Thanks for your help.
What I have done is dynamically add and remove the backbutton handler as needed. For example...
function showScreen()
{
$("#divHomeScreen").hide();
$(".screen").show();
$(document).on("backbutton", onBackButton);
}
function hideScreen()
{
$(".screen").hide();
$("#divHomeScreen").show();
$(document).off("backbutton", onBackButton);
}
function onBackButton()
{
hideScreen();
}
This was tested on Galaxy S3 Android 4.3 and PhoneGap 3.3.0
I am having the most annoying situation. Ok, here goes. I am using a javascript based sliding menu for a mobile app. The "slider" works just like Facebook mobile, where you can click the button to show the menu on the left and click it again to close the menu. As an alternative, if you touch the still visible part of the page when the menu is showing it will also close. And that's it.
Problem: Note that I'm using Phonegap for this app. When I run the iOS simulator in Xcode all works fine EXCEPT if you swipeleft, for example, the page will move. I want to disable the swipe event all together. I have tried preventDefault, return false etc. Nothing seems to work. Again, my only goal is to disable touch events because for this app, I simply don't need them. Please see the javascript code for the menu show/hide below.
Thanks is advance. All is appreciated.
$(function(){
var menuStatus;
// Show menu
$("a.showMenu").click(function(){
$('#menu').show();
if(menuStatus != true){
$(".ui-page-active").animate({
marginLeft: "170px",
}, 300, function(){menuStatus = true});
return false;
} else {
$(".ui-page-active").animate({
marginLeft: "0px",
}, 300, function(){menuStatus = false});
return false;
}
});
// Menu behaviour
$("#menu li a").click(function(){
var p = $(this).parent();
if($(p).hasClass('active')){
$("#menu li").removeClass('active');
} else {
$("#menu li").removeClass('active');
$(p).addClass('active');
}
});
});
You could over-ride the $.event.special.swipe.horizontalDistanceThreshold to a larger value and prevent swipes on your page from triggering the swipe event.
Refer to Touch Events -> Swipe