Opening iOS app on start page evertime

I am running an app developed via Appery on iOS device. When I open it for the first time things are as expected and the app opens at the "start page" as set in Appery settings.

When the app is closed and opened again, it opens on the page where it was closed. I would however want it to open at the start page (again as set in Appery settings).

How may I accomplish this?

Regards.
1 person has
this question
+1
This topic is no longer open for comments or replies.
  • Hello!
    You can change start screen in Project --> App Settings-->General-->Start Page
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi!

    Request you to review my description carefully. I know how to change start screen in Appery. I am mentioning the scenario when app is installed on device (iOS) and opened there. It does not open on start screen everytime by default, but open at the page it was last closed. My question is how can I achieve the opening always on start page.

    Regards
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Dear Cody,

    Unfortunately, we don't have ready solutions.
    It depends on your app logic, which fall outside the scope of our support. Please search online for solutions.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Alena,

    Apologies, but isn't Appery's mission to help users in being able to deploy application on devices? I am not requesting support on any fancy/custom feature, but something very basic. The issue is that when the app is opened on iOS device, it opens on the page it was last closed at. This is fine until the point that the session token expires (user open the app after a while) causing all sorts of problems and services to fail. Is there a way for me to detect this within the project code and custom tailor my implementation with Appery code. Since the problem is so specific to your platform, I am unfortunately not able to find solutions by just searching online.

    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hello!

    Could you clarify if you want to open app on start screen from background mode?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Here is the current behavior and what we are expecting to achieve for an app developed with Appery.io and installed on an iOS device.

    1) User opens the app (on actual device)
    2) User closes the app (lets say display page at time of close was "samplePage")
    3) User opens the app again

    In step 3, the app opens at "samplePage". Instead, at the very minimum, we want it to open at startPage as set within Appery.

    Regads.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Cody,

    Phonegap supports "pause"(when app collapsed) and "resume"(when app expanded).

    You can read about it here: http://docs.phonegap.com/en/3.5.0/cor...

    So please follow this solution:

    1 Add new JS asset.

    2 Use following code for this asset:

    add "resume" event handler and use there code:



    var onResume = function(){

    alert("resume app");

    //Note: you should replace "startPage" with your start page name.
    Apperyio.navigateto("startPage");

    };

    document.addEventListener("resume", onResume , false);



    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Yurii,

    Excellent! Many thanks, as always. Things work as expected. One minor typo for folks in community who may use your suggested code: Appery.navigateTo needs a capital T.

    I have couple of follow up questions:
    1) the app now navigates to "startPage" as set in App settings in Appery but the launch image (as set in iOS binary within Appery app settings) is bypassed. Is there a way to direct the app to launch image instead?
    2) with your recommended change when the app is closed and opened again, the originally displayed page (before close) shows up before the app navigates to "startPage". This is bit of disruption with user experience. I wonder if you have suggestions to make the "startPage" (or ideally launch image) show up directly when the app is opened (after being closed) without the originally displayed page (before close) showing up.

    I am bringing this up as most current apps tend to follow the above format/protocol and it might be beneficial for developer community on this forum (besides my selfish interests of course)

    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Cody,

    1. Unfortunatly you can not display splash screen when you need. But, you can create "splashScreen" page with splash image on full size and show it when you need.

    2. Unfortunatly i don't have same examples. But i guess you can try following(if you ready to go ahead).

    2.1. Add "resume" event handler to new CSS asset:



    var onResume = function(){

    jQuery(".hideElement").remove();

    //You should use here your splash screen image.
    var hideElement = jQuery('');

    //Hide current page with imitation of splash screen.
    jQuery("body").append(hideElement);

    //Note: you should replace "startPage" with your start page name.
    Apperyio.navigateto("startPage");
    };
    document.addEventListener("resume", onResume , false);



    2.2. On start "startPage" screen "page show" event handler add following js code:



    //Remove "splashScreen" after new page has been loaded.
    jQuery(".hideElement").remove();



    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Yurii,

    This is quite creative and of course an acceptable solution!

    Regarding 2.1: //You should use here your splash screen image:

    I'm not sure how would one go about displaying the splashScreen page as suggested by you in 1? Or are you suggesting that every page in the project have a splash image component which would normally be hidden and only shown on onResume (this would be a bit tedious route)?

    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Cody,

    You just need to upload your splash screen image to media manager:
    http://prntscr.com/53hvs8/direct

    And then you can use following URL to get this image:

    http://appery.io/app/view/93534752-d9...

    Where:
    "93534752-d9f7-46fc-86cf-c2c20637cda4" is your app id.
    "a_01.jpeg" is your image name in media manager.

    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Yurii,

    Just to make sure we're on the same page, is the below what you're recommending:



    var onResume = function(){

    jQuery(".hideElement").remove();

    //You should use here your splash screen image.
    $('div[dsid="mobilecontainer"]').css('background-image', 'url('+Appery.getImagePath('splash_image.png')+')');
    $('div[dsid="mobilecontainer"]').css('background-size','100% 100%');

    var hideElement = jQuery('');

    //Hide current page with imitation of splash screen.
    jQuery("body").append(hideElement);

    //Note: you should replace "startPage" with your start page name.
    Appery.navigateTo('startScreen', {});
    };

    document.addEventListener("resume", onResume , false);



    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Cody,

    You can get current page with following code:



    jQuery.mobile.activePage.attr('id')



    So code should be:



    var onResume = function() {

    var currentPage = jQuery.mobile.activePage.attr('id');
    //Do nothing if current page is startPage.
    if(currentPage == "startScreen")
    return;

    jQuery(".hideElement").remove();

    //You should use here your splash screen image.
    $('div[dsid="mobilecontainer"]').css('background-image', 'url(' + Appery.getImagePath('splash_image.png') + ')');
    $('div[dsid="mobilecontainer"]').css('background-size', '100% 100%');

    var hideElement = jQuery('');

    //Hide current page with imitation of splash screen.
    jQuery("body").append(hideElement);

    //Note: you should replace "startPage" with your start page name.
    Appery.navigateTo('startScreen', {});
    };

    document.addEventListener("resume", onResume, false);



    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • This reply was removed on 2014-11-09.
    see the change log
  • Hi Yurii,

    I have tried and tested the solution.

    Unfortunately, it doesn't yield the expected behavior.

    When the app is closed and opened again, it displays the "currentPage" with splash image set as new background image.

    However, what I was hoping for was that the splash image appear momentarily right after the app is reopened, and then navigate to "currentPage". Below is the code execution (on iOS device):



    var onResume = function() {

    var currentPage = jQuery.mobile.activePage.attr('id');

    if (currentPage == "startScreen")
    return;

    jQuery(".hideElement").remove();

    $('div[dsid="mobilecontainer"]').css('background-image', 'url('+Appery.getImagePath('splash_image.png')+')');
    $('div[dsid="mobilecontainer"]').css('background-size','100% 100%');

    var hideElement = jQuery('');
    jQuery("body").append(hideElement);

    if (tokenExpired()){
    Apperyio.navigateTo('startScreen', {});
    }

    };

    document.addEventListener("resume", onResume, false);


    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Cody,

    If i understand you correctly - problem is to show "splashScreen" momentally after app opened.

    I guess culprit of this problem could be in "resume" event that triggers after app shows to user.. In this case i can suggest you to show "splashScreen" on "pause" event.



    var onPause = function() {

    jQuery(".hideElement").remove();

    //You should use here your splash screen image.
    var hideElement = jQuery('<div class="hideElement" style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: #fff; background-image: url(http://upload.wikimedia.org/wikipedia/commons/3/3c/Amur_Tiger_Panthera_tigris_altaica_Cub_Walking_1500px.jpg); background-size: cover; z-index: 1000000"></div>');

    //Hide current page with imitation of splash screen.
    jQuery("body").append(hideElement);
    };

    document.addEventListener("pause", onPause, false);



    Also, i see you use background for current page - i guess it not good way. And i did not suggest it before.. In my solution - you should show fullscreen div with certain image. This div fully overlaps other page elements on the screen. Thus it looks like splash screen.

    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • This reply was removed on 2014-11-11.
    see the change log
  • Hi Yurii,

    Thanks for the suggestion. The challenge however is that with your suggested code the splash image would appear and stay forever. Following are the changes I thus made to your code above and added onResume function as below:


    var onPause = function() {

    jQuery(".hideElement").remove();

    var hideElement = jQuery('<div class="hideElement" style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: #fff; background-image: url(http://upload.wikimedia.org/wikipedia/commons/3/3c/Amur_Tiger_Panthera_tigris_altaica_Cub_Walking_1500px.jpg); background-size: cover; z-index: 1000000"></div>');

    jQuery("body").append(hideElement);

    if (tokenExpired())
    Apperyio.navigateTo('startScreen', {});

    };
    document.addEventListener("pause", onPause, false);

    var onResume = function() {
    setTimeout(function(){jQuery(".hideElement").remove();}, 1500);
    };

    document.addEventListener("resume", onResume, false);


    However there are two issues with this approach:

    1) I want the custom image to appear in splash image. The following change to above code just results in blank white page as splash image.

    var urlAddr = Apperyio.getImagePath('splash_image.png');

    var hideElement = jQuery('<div class="hideElement" style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: #fff; background-image: url(urlAddr); background-size: cover; z-index: 1000000"></div>');

    How can I add custom image?

    2) Secondly, I need that when the app is re-opened, the splash image appear immediately without showing of content which was on display before the app was closed. Currently (as tested on iOS device) the content on display prior to app being closed shows up on reopening of app, momentarily before the splash image shows up.

    How could we achieve the above goal?

    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Cody,

    1. You need to concatinate strings..

    For example:



    var urlAddr = Apperyio.getImagePath('splash_image.png');

    var hideElement = jQuery('');



    2. Previous given code should to it.. So you add on pause event some overlay with image. And this image should be shown when you resume this app. May be "pause" event not triggered with event handler? Please check it.

    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Yurii,

    1) I believe there is some missing code in your response? I've tried the concatenation as below but no splash image appears with this approach.


    var urlAddr = Apperyio.getImagePath('splash_image.png');

    var hideElement = jQuery('<div class="hideElement" style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: #fff; background-image:' + url(urlAddr) + '; background-size: cover; z-index: 1000000"></div>');


    When I manually set the image as below and as in your earlier note the image appears fine:

    var hideElement = jQuery('<div class="hideElement" style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: #fff; background-image: url(http://upload.wikimedia.org/wikipedia/commons/3/3c/Amur_Tiger_Panthera_tigris_altaica_Cub_Walking_1500px.jpg); background-size: cover; z-index: 1000000"></div>');


    2) Nope it doesn't do it. Have you tested on iOS device? By overlay do you mean splash image as above? Pause event is triggered as otherwise the spash image would not appear. Again the challenge is that the content on display prior to app being closed shows up on reopening of app, momentarily before the splash image shows up (it does show up).

    Look forward to your helping in resolving this.
    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi Cody,

    1. Yes, GS ate some code.. Here is correct one:



    var urlAddr = Apperyio.getImagePath('splash_image.png');

    var hideElement = jQuery('<div class="hideElement" style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; background-color: #fff; background-image: url(" + urlAddr + "); background-size: cover; z-index: 1000000"></div>');



    2. On pause event splash should be shown by this code. Please give us your app public link and describe steps to reproduce this problem we will test.

    Regard.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned