Using offline application cache in iOS and in full screen app mode it opens other pages in Safari instead of the application

Question

I'm building an offline tablet/phone app in HTML5 to collect data remotely in the field where there are no cell towers. It uses the offline application cache manifest to save the pages into the browser. I'm attempting to get it to work in Safari and Android.

Currently there are a multiple separate web pages for my site (index.html, load.html and sync.html). I want to be able to load each page in and run different javascript when each page has loaded.

Originally I had a main index page (which acted as the bootstrap for the application) and was using jQuery's .load() function to load the different page files (only snippets of html) into the main display div when a menu button was clicked. This worked pretty well with the iPhone. However when trying it on Android and the site was already cached and the device was in flight mode so it can't connect to the server, the page would fail silently to load in the HTML from the external page for some reason so I'd get a blank screen. I narrowed it down to jQuery's .load() function failing in Android when loading pages from the cache.

So then I tried keeping the individual pages separate and having all the HTML, JavaScript, CSS includes and header code mirrored on each page (not very efficient). So each page could run standalone by itself. This worked ok in Android and iPhone in the web browser when following a simple href link to load the other pages. However when I go into app mode on the iPhone (i.e. you save the webpage to the home screen so it appears as an actual app icon then you run it from there it appears almost fullscreen apart from the status bar) then click on a menu icon to load sync.html for example it opens the page in Safari instead of staying within the fullscreen 'app' mode.

Is there a way to open separate web pages that should be cached within the fullscreen 'app' mode on iPhone? I don't want the other pages loading up Safari as there's less screen size.

The only other method I can think of is having all the html snippets hidden in divs on the main index page, then showing and hiding the divs depending on which menu button is clicked. This may look cleaner and be faster but just wondering if there's a better way to do it?

Answer 1

For now the cleanest solution I could come up with was this:

HTML:

<section id="pageContent">
   <div id="homePage" class="hidden">
       <?php include_once 'home.html'; ?>
   </div>

   <div id="loadPage" class="hidden">
       <?php include_once 'load.html'; ?>
   </div>

   <div id="syncPage" class="hidden">
       <?php include_once 'sync.html'; ?>
   </div>
</section>

CSS:

.hidden {
    display: none;
}

This lets you keep your content pages in separate files. And because the html in those files is all included into the index page on page load all the html gets cached as well. Simply a matter of hiding and showing the various pages now.

Then I used some simple jQuery to show and hide each page and set up some simple JavaScript functions to show each individual page. E.g.

function showSyncPage()
{
    $('#pageContent').children().hide();   // Hide all the other divs (other pages)
    $('#syncPage').show();    // Show the sync page
}

Then also add those function calls into onclick handlers on your buttons/links to open each page. E.g.

<a class="button" onclick="showSyncPage()">Sync</a>

Now you've got a working navigation system that loads all the pages in iPhone/Android and even in iPhone 'app' mode without loading Safari.