firefox: add a way to install Dashkiosk receiver for Firefox OS

vincentbernat · Feb 11, 2015 · 3b26c77 · 3b26c77
1 parent 87a4f9b
commit 3b26c77
Show file tree

Hide file tree

Showing 11 changed files with 152 additions and 4 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -24,6 +24,7 @@
     "angular": false,
     "define": false,
     "io": false,
-    "require": false
+    "require": false,
+    "Apps": false
   }
 }
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -65,6 +65,10 @@ module.exports = function(grunt) {
         files: [ 'app/fonts/*.{ttf,otf,woff,eot,svg}' ],
         tasks: [ 'build:fonts' ]
       },
+      webapp: {
+        files: [ 'app/*.webapp' ],
+        tasks: [ 'build:webapp' ]
+      },
       scripts: {
         files: [ 'app/scripts/{,*/}*.js' ],
         tasks: [ 'build:scripts' ]
@@ -78,6 +82,7 @@ module.exports = function(grunt) {
           'build/styles/*.css',
           'build/images/{,*/,*/*/}*.*',
           'build/fonts/*.{ttf,otf,woff,eot,svg}',
+          'build/*.webapp',
           'build/scripts/{,*/}*.js' // Including templates
         ]
       },
@@ -340,6 +345,16 @@ module.exports = function(grunt) {
           ]
         }]
       },
+      webapp: {
+        files: [{
+          expand: true,
+          cwd: 'app',
+          dest: 'build',
+          src: [
+            '*.webapp'
+          ]
+        }]
+      },
       fonts: {
         files: [{
           expand: true,
@@ -374,6 +389,7 @@ module.exports = function(grunt) {
           dest: 'dist/public',
           src: [
             '*.html',
+            '*.webapp',
             'images/*.ico',
             'fonts/*.{ttf,otf,woff,eot,svg}'
           ]
@@ -421,6 +437,9 @@ module.exports = function(grunt) {
     case 'server':
       grunt.task.run('jshint:server');
       break;
+    case 'webapp':
+      grunt.task.run('copy:webapp');
+      break;
     case undefined:
       grunt.task.run(
         'clean:build',
@@ -431,7 +450,8 @@ module.exports = function(grunt) {
         'build:scripts',
         'build:images',
         'build:fonts',
-        'build:server'
+        'build:server',
+        'build:webapp'
       );
       break;
     default:

diff --git a/README.md b/README.md
@@ -12,7 +12,8 @@ comes as four components:
     manage those screens individually or in a group.
 
  3. An _Android app_ that will run the receiver. This is mainly a
-    fullscreen webview.
+    fullscreen webview. There is also a _Firefox app_ fulfilling the
+    same purpose.
 
  4. A _Chromecast custom receiver_ which will run the regular receiver
     if you want to display dashboards using Google Chromecast devices.

diff --git a/app/firefox.html b/app/firefox.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>Dashkiosk — Firefox OS receiver installer</title>
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+  <!-- build:css styles/firefox-final.css -->
+  <link rel="stylesheet" href="styles/firefox.css">
+  <!-- endbuild -->
+</head>
+<body>
+
+    <div class="logo"></div>
+    <p class="instructions is-firefox">
+        To install <em>Dashkiosk receiver</em> for Firefox, click
+        on the button below.
+    </p>
+    <p class="instructions is-not-firefox">
+        This page would install <em>Dashkiosk receiver</em> for
+        Firefox. Please, open it in Firefox browser.
+    </p>
+    <button class="is-firefox" id="install">Install</button>
+
+  <!-- build:js scripts/firefox-final.js -->
+  <script src="scripts/firefox.js"></script>
+  <!-- endbuild -->
+</body>
+</html>
diff --git a/app/images/favicon.png b/app/images/favicon.png
diff --git a/app/manifest.webapp b/app/manifest.webapp
@@ -0,0 +1,10 @@
+{
+  "name": "Dashkiosk",
+  "description": "Receiver for Dashkiosk",
+  "launch_path": "/receiver",
+  "fullscreen": "true",
+  "orientation": [ "landscape" ],
+  "icons": {
+    "128": "/favicon.png"
+  }
+}
diff --git a/app/scripts/firefox.js b/app/scripts/firefox.js
@@ -0,0 +1,28 @@
+(function(window, undefined) {
+  'use strict';
+
+  var Apps = window.navigator.mozApps,
+      firefox = (Apps && Apps.install);
+
+  if (firefox) {
+    document.body.className += 'is-firefox';
+  } else {
+    document.body.className += 'is-not-firefox';
+  }
+
+  window.document.addEventListener('DOMContentLoaded', function() {
+    var button = document.getElementById('install');
+    button.addEventListener('click', function() {
+      console.debug('[Dashkiosk] Trigger installation of Firefox OS receiver');
+      var request = Apps.install(window.location.origin + '/manifest.webapp');
+      request.onsuccess = function() {
+        console.debug('[Dashkiosk] Firefox OS receiver successfully installed');
+      };
+      request.onerror = function() {
+        console.debug('[Dashkiosk] Installation of Firefox OS was unsuccessful',
+                      this.error);
+      };
+    });
+  });
+
+})(window);
diff --git a/app/styles/firefox.less b/app/styles/firefox.less
@@ -0,0 +1,39 @@
+body, html {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    border: 0;
+}
+
+body {
+    background-image: url(../images/dark-wood.jpg);
+    text-align: center;
+}
+
+.logo {
+    display: inline-block;
+    width: 50%;
+    height: 50%;
+    background: url(../images/dashkiosk.svg) no-repeat center;
+    background-size: contain;
+}
+
+.instructions {
+    color: orange;
+}
+
+/* Install button */
+button {
+    padding: 0.5em 3em;
+}
+
+
+/* Elements visibility */
+body {
+    &.is-firefox .is-not-firefox,
+    &.is-not-firefox .is-firefox {
+        display: none;
+    }
+}
diff --git a/docs/firefox.rst b/docs/firefox.rst
@@ -0,0 +1,16 @@
+Firefox application
+===================
+
+A very simple Firefox application can also be used on any OS
+supporting Firefox. It is only a thin layer on top of the classic
+receiver. The only additional features are:
+
+ - fullscreen
+ - orientation locked to landscape
+
+Installation
+------------
+
+The installation is quite simple. Point Firefox to the ``/firefox``
+endpoint. You should get a page with a button to install the
+application.
diff --git a/docs/index.rst b/docs/index.rst
@@ -19,7 +19,8 @@ comes in four parts:
     to display.
 
  3. An **Android application** provides a simple fullscreen webview to
-    display the receiver.
+    display the receiver. There is also a **Firefox app** fulfilling
+    the same purpose.
 
  4. A **Chromecast custom receiver** which will run the regular receiver
     if you want to display dashboards using Google Chromecast devices.
@@ -53,6 +54,7 @@ To contribute, use `GitHub`_.
    api
    android
    chromecast
+   firefox
    cloud
    license
 

diff --git a/server.js b/server.js
@@ -31,10 +31,12 @@ function serve(file) {
 }
 app.get('/', function(req, res) { res.redirect('/receiver'); });
 app.get('/favicon.ico', serve('images/*favicon.ico'));
+app.get('/favicon.png', serve('images/*favicon.png'));
 app.get('/admin', serve('admin.html'));
 app.get('/receiver', serve('receiver.html'));
 app.get('/unassigned', serve('unassigned.html'));
 app.get('/chromecast', serve('chromecast.html'));
+app.get('/firefox', serve('firefox.html'));
 
 // API
 var api = require('./lib/api');