Add option to install locally with firefox

clientapp/models/state.js

@@ -24,6 +24,16 @@ module.exports = HumanModel.define({
             }, true);
         }
 
+        if (navigator.mozApps) {
+            this.installable = true;
+            var req = navigator.mozApps.checkInstalled(window.location.origin + '/manifest.webapp');
+            req.onsuccess = function (e) {
+                if (req.result) {
+                    self.installedFirefox = true;
+                }
+            };
+        }
+
         this.markActive();
     },
     session: {
@@ -35,7 +45,9 @@ module.exports = HumanModel.define({
         idleSince: 'date',
         allowAlerts: ['bool', true, false],
         badge: ['string', true, ''],
-        pageTitle: ['string', true, '']
+        pageTitle: ['string', true, ''],
+        installable: ['bool', true, false],
+        installedFirefox: ['bool', true, false]
     },
     derived: {
         title: {

clientapp/pages/main.js

@@ -19,6 +19,7 @@ module.exports = BasePage.extend({
     },
     events: {
         'click .enableAlerts': 'enableAlerts',
+        'click .installFirefox': 'installFirefox',
         'dragover': 'handleAvatarChangeDragOver',
         'drop': 'handleAvatarChange',
         'change #uploader': 'handleAvatarChange',
@@ -39,6 +40,9 @@ module.exports = BasePage.extend({
             }
         });
     },
+    installFirefox: function () {
+        navigator.mozApps.install(window.location.origin + '/manifest.webapp');
+    },
     handleAvatarChangeDragOver: function (e) {
         e.preventDefault();
         return false;

clientapp/template.html

@@ -11,6 +11,7 @@
     </header>
     <section class="box connect">
       <h2>Connecting...</h2> 
+      <a href="/logout">Cancel</a>
     </section>
   </body>
 </html>

clientapp/templates.js

@@ -178,7 +178,7 @@ exports.pages.groupchat = function anonymous(locals) {
 exports.pages.main = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page main"><div><h3>Current status</h3><div contenteditable="true" class="status"></div></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Alerts</h3><button class="enableAlerts">Enable alerts</button></div></section>');
+        buf.push('<section class="page main"><div><h3>Current status</h3><div contenteditable="true" class="status"></div></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Desktop Integration</h3><button class="enableAlerts">Enable alerts</button><button class="installFirefox">Install app</button></div></section>');
     }
     return buf.join("");
 };

clientapp/templates/pages/main.jade

@@ -13,5 +13,6 @@ section.page.main
         input#uploader(type="file")
 
   div
-    h3 Alerts
+    h3 Desktop Integration
     button.enableAlerts Enable alerts
+    button.installFirefox Install app

public/manifest.webapp

@@ -0,0 +1,7 @@
+{
+    "name": "Otalk",
+    "description": "Modern XMPP client",
+    "icons": {
+        "128": "/images/icon_128x128.png"
+    }
+}

server.js

@@ -54,6 +54,11 @@ app.get('/oauth/callback', function (req, res) {
     res.render('oauthLogin');
 });
 
+app.get('/manifest.webapp', function (req, res) {
+    res.set('Content-Type', 'application/x-web-app-manifest+json');
+    res.sent(fs.readFileSync('public/manifest.webapp'));
+});
+
 // serves app on every other url
 app.get('*', clientApp.html());