I have a web app that works fine on safari. After I add it to home screen on an ipad/iphone, there is an inconsistent issue wherein the app when launched in web-clip mode, displays a blank white screen.
I tried debugging using the web console using Mac, but did not see any console errors or network activity happening. My initial guess was that it was the file loading time but the network tab would show this activity in such a case.
Could not trace any pattern for this since it is inconsistent, but noticed this first time on an iphone after I left it idle for sometime. Clearing the cache and running the app all over again did not help.
Have seen this in ios 7.0.x as well as 7.1.x devices. Read a few articles saying that the web clip mode on ios 7 was buggy but haven't really got any pointers to the above mentioned issue.
I am planning to put in alerts to check if any execution is happening.
Can someone help with any pointers to the issue/solution?
Adding code as requested Adding the index.html code:
<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 the app 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();
}
