Я тоже сделал похожее приложение: меню и статические странички сделаны статическими файлами, использовал фреймворк materialize.css.
В самом простом варианте веб-страницу приложения можно поместить в статическую с помощью фрейма:
<div class="tab active" id="index">
<iframe class="iframe" src="http://yoursite.com">
Ваш браузер не поддерживает плавающие фреймы!
</iframe>
<div id="offline" class="hidden">
<div class="container">
<p>Необходимо интернет соединение.</p>
</div>
</div>
</div>
В файл-ассет index.js в таком случае можно добавить проверку, есть ли соединение:
document.addEventListener("online", showOnline, false);
document.addEventListener("offline", showOffline, false);
function showOffline() {
$(".iframe").hide();
$("#offline").show(0);
}
function showOnline() {
$(".iframe").show().attr('src', $('.iframe').attr('src'));;
$("#offline").hide(0);
}
document.addEventListener("resume", onResume, false);
function onResume() {
location.reload();
}
Пример выдран из моего приложения, надеюсь, все будет понятно.
Инициировать обновление "на-ходу" из сервера в любом случае потребует значительное усложнение кода и все равно потребует интернет-подлючение. Если хотите чтобы сервер инициировал обновление страницы в приложении, понадобится сокеты или лонг-пуллинг. Так что способ с фреймом самый бескровный, можно сказать.