Blank white screen when launching web app from home screen on iphone and ipad

Question

Blank white screen when launching web app from home screen on iphone and ipad

I have a web app that works great on safari. After I add it to home screen on ipad / iphone, inconsistent issue occurs where the app, when launched in web clip mode, displays a blank white screen.

I tried debugging with the web console using a Mac, but didn't see any console errors or network activity. My initial guess was that it was file upload time, but the network tab was showing this activity in such a case.

There is no way to trace any pattern for this as it is incompatible, but noticed this the first time on the iphone after I left it idle for a while. Resetting the cache and launching the app again didn't help.

We saw it in ios 7.0.x as well as in 7.1.x devices. Read a few articles that say the web clip mode on ios 7 was buggy but doesn't actually have pointers to the above issue.

I am planning to turn on warnings to check if any execution succeeded.

Can anyone help with any pointers to the problem / solution?

Adding code as requested Adding code index.html:

<html>
    <head>
        <title>XYZ</title>
        <meta charset="UTF-8">

        <!--  to avoid caching especially in webclip -->
        <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
        <META HTTP-EQUIV="Expires" CONTENT="-1">
        <meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=no"  />
<!--        <meta name="apple-mobile-web-app-capable" content="yes">-->

        <!-- Bookmark Icons -->
        <link rel="apple-touch-icon" sizes="57x57" href="css/images/favicons/apple-touch-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="114x114" href="css/images/favicons/apple-touch-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="72x72" href="css/images/favicons/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="144x144" href="css/images/favicons/apple-touch-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="60x60" href="css/images/favicons/apple-touch-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="120x120" href="css/images/favicons/apple-touch-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="76x76" href="css/images/favicons/apple-touch-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="152x152" href="css/images/favicons/apple-touch-icon-152x152.png">
        <meta name="apple-mobile-web-app-title" content="Health eCircle Patient">
        <link rel="icon" type="image/png" href="css/images/favicons/favicon-196x196.png" sizes="196x196">
        <link rel="icon" type="image/png" href="css/images/favicons/favicon-160x160.png" sizes="160x160">
        <link rel="icon" type="image/png" href="css/images/favicons/favicon-96x96.png" sizes="96x96">
        <link rel="icon" type="image/png" href="css/images/favicons/favicon-16x16.png" sizes="16x16">
        <link rel="icon" type="image/png" href="css/images/favicons/favicon-32x32.png" sizes="32x32">
        <link rel="apple-touch-startup-image" href="css/images/favicons/startup.png">

        <meta name="application-name" content="Health eCircle Patient">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="mobile-web-app-capable" content="yes">
        <!-- Bookmark Icons:end -->

        <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>


<!--        <link rel="apple-touch-icon" href="img/icons/health-ecircle-app-icon-tablet-ipad.png">-->

        <!--        CSS section start-->
        <link rel="stylesheet" href="css/libs/lib-all.css" /> 
        <link rel="stylesheet" href="css/dist/knugget.min.css" /> 
        <!--        CSS  section End-->

        <!--       JS  section  start -->
        <script src="js/libs/lib-all.js" type="text/javascript" ></script>
        <script src="js/dist/knugget.min.js" type="text/javascript" ></script>
        <!--        JS section  end -->

    </head>
    <body>
    </body>
</html>

Adding application launch code:

$(document).ready(function() {

    function initialize() {
        //router = new AppRouter();
        //Backbone.history.start();
        Handlebars.partials = Handlebars.templates; //for using one template inside the other.
        HandlebarsHelper.registerCustomHelpers();
        $.klplot.init();
        $.ajaxSetup({
            timeout: 40000 //15 seconds default time out.
        });

        var masterView = new MasterView();
    }
    initialize();
});

In masterview.js:

initialize: function() {
    var contentbox = Handlebars.templates.contentbox();
    $("body").append(contentbox);
    this.$el = $(this.id);
    this.currentView = new LoginView({
     containerId:this.tagIds.contentBox,
     viewId:this.viewIds.login});
    this.backButtonStack.push("#");
    this.bindEvents();
}