Finish loading cache manifest before showing Web app

Question

When you first normally load a Web app with cache manifest, the HTML page shows up, then cache manifest starts downloading the specified files in the background. However, I prefer that cache manifest finishes downloading every listed file before the initial page appears on screen. This is so at the instant the user sees the initial page, he or she can disconnect from the Internet and use all the features of the Web app as intended.

Is there a way I can do this?

Answer 1

Source: https://developer.tizen.org/dev-guide/2.2.1/org.tizen.web.appprogramming/html/tutorials/w3c_tutorial/storage_tutorial/app_cache_managing.htm

I would look at the App cache events, particularly the updateready event.

document.body.style.display = 'none'; //this should probably be in your stylesheet.    

applicationCache.addEventListener('cached', function() {
    /* All resources for update are downloaded */
    // show your webpage here
    document.body.style.display = 'block';
});

You might need to also look at some of the other events that are listed in the linked reference. I don't know if this event will fire if they are no updates.

But there are several events for if there is no manifest file, or if there is no updates available, etc. Seems pretty straight forward though. If you have any quesetions, just comment.

EDIT

You will also need to listen for the noupdate event to handle the case of the manifest not being updated. (Thank you @Applecot)

applicationCache.addEventListener('noupdate', function() {
    //no updates, display the page
    document.body.style.display = 'block';
});