[Offline Apps] How to navigate to/from standard server-side screens using an offline-enabled app?

[Offline Apps] How to navigate to/from standard server-side screens using an offline-enabled app?

  
Forge Component
(25)
Published on 2015-11-19 by OutSystems Labs
25 votes
Published on 2015-11-19 by OutSystems Labs
Hi guys,

On my offline app certain screens are to be server-side designed, only (that is, the standard way with a Preparation action and so on). So I'm thinking about warning the user that he has no connection (when offline) and block the navigation to that screen. How would you accomplish this?

I'm thinking about using jQuery .ajax() call to tell me if I'm online/offline and resetting the DOM's document.location property for the navigation (if user is online)...
Here's a way to navigate from server-side screens to offline-enabled ones:


Hi Pedro,

Another way could be to add a javascript like this to your eSpace:
$(function() {
    function setOnlineStyleOnBody() {
        if(navigator.onLine) {
            $('body').addClass('.IsOnline');
            $('body').removeClass('.IsOffline');
        } else {
            $('body').addClass('.IsOffline');
            $('body').removeClass('.IsOnline');
        }
    }
    setOnlineStyleOnBody();
    $(window).bind("online offline", function(){
        setOnlineStyleOnBody();
    });
});


And something like this on the CSS:

body.IsOffline .HideWhenOffline {
    display:none;
}

body.IsOnline .HideWhenOnline {
    display:none;
}
Then you would just need add the HideWhenOnline and HideWhenOffline styles where appropriate.

Cheers,
Tiago Simões

PS: I haven't tested any of these, but if you do, and if it works, consider adding it to the offline component




Whoah! Great stuff! I didn't know about those events (online and offline), this actually opens up a whole new set of possibilities, especially when combined with Outsystems new offline capabilities.

Just tested and it works, though with minor corrections:
$(function() {
    function setOnlineStyleOnBody() {
        if(navigator.onLine) {
            $('body').addClass('IsOnline');
            $('body').removeClass('IsOffline');
        } else {
            $('body').addClass('IsOffline);
            $('body').removeClass('IsOnline');
        }
    }
    setOnlineStyleOnBody();
    $(window).bind("online offline", function(){
        setOnlineStyleOnBody();
    });
});

Thanks a lot ;-).
Cool, thanks for the corrections. Also be aware that if you are testing on a desktop computer with software network adaptor (e.g. vmware, etc...) the browser might state that it is online although there is not internet connection. To avoid this you'll need to disable these adapters:



Of course this should not be a problem in mobile devices.