I'm trying to create a simple Cordova mobile app using Ratchet and am unable to get push.js to load any pages. The only thing that my research pulled up is that the push event only works on mobile devices but I'm not using it in the browser. I've tried emulating through XCode and with cordova build ios cordova emulate ios from the CLI but the links aren't functioning. They're blinking to indicate that I clicked on them but no action is taking place. Here's my two pages that I want to transition between.
index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- Set the viewport settings to prevent scaling -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>MyProject</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="css/ratchet.css">
<meta name="msapplication-tap-highlight" content="no" />
<script src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/ratchet.js"></script>
<script type="text/javascript">
app.initialize();
$(function(){
window.localStorage.setItem('phone-number', '1-330-697-3044');
});
</script>
<style>
/*Stops the text from being in all caps*/
body * {
text-transform: none;
}
</style>
</head>
<body>
<!-- Bar items -->
<header class="bar bar-nav">
<h1 class="title">RealtyShout</h1>
</header>
<nav class="bar bar-tab">
<a href="#" class="tab-item active">
<span class="icon icon-home"></span>
<span class="tab-label">Home</span>
</a>
<a href="subscriptions.html" data-transition="slide-in" class="tab-item">
<span class="icon icon-star"></span>
<span class="tab-label">Subscriptions</span>
</a>
<a href="#" class="tab-item">
<span class="icon icon-person"></span>
<span class="tab-label">Contact Info</span>
</a>
<a href="#" class="tab-item">
<span class="icon icon-download"></span>
<span class="tab-label">Messages</span>
</a>
</nav>
<!-- Page contents -->
<div class="content">
<ul class="table-view">
<li class="table-view-cell"><a href="subscriptions.html" data-transition="fade" class="navigate-right">Subscriptions</a></li>
<li class="table-view-cell"><a href="#" class="navigate-right">Contact Info</a></li>
<li class="table-view-cell"><a href="#" class="navigate-right">Messages</a></li>
</ul>
</div>
</body>
</html>
subscriptions.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- Set the viewport settings to prevent scaling -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>MyProject: Subscriptions</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" href="css/ratchet.css">
<meta name="msapplication-tap-highlight" content="no" />
<script src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/ratchet.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<style>
/*Stops the text from being in all caps*/
body * {
text-transform: none;
}
</style>
</head>
<body>
<header>
<!-- Bar items -->
<header class="bar bar-nav">
<h1 class="title">MyProject</h1>
</header>
<nav class="bar bar-tab">
<a href="#" class="tab-item">
<span class="icon icon-home"></span>
<span class="tab-label">Home</span>
</a>
<a href="#" class="tab-item active">
<span class="icon icon-star"></span>
<span class="tab-label">Subscriptions</span>
</a>
<a href="#" class="tab-item">
<span class="icon icon-person"></span>
<span class="tab-label">Contact Info</span>
</a>
<a href="#" class="tab-item">
<span class="icon icon-download"></span>
<span class="tab-label">Messages</span>
</a>
</nav>
<!-- Page contents -->
<div class="content">
<ul class="table-view">
<li class="table-view-cell">Hello World</li>
</ul>
</div>
</header>
</body>
</html>
I'm guessing index.html and subscriptions.html are served up via the filesystem? Meaning it complied in your phonegap/cordova app? It could be that url are loaded using the file:// protocol inside compiled apps which isn't supported by push.js currently.
I was able to get it working by applying a modified version of the push.js code from @artemave
Just replace the "// Core PUSH functionality" section of ratchet.js with this version:
https://github.com/artemave/ratchet/commit/5ccfdd765ecd15666b83b0b9abc15e4c120b7713
Resolved the issues inside ios simulator for me.