Improve mobile browser compatibility

src/ui/Home.js

@@ -25,7 +25,7 @@ export default class Home extends React.Component {
 						</p>
 					</div>
 					<div className="six columns">
-						<p><img className="u-max-full-width" src="http://i.imgur.com/TNb5kRQ.gif" /></p>
+						<p><img className="u-max-full-width" src="https://i.imgur.com/TNb5kRQ.gif" /></p>
 					</div>
 				</div>
 				<div className="row">

src/ui/NotifPage.js

@@ -37,19 +37,32 @@ export default class NotifPage extends React.Component {
 		});
 
 		socket.on('message', (data) => {
-			new Notification(
+			console.log("Notification: " + data);
-				data || 'Received a notification!',
+			checkperm(Notification.permission);
-				{
+			sendNotification(data);
-					body: 'Notification from Notica',
-					badge: 'assets/img/icon.png',
-					icon: 'assets/img/icon.png',
-					image: 'assets/img/icon.png',
-					vibrate: 200
-				}
-			);
 		});
 	}
 
+	sendNotification(data) {
+		let title = data || 'Received a notification!';
+
+		let options = {
+			body: 'Notification from Notica',
+			icon: 'assets/img/icon.png',
+			iconUrl: 'assets/img/icon.png',
+			vibrate: [200, 100, 200]
+		};
+
+		try {
+			navigator.serviceWorker.register('/assets/js/sw.js').then((reg) => {
+				reg.showNotification(title, options);
+			});
+		} catch (e) { // If we are on a browser without serviceWorker
+			new Notification(title, options);
+		}
+
+	}
+
 	checksupport() {
 		let supported = ('Notification' in window);
 		this.setState({supported: supported});
@@ -65,6 +78,9 @@ export default class NotifPage extends React.Component {
 		if (permission === 'granted') {
 			this.setState({haveperm: true});
 		}
+		else {
+			this.setState({haveperm: false});
+		}
 	}
 
 	render() {