integrate app install library

jlongster · Jul 27, 2012 · ffdb2e3 · ffdb2e3
1 parent caeb5a7
commit ffdb2e3
Show file tree

Hide file tree

Showing 9 changed files with 243 additions and 11 deletions.
diff --git a/bin/run-templates b/bin/run-templates
@@ -21,6 +21,7 @@ var blocks = {
     footer: 'footer.html',
     js_global: 'js_global.js',
     js_init: 'js_init.js',
+    js_require_cfg: 'js_require_cfg.js',
     css: 'css.css'
 };
 

diff --git a/default-project/package.json b/default-project/package.json
@@ -4,7 +4,8 @@
   },
   "volo": {
     "dependencies": {
-      "jquery": "github:jquery/jquery/1.7.2"
+      "jquery": "github:jquery/jquery/1.7.2",
+      "install": "github:wavysandbox/install/master"
     }
   }
 }
diff --git a/default-project/volofile b/default-project/volofile
@@ -267,6 +267,7 @@ module.exports = {
         },
 
         run: function (d, v, namedArgs) {
+            var q = v.require('q');
             var dir = namedArgs.dir,
             files = v.getFilteredFileList(dir),
             digests = [],
@@ -326,6 +327,7 @@ module.exports = {
     },
 
     appcache: function (d, v, namedArgs) {
+        var q = v.require('q');
         var hasBuilt = v.exists(buildDir);
 
         v.command('build')

diff --git a/default-project/www/css/defaults.css b/default-project/www/css/defaults.css
@@ -230,7 +230,43 @@ td { vertical-align: top; }
 .clearfix:after { clear: both; }
 .clearfix { *zoom: 1; }
 
+/* Install button */
 
+.install-ios-msg, .install-error {
+    margin: 1em auto;
+    padding: 1em;
+    width: 200px;
+    display: none;
+}
+
+.install-ios-msg {
+    background-color: yellow;
+}
+
+.install-error {
+    background-color: #ff4444;
+}
+
+.install-btn {
+    background: #0088cc; /* Old browsers */
+    background: -moz-linear-gradient(top,  #0088cc 0%, #0055cc 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0088cc), color-stop(100%,#0055cc)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #0088cc 0%,#0055cc 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #0088cc 0%,#0055cc 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #0088cc 0%,#0055cc 100%); /* IE10+ */
+    background: linear-gradient(to bottom,  #0088cc 0%,#0055cc 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0088cc', endColorstr='#0055cc',GradientType=0 ); /* IE6-9 */
+
+    text-align: center;
+    font-size: 200%;
+    margin: 1em auto;
+    display: block;
+    padding: .5em;
+    color: white;
+    width: 10em;
+    max-width: 80%;
+    line-height: 1.2em;
+}
 
 /* ==|== print styles =======================================================
    Print styles.

diff --git a/default-project/www/index.html b/default-project/www/index.html
@@ -25,6 +25,19 @@
     <script src="js/lib/modernizr-2.5.3.min.js"></script>    
   </head>
   <body>
+    <!-- These messages can appear when the user tries to install the
+         app. You can customize the how it looks with CSS and how it
+         behaves (see app.js) -->
+    <div class="install-error"></div>
+    <div class="install-ios-msg">
+      To install, press the forward arrow in Safari and touch "Add to
+      Home Screen"
+    </div>
+
+    <!-- Put this install button somewhere on the page and the user
+         will be able to click it to install your app -->
+    <!-- <button class="install-btn">Install</button> -->
+
 
     <!-- Add your site or application content here -->
 

diff --git a/default-project/www/js/app.js b/default-project/www/js/app.js
@@ -2,7 +2,10 @@
 // The code below uses require.js, a module system for javscript:
 // http://requirejs.org/docs/api.html#define
 
-var global = this;
+require.config({ 
+    baseUrl: 'js/lib',
+<%- js_require_cfg %>
+});
 
 <%- js_global %>
 
@@ -13,6 +16,49 @@ define("app", function(require) {
 <%- js_init %>
 
     // START HERE: Put your js code here
+
+
+
+
+
+    // Hook up the installation button, feel free to customize how
+    // this works
+
+    var install = require('install');
+
+    function updateInstallButton() {
+        $(function() {
+            var btn = $('.install-btn');
+            if(install.state == 'uninstalled') {
+                btn.show();
+            }
+            else if(install.state == 'installed' || install.state == 'unsupported') {
+                btn.hide();
+            }
+        });
+    }
+
+    $(function() {
+        $('.install-btn').click(install);        
+    });
+
+    install.on('change', updateInstallButton);
+
+    install.on('error', function(e, err) {
+        // Feel free to customize this
+        $('.install-error').text(err.toString()).show();
+    });
+
+    install.on('showiOSInstall', function() {
+        // Feel free to customize this
+        var msg = $('.install-ios-msg');
+        msg.show();
+
+        setTimeout(function() {
+            msg.hide();
+        }, 8000);
+    });
+
 });
 
 // Include the in-app payments API, and if it fails to load handle it
@@ -21,8 +67,8 @@ define("app", function(require) {
 require(['https://marketplace-cdn.addons.mozilla.net/mozmarket.js'],
         function() {},
         function(err) {
-            global.mozmarket = global.mozmarket || {};
-            global.mozmarket.buy = function() {
+            window.mozmarket = window.mozmarket || {};
+            window.mozmarket.buy = function() {
                 alert('The in-app purchasing is currently unavailable.');
             };
         });
diff --git a/default-project/www/js/lib/install.js b/default-project/www/js/lib/install.js
@@ -0,0 +1,137 @@
+/*jslint nomen: true */
+/*global define, navigator, location, window, chrome */
+
+define(function (require) {
+    'use strict';
+
+    var $ = require('jquery'),
+        dispatcher = $({}),
+        prop;
+
+    //Create event functions based on dispatcher object
+    function createDispatchFn(id) {
+        return function () {
+            return dispatcher[id].apply(dispatcher, arguments);
+        };
+    }
+
+    /**
+     * Detects if the current app has been installed.
+     *
+     * See https://github.com/wavysandbox/install/blob/master/README.md
+     * for details on how to use.
+     *
+     */
+    function install() {
+        var fn = install[install.type + 'Install'];
+        if (fn) {
+            fn();
+        } else {
+            install.trigger('error', 'unsupported install: ' + install.type);
+        }
+    }
+
+    function triggerChange(state) {
+        install.state = state;
+        install.trigger('change', install.state);
+    }
+
+    /**
+     *  The install state. Values are:
+     *  'unknown': the code has not tried to detect any state.
+     *
+     * @type {String}
+     */
+    install.state = 'unknown';
+
+    install.check = function () {
+        var apps = navigator.mozApps,
+            request;
+
+        if (navigator.mozApps) {
+            //Mozilla web apps
+            install.type = 'mozilla';
+            request = navigator.mozApps.getSelf();
+            request.onsuccess = function () {
+                if (this.result) {
+                    triggerChange('installed');
+                } else {
+                    triggerChange('uninstalled');
+                }
+            };
+
+            request.onerror = function (err) {
+                // Just console log it, no need to bother the user.
+                install.error = err;
+                triggerChange('error');
+            };
+
+        } else if (typeof chrome !== 'undefined' &&
+                   chrome.webstore &&
+                   chrome.app) {
+            //Chrome web apps
+            install.type = 'chromeStore';
+            if (chrome.app.isInstalled) {
+                triggerChange('installed');
+            } else {
+                triggerChange('uninstalled');
+            }
+        } else if (typeof window.navigator.standalone !== 'undefined') {
+            install.type = 'ios';
+            if (window.navigator.standalone) {
+                triggerChange('installed');
+            } else {
+                triggerChange('uninstalled');
+            }
+        } else {
+            install.type = 'unsupported';
+            triggerChange('unsupported');
+        }
+    };
+
+    /* Mozilla/Firefox installation */
+    install.mozillaInstallUrl = location.href + 'manifest.webapp';
+    install.mozillaInstall = function () {
+        var installRequest = navigator.mozApps.install(install.mozillaInstallUrl);
+
+        installRequest.onsuccess = function (data) {
+            triggerChange('installed');
+        };
+
+        installRequest.onerror = function (err) {
+            install.error = err;
+            triggerChange('error');
+        };
+    };
+
+    /* Chrome installation */
+    install.chromeInstallUrl = null;
+    install.chromeInstall = function () {
+        chrome.webstore.install(install.chromeInstallUrl,
+            function () {
+                triggerChange('installed');
+            }, function (err) {
+                install.error = err;
+                triggerChange('error');
+            });
+    };
+
+    /* iOS installation */
+    //Right now, just asks that something show a UI
+    //element mentioning how to install using the Safari
+    //"Add to Home Screen" button.
+    install.iosInstall = function () {
+        install.trigger('showiOSInstall', navigator.platform.toLowerCase());
+    };
+
+    //Allow install to do events.
+    install.on = createDispatchFn('on');
+    install.off = createDispatchFn('off');
+    install.trigger = createDispatchFn('trigger');
+
+
+    //Start up the checks
+    install.check();
+
+    return install;
+});
diff --git a/templates/app-stub/js_global.js b/templates/app-stub/js_global.js
diff --git a/templates/app-stub/js_require_cfg.js b/templates/app-stub/js_require_cfg.js
@@ -0,0 +1,3 @@
+    paths: {'jquery':
+            ['//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
+             'lib/jquery']},