Auto update when new version is released

build/win/installer.nsh

@@ -27,5 +27,7 @@
 !macroend
 
 !macro customUnInstall
-  Delete "$SMSTARTUP\Rocket.Chat+.lnk"
+  ${IfNot} ${Silent}
+    Delete "$SMSTARTUP\Rocket.Chat+.lnk"
+  ${endif}
 !macroend

package.json

@@ -2,7 +2,7 @@
   "name": "rocketchat",
   "productName": "Rocket.Chat+",
   "description": "Rocket.Chat Native Cross-Platform Desktop Application via Electron.",
-  "version": "2.7.0-develop",
+  "version": "2.5.0",
   "author": "Rocket.Chat Support <[email protected]>",
   "copyright": "© 2016, Rocket.Chat",
   "homepage": "https://rocket.chat",
@@ -48,7 +48,15 @@
         "deb",
         "rpm"
       ]
+  },
+  "publish": [
+    {
+      "provider": "github",
+      "owner": "RocketChat",
+      "repo": "Rocket.Chat.Electron",
+      "vPrefixedTagName": false
     }
+  ]
   },
   "scripts": {
     "postinstall": "install-app-deps && electron-rebuild",
@@ -64,16 +72,17 @@
   },
   "dependencies": {
     "@paulcbetts/system-idle-time": "^1.0.4",
+    "electron-updater": "^1.11.2",
     "fs-jetpack": "^0.13.3",
     "lodash": "^4.17.4",
     "spellchecker": "^3.3.1"
   },
   "devDependencies": {
     "chai": "^3.5.0",
     "electron": "^1.6.2",
-    "electron-builder": "^16.4.2",
-    "electron-rebuild": "^1.5.7",
+    "electron-builder": "^16.6.0",
     "electron-mocha": "^3.4.0",
+    "electron-rebuild": "^1.5.7",
     "gulp": "^3.9.1",
     "gulp-batch": "^1.0.5",
     "gulp-less": "^3.3.0",

src/background.custom.js

@@ -9,6 +9,7 @@ import windowStateKeeper from './background/windowState';
 import certificate from './background/certificate';
 import Toaster from './Toaster';
 import idle from '@paulcbetts/system-idle-time';
+import { checkForUpdates } from './background/autoUpdate';
 
 process.env.GOOGLE_API_KEY = 'AIzaSyADqUh_c1Qhji3Cp1NE43YrcpuPkmhXD-c';
 
@@ -145,4 +146,6 @@ export function afterMainWindow (mainWindow) {
     }
 
     certificate.initWindow(mainWindow);
+
+    checkForUpdates();
 }

src/background/autoUpdate.js

@@ -0,0 +1,117 @@
+import { app, ipcMain, BrowserWindow, dialog } from 'electron';
+import { autoUpdater } from 'electron-updater';
+import jetpack from 'fs-jetpack';
+
+const userDataDir = jetpack.cwd(app.getPath('userData'));
+const updateStoreFile = 'update.json';
+let checkForUpdatesEvent;
+
+autoUpdater.autoDownload = false;
+
+function updateDownloaded () {
+    dialog.showMessageBox({
+        title: 'Update Ready to Install',
+        message: 'Update has been downloaded',
+        buttons: [
+            'Install Later',
+            'Install Now'
+        ],
+        defaultId: 1
+    }, (response) => {
+        if (response === 0) {
+            dialog.showMessageBox({
+                title: 'Installing Later',
+                message: 'Update will be installed when you exit the app'
+            });
+        } else {
+            autoUpdater.quitAndInstall();
+        }
+    });
+}
+
+function updateAvailable ({version}) {
+    if (checkForUpdatesEvent) {
+        checkForUpdatesEvent.sender.send('update-result', true);
+    } else {
+        try {
+            const updateFile = userDataDir.read(updateStoreFile, 'json');
+            if (updateFile && updateFile.skip === version) {
+                console.log(`Skipping version: ${version}`);
+                return;
+            }
+        } catch (err) {
+            console.log(err);
+        }
+    }
+
+    let window = new BrowserWindow({
+        width: 600,
+        height: 350,
+        show : false,
+        center: true,
+        resizable: false,
+        maximizable: false,
+        minimizable: false
+    });
+
+    window.loadURL(`file://${__dirname}/public/update.html`);
+    window.setMenuBarVisibility(false);
+
+    window.webContents.on('did-finish-load', () => {
+        window.webContents.send('new-version', version);
+        window.show();
+    });
+
+    ipcMain.once('update-response', (e, type) => {
+        switch (type) {
+            case 'skip':
+                userDataDir.write(updateStoreFile, {skip: version}, { atomic: true });
+                dialog.showMessageBox({
+                    title: 'Skip Update',
+                    message: 'We will notify you when the next update is available\n' +
+                        'If you change your mind you can check for updates from the About menu.'
+                }, () => window.close());
+                break;
+            case 'remind':
+                dialog.showMessageBox({
+                    title: 'Remind Later',
+                    message: 'We will remind you next time you start the app'
+                }, () => window.close());
+                break;
+            case 'update':
+                dialog.showMessageBox({
+                    title: 'Downloading Update',
+                    message: 'You will be notified when the update is ready to be installed'
+                }, () => window.close());
+                autoUpdater.downloadUpdate();
+                break;
+        }
+    });
+
+    window.on('closed', () => {
+        window = null;
+        ipcMain.removeAllListeners('update-response');
+    });
+}
+
+function checkForUpdates () {
+    autoUpdater.on('update-available', updateAvailable);
+
+    autoUpdater.on('download-progress', ({percent}) => {
+        console.log(`Update progress: ${percent}`);
+    });
+
+    autoUpdater.on('update-downloaded', updateDownloaded);
+
+    // Event from about window
+    ipcMain.on('check-for-updates', (e) => {
+        checkForUpdatesEvent = e;
+        autoUpdater.checkForUpdates();
+    });
+
+    autoUpdater.checkForUpdates();
+}
+
+export {
+    checkForUpdates
+};

src/public/about.html

@@ -3,6 +3,8 @@
 <head>
 	<title></title>
 	<meta charset="utf-8" />
+	<link rel="stylesheet" type="text/css" href="../stylesheets/main.css">
+
 	<style>
 		html {
 			background-color: #ececec;
@@ -26,11 +28,12 @@
 		}
 
 		.app-version {
+			margin-top: 20px;
 			font-size: 11px;
-			position: fixed;
-			bottom: 30px;
-			left: 0;
-			right: 0;
+		}
+
+		.update {
+			margin-top:10px;
 		}
 	</style>
 </head>
@@ -39,13 +42,30 @@
 		<div class="app-name">
 
 		</div>
-		<div class="app-version">
+		<div class="app-version"></div>
+		<span class="update-spin icon-spin3 animate-spin" style="display:none;"></span>
 
-		</div>
+		<button class="update">Check for Updates</button>
 		<script>
 			var remote = require('electron').remote;
 			document.querySelector('.app-name').innerHTML = remote.app.getName();
 			document.querySelector('.app-version').innerHTML = 'Version '+remote.app.getVersion();
+			document.querySelector('.update').onclick = function(e) {
+				document.querySelector('.update-spin').setAttribute('style', '');
+				document.querySelector('.update').setAttribute('disabled', 'disabled');
+				require('electron').ipcRenderer.send('check-for-updates');
+
+			}
+			require('electron').ipcRenderer.on('update-result', (e, updateAvailable) => {
+				document.querySelector('.update-spin').setAttribute('style', 'display:none');
+				document.querySelector('.update').removeAttribute('disabled');
+				if (!updateAvailable) {
+					alert('No updates are available');
+				}
+			});
+
+
+
 		</script>
 	</body>
 </html>

src/public/update.html

@@ -0,0 +1,88 @@
+<!doctype html>
+<html>
+<head>
+	<title></title>
+	<meta charset="utf-8" />
+	<style>
+		html {
+			background-color: #ececec;
+			font-family: helvetica;
+			padding: 10px;
+		}
+
+		body {
+			margin: 0px;
+		}
+
+		img {
+			height: 60px;
+			margin-bottom: 10px;
+		}
+
+		.update {
+			font-size: 15px;
+			font-weight: bold;
+
+			position: fixed;
+			right: 10px;
+			bottom: 10px;
+		}
+
+		.skip {
+			position: fixed;
+			left: 10px;
+		}
+
+		.remind {
+			position: fixed;
+			right: 150px;
+		}
+
+		.controls {
+			font-size: 12px;
+			position: fixed;
+			bottom: 17px;
+		}
+
+		.controls a {
+			text-decoration: none;
+		}
+
+		h3 {
+			text-align: center;
+		}
+
+		.old, .new {
+			font-weight: bold;
+		}
+	</style>
+</head>
+	<body>
+		<h3>New Update is Available</h3>
+		<hr />
+		<div style="text-align:center;">
+			<img src="images/icon.png"/>
+			<p>A new version of the Rocket.Chat Desktop App is available!</p>
+			<p>Current Version: <span class="old"></span> New Version: <span class="new"></span></p>
+		</div>
+		<hr />
+		<p class="controls">
+			<a class="skip response" data-type="skip" href="#">Skip This Version</a>
+			<a class="remind response" data-type="remind" href="#">Remind Me Later</a>
+			<button class="update response" data-type="update">Install Update</button>
+		</p>
+		<script>
+			const remote = require('electron').remote;
+			require('electron').ipcRenderer.on('new-version', function(e, version) {
+				document.querySelector('.old').innerHTML = remote.app.getVersion();
+				document.querySelector('.new').innerHTML = version;
+			});
+			document.querySelectorAll('.response').forEach((item) => {
+                item.onclick = function(e) {
+                    const type = e.target.getAttribute('data-type');
+    				require('electron').ipcRenderer.send('update-response', type);
+    			}
+            });
+		</script>
+	</body>
+</html>