1. #1
    Ext JS Premium Member joelennon's Avatar
    Join Date
    Mar 2010
    Location
    Cork, Ireland
    Posts
    17
    Vote Rating
    1
    joelennon is on a distinguished road

      0  

    Default iOS Fullscreen web applications

    iOS Fullscreen web applications


    This is not specifically a Sencha Touch question, but someone here may have had the same issues I have, and may be able to offer some workarounds/solutions.

    Basically I have written a mobile web application using Sencha Touch, and in Mobile Safari it works perfectly. However, the bottom toolbar in Mobile Safari is severely impacting the usability of the application (in many places I have a top toolbar with navigation and a bottom tab bar for sub-section navigation). The plan was for the application to primarily be used in full screen web application mode. I know, I know, I could package it up using PhoneGap and all that, but this is an enterprise application so App Store distribution really doesn't suit our distribution model.

    I have spent the past while testing this functionality in iOS, and it really does not work well at all. Examples of the issues I'm having:
    • Tapping on phone numbers/email addresses/SMS links completely moves focus out of the application (this doesn't happen if used in normal Mobile Safari mode) so you need to use mutli-tasking to get back to the application
    • Swapping back to the application using multi-tasking features in iOS results in the application completely losing state (reloads page, loses cookies, loses hash-location parameters)
    • I haven't verified this, but application cache doesn't appear to be working either? The application runs as slow as it does the first time it's loaded in the regular Mobile Safari browser

    The issues above are complete showstoppers for us. We could probably get over the first one, but the second and third issues completely cripple the app.

    Anyone have the same problem? And if so, have you come up with any solution, other than going down the native/PhoneGap route?

    Thanks in advance.
    Joe Lennon
    Head of Technology, Core International
    Company | Blog | Twitter | Facebook | LinkedIn

  2. #2
    Ext JS Premium Member joelennon's Avatar
    Join Date
    Mar 2010
    Location
    Cork, Ireland
    Posts
    17
    Vote Rating
    1
    joelennon is on a distinguished road

      0  

    Default


    Just experimented a bit further. Our authentication system (taken from our regular web application) sets cookies that expire when the browser session closes. I can circumvent the cookie issue by storing these cookies so that they don't expire after the browser session is exited. This might not be a runner for us from a security perspective, but it does give an option for allowing you to keep a user logged in (they will still be brought back to the home page though).
    Joe Lennon
    Head of Technology, Core International
    Company | Blog | Twitter | Facebook | LinkedIn

  3. #3
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    You will probably have to go the PhoneGap route. I also built a line of business app that we deployed using standard web and had exactly the same problems.

    The problem is caused by iOS starting a new instance of the standalone browser everytime you click on a homescreen icon that points to a webapp.

    You could try saving state (maybe with the new mvc history support features in ST) in local storage and manipulating the UI back to the previously departed state. We looked into it but its quite a bit of extra code that could potentially slow down your app. I agree that this problem really makes webapps on iOS quite annoying to use.

    I have tried phone gap and it works really well. But waiting 2 weeks for a reply from Apple (as I am now) might not sit well with customers if you need to patch a bug fast. Apple apparently has a faster emergency update program that you can use every now and then for important bug fixes. I have not tried it but friends say that it works ok.

    Good luck.
    Simon Flack
    CEO and UX Designer
    WhiteFox AS, Norway

    Web: www.whitefox.no

    Facebook: www.facebook.com/WhiteFoxAS

    Twitter: @WhiteFoxAS

  4. #4
    Ext JS Premium Member joelennon's Avatar
    Join Date
    Mar 2010
    Location
    Cork, Ireland
    Posts
    17
    Vote Rating
    1
    joelennon is on a distinguished road

      0  

    Default


    Thanks Simon. We actually already use the MVC history management features in ST (which work a charm in regular Mobile Safari), so I might look into using local storage to save state and interact with the history URLs from that.
    Joe Lennon
    Head of Technology, Core International
    Company | Blog | Twitter | Facebook | LinkedIn

  5. #5
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    Cool. Tell us how it goes. This is definitely a problem for most of us making business app that need to function along side other phone apps and functions.
    Simon Flack
    CEO and UX Designer
    WhiteFox AS, Norway

    Web: www.whitefox.no

    Facebook: www.facebook.com/WhiteFoxAS

    Twitter: @WhiteFoxAS

  6. #6
    Ext JS Premium Member joelennon's Avatar
    Join Date
    Mar 2010
    Location
    Cork, Ireland
    Posts
    17
    Vote Rating
    1
    joelennon is on a distinguished road

      0  

    Default


    Great suggestion about using localStorage Simon, I've just completed a proof-of-concept. It's a little hairy and I have yet to test the performance implications but the basic working principles are:

    1. You must use Sencha MVC controllers for the following to work. I'm sure there are ways of getting it to work without them, but I'll leave that for someone else to figure out.

    2. In each controller action, I store the controller, action, historyUrl and if relevant, id values in local storage using localStorage.setItem, for example:

    Code:
    if("localStorage" in window) {
        localStorage.setItem("controller", "MainMenu");
        localStorage.setItem("action", "index");
        localStorage.setItem("historyUrl", "MainMenu/index");
    }
    3. At the bottom of my application HTML file (just before the closing body) I detect if the app is running in fullscreen mode, if local storage is available and if there is relevant data stored in local storage. If there is, I use Ext.dispatch to call the relevant controller action. This is pretty crude, but it seems to be working. You might say it defeats the purpose of using the MVC history management, but since that doesn't work in fullscreen mode you can't use it anyway. This solution ensures that it uses MVC history management when run in browser mode, and falls back to HTML5 local storage when run in fullscreen mode. Below is the code I'm using (can probably be refined a bit, this is not production code):

    Code:
    if("standalone" in window.navigator && "localStorage" in window && window.navigator.standalone) {
        var controller = localStorage.getItem("controller"),
            action = localStorage.getItem("action"),
            historyUrl = localStorage.getItem("historyUrl"),
            actionId = localStorage.getItem("actionId");
        if(controller != null && action != null && historyUrl != null && controller.length > 0 && action.length > 0 && historyUrl.length > 0) {
            if(actionId != null && actionId.length > 0) {
                Ext.dispatch({
                    controller: controller,
                    action: action,
                    historyUrl: historyUrl,
                    id: actionId,
                    animation: {}
                });                    
            } else {
                Ext.dispatch({
                    controller: controller,
                    action: action,
                    historyUrl: historyUrl,
                    animation: {}
                });                    
            }
        }
    }
    I will be testing this and looking to refine it further soon, I will post any progress I make (if I do in fact make any!).

    Thanks again for the suggestion Simon. If anyone has any improvements to suggest on the solution above, please do share!
    Joe Lennon
    Head of Technology, Core International
    Company | Blog | Twitter | Facebook | LinkedIn

  7. #7
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    I'll be following this thread ;-) If I get time I will test it out.
    Simon Flack
    CEO and UX Designer
    WhiteFox AS, Norway

    Web: www.whitefox.no

    Facebook: www.facebook.com/WhiteFoxAS

    Twitter: @WhiteFoxAS

Similar Threads

  1. fullscreen: why?
    By DaveC426913 in forum Sencha Touch 1.x: Discussion
    Replies: 12
    Last Post: 24 Nov 2010, 8:04 AM
  2. setting a panel to fullscreen but not fullscreen
    By DaveC426913 in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 8 Sep 2010, 5:20 AM
  3. Fullscreen?
    By SimpleAnecdote in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 9 Aug 2010, 3:39 AM
  4. Calling ext GWT applications from legacy applications
    By mathaj77 in forum Ext GWT: Discussion
    Replies: 3
    Last Post: 14 Aug 2009, 4:15 AM
  5. Iframe goes fullscreen
    By adao in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 10 Sep 2008, 6:26 AM

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar