Browse files

Added offline support

  • Loading branch information...
1 parent 8319fc3 commit eca54467e236339ca43db242aedc5d8801820392 @robnyman committed Jan 15, 2013
View
17 css/base.css
@@ -37,6 +37,7 @@ header #install button {
background: linear-gradient(top,#6a7b86 0%,#424f5a 100%);
padding: 0.3rem;
border: none;
+ border-radius: 5px;
margin: 1.4rem 1rem 0;
}
@@ -63,6 +64,21 @@ header.show-install h1 {
text-overflow: ellipsis;
}
+#online-status {
+ position: absolute;
+ left: 10px;
+ top: 2rem;
+ width: 10px;
+ height: 10px;
+ color: #fff;
+ background: #008000;
+ border-radius: 5px;
+}
+
+#online-status.offline {
+ background: #ff0000;
+}
+
#main {
padding: 2rem 1rem 6rem 1rem;
}
@@ -83,6 +99,7 @@ header.show-install h1 {
padding: 1rem;
color: #fff;
font-weight: bold;
+ border-radius: 5px;
background: rgb(76,76,76);
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(25%,rgba(102,102,102,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1)));
View
35 fallback.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width">
+ <link rel="stylesheet" type="text/css" href="css/base.css"/>
+ <title>Offline - Firefox OS Boilerplate App</title>
+</head>
+
+<body>
+
+ <header>
+ <h1>Firefox OS Boilerplate</h1>
+ </header>
+
+ <div id="main">
+ <p>You are currently offline.</p>
+ </div>
+
+ <footer>
+ <ul>
+ <li><button id="save-bookmark">Save bookmark</button></li>
+ <li><button id="reload" class="reload">Reload</button></li>
+ </ul>
+ </footer>
+
+ <script type="text/javascript" src="js/base.js"></script>
+ <script type="text/javascript" src="js/webapp.js"></script>
+
+ <!--
+ Loosely based on fxosstub: https://github.com/Jaxo/fxosstub
+ -->
+
+</body>
+</html>
View
BIN images/logo128.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/logo16.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/logo32.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/logo48.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN images/logo64.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
10 index.html
@@ -1,5 +1,9 @@
<!DOCTYPE html>
<html>
+<!--
+ Exchange the line above for this to enable offline support
+ <html manifest="manifest.appcache">
+ -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
@@ -14,6 +18,9 @@
<div id="install">
<button>Install</button>
</div>
+
+ <!-- Icon that will indicate whether you are online or offline -->
+ <div id="online-status" title="Online"></div>
</header>
<div id="main">
@@ -48,9 +55,10 @@
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/webapp.js"></script>
+ <script type="text/javascript" src="js/offline.js"></script>
<!--
- Loosely based on fxosstub: https://github.com/Jaxo/fxosstub
+ Loosely based on fxosstub: https://github.com/Jaxo/fxosstub
-->
</body>
View
43 js/base.js
@@ -1,24 +1,29 @@
// Install app
-var checkIfInstalled = navigator.mozApps.getSelf();
-checkIfInstalled.onsuccess = function () {
- if (checkIfInstalled.result) {
- // Already installed
- }
- else {
- var install = document.querySelector("#install"),
- manifestURL = location.href.substring(0, location.href.lastIndexOf("/")) + "/manifest.webapp";
- install.parentNode.className = "show-install";
- install.onclick = function () {
- var installApp = navigator.mozApps.install(manifestURL);
- installApp.onsuccess = function(data) {
- install.style.display = "none";
+if (navigator.mozApps) {
+ var checkIfInstalled = navigator.mozApps.getSelf();
+ checkIfInstalled.onsuccess = function () {
+ if (checkIfInstalled.result) {
+ // Already installed
+ }
+ else {
+ var install = document.querySelector("#install"),
+ manifestURL = location.href.substring(0, location.href.lastIndexOf("/")) + "/manifest.webapp";
+ install.parentNode.className = "show-install";
+ install.onclick = function () {
+ var installApp = navigator.mozApps.install(manifestURL);
+ installApp.onsuccess = function(data) {
+ install.style.display = "none";
+ };
+ installApp.onerror = function() {
+ alert("Install failed\n\n:" + installApp.error.name);
+ };
};
- installApp.onerror = function() {
- alert("Install failed\n\n:" + installApp.error.name);
- };
- };
- }
-};
+ }
+ };
+}
+else {
+ console.log("Open Web Apps not supported");
+}
// Reload content
var reload = document.querySelector("#reload");
View
20 js/offline.js
@@ -0,0 +1,20 @@
+(function () {
+ var appCache = window.applicationCache;
+ if (appCache) {
+ appCache.onupdateready = function () {
+ if (confirm("The app has been updated. Do you want to download the latest files? \nOtherwise they will be updated at the next reload.")) {
+ location.reload(true);
+ }
+ };
+
+ var displayStatus = document.querySelector("#online-status");
+ if (displayStatus) {
+ // Using this, since navigator.onLine is very inconcistent and unreliable
+ appCache.onerror = function() {
+ displayStatus.className = "offline";
+ displayStatus.title = "Offline";
+ };
+
+ }
+ }
+})();
View
11 manifest.appcache
@@ -0,0 +1,11 @@
+CACHE MANIFEST
+# Version 0.42
+
+css/base.css
+js/offline.js
+
+NETWORK:
+*
+
+FALLBACK:
+/ fallback.html

0 comments on commit eca5446

Please sign in to comment.