From b84a94ef55118ced764e09a950405b8019372a3c Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Tue, 27 Dec 2016 04:45:03 +0000
Subject: [PATCH] Improve mobile browser compatibility

---
 assets/js/sw.js     |  0
 src/ui/Home.js      |  2 +-
 src/ui/NotifPage.js | 36 ++++++++++++++++++++++++++----------
 3 files changed, 27 insertions(+), 11 deletions(-)
 create mode 100644 assets/js/sw.js

diff --git a/assets/js/sw.js b/assets/js/sw.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/ui/Home.js b/src/ui/Home.js
index 76623bb..70f9ed6 100644
--- a/src/ui/Home.js
+++ b/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">
diff --git a/src/ui/NotifPage.js b/src/ui/NotifPage.js
index 64d80d6..a39163a 100644
--- a/src/ui/NotifPage.js
+++ b/src/ui/NotifPage.js
@@ -37,19 +37,32 @@ export default class NotifPage extends React.Component {
 		});
 
 		socket.on('message', (data) => {
-			new Notification(
-				data || 'Received a notification!',
-				{
-					body: 'Notification from Notica',
-					badge: 'assets/img/icon.png',
-					icon: 'assets/img/icon.png',
-					image: 'assets/img/icon.png',
-					vibrate: 200
-				}
-			);
+			console.log("Notification: " + data);
+			checkperm(Notification.permission);
+			sendNotification(data);
 		});
 	}
 
+	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() {