show a banner at the bottom when a new version is available

public/css/style.css

@@ -45,6 +45,27 @@ body {
 }
 
 
+#new_version_available {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(255,255,255,0.9);
+}
+#new_version_available .inner {
+  padding: 10px;
+  width: 300px;
+  margin: 0 auto;
+  text-align: center;
+  font-weight: bold;
+  color: #cf224f;
+}
+
+
+
+
 /**
  * Bootstrap callouts
  */

views/appcache.php

@@ -12,4 +12,4 @@ CACHE MANIFEST
 NETWORK:
 *
 
-# v11
+# v25

views/layout.php

@@ -65,5 +65,11 @@
 
 </div>
 
+<div id="new_version_available">
+  <div class="inner">
+    There is a new version available! Refresh to load the new version.
+  </div>
+</div>
+
 </body>
 </html>

views/new-post.php

@@ -209,6 +209,16 @@ $(function(){
     }
   });
 
+  function onUpdateReady() {
+    // Show the notice that says there is a new version of the app
+    $("#new_version_available").show();    
+  }
+  
+  window.applicationCache.addEventListener('updateready', onUpdateReady);
+  if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
+    onUpdateReady();
+  }  
+
 });
 
 </script>
@@ -220,4 +230,4 @@ $(function(){
 .scroll-container .break {
   word-break: break-all;
 }
-</style>
+</style>