Moving manifest/serviceworker into build script

src/index.html

@@ -15,7 +15,7 @@
 	<link rel="shortcut-icon" href="/iris/assets/favicon.ico" />
 
 	<!-- Chrome app -->
-	<link rel="manifest" href="/iris/assets/manifest.json">
+	<link rel="manifest" href="/iris/manifest.json">
 
 	<!-- Apple app -->
 	<meta name="apple-mobile-web-app-title" content="Iris" />
@@ -66,24 +66,21 @@
 	<div id="app">
 		<!-- ReactJS app gets injected here, replacing the loader -->
 		<div id="app-loading"></div>
+		Please wait while Iris loads...
 	</div>
 
 </body>
 
 <script type="text/javascript">
-/*
 	// Check for browser support of service worker
 	if ('serviceWorker' in navigator){
-		navigator.serviceWorker.register('service-worker.js')
-			.then(function(registration) {
-				// Successful registration
-				console.log('Hooray. Registration successful, scope is:', registration.scope);
-			}).catch(function(err) {
-				// Failed registration, service worker won’t be installed
-				console.log('Whoops. Service worker registration failed, error:', error);
+		navigator.serviceWorker.register('/service-worker.js')
+			.then(function(registration){
+				console.log('Service worker registered');
+			}).catch(function(error){
+				console.error('Service worker registration failed:', error);
 			});
-	}*/
-
+	}
 </script>
 
 <script type="text/javascript">

src/js/App.js

@@ -31,18 +31,21 @@ class App extends React.Component{
 		this.handleKeyUp = this.handleKeyUp.bind(this);
 		this.handleKeyDown = this.handleKeyDown.bind(this);
 		this.handleWindowResize = this.handleWindowResize.bind(this);
+		this.handleInstallPrompt = this.handleInstallPrompt.bind(this);
 	}
 
 	componentWillMount(){
 		window.addEventListener("keyup", this.handleKeyUp, false);
 		window.addEventListener("keydown", this.handleKeyDown, false);
 		window.addEventListener("resize", this.handleWindowResize, false);
+		window.addEventListener("beforeinstallprompt", this.handleInstallPrompt, false);
 	}
 
 	componentWillUnmount(){
 		window.removeEventListener("keyup", this.handleKeyUp, false);
 		window.removeEventListener("keydown", this.handleKeyDown, false);
 		window.removeEventListener("resize", this.handleWindowResize, false);
+		window.removeEventListener("beforeinstallprompt", this.handleInstallPrompt, false);
 	}
 
 	componentDidMount(){
@@ -50,10 +53,11 @@ class App extends React.Component{
 		if (this.props.allow_reporting){
 			ReactGA.initialize('UA-64701652-3');
 
+			/*
 			if (Raven !== undefined){
-				console.log('mounted')
 				Raven.config('https://ca99fb6662fe40ae8ec4c18a466e4b4b@sentry.io/219026').install();
 			}
+			*/
 		}
 		
 		// Fire up our services
@@ -149,6 +153,11 @@ class App extends React.Component{
 		}
 	}
 
+	handleInstallPrompt(e){
+		e.preventDefault();
+		this.props.uiActions.installPrompt(e);
+	}
+
 	handleWindowResize(e){
 		var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
 		var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)

src/js/services/ui/actions.js

@@ -113,28 +113,13 @@ export function set(data){
     }
 }
 
-
-/**
- * Modal
- *
- * Immersive full-screen dialog
- **/
-
-export function openModal(name, data){
-    return { 
-        type: 'OPEN_MODAL',
-        modal: {
-            name: name,
-            data: data
-        }
+export function installPrompt(event){
+    return {
+        type: 'INSTALL_PROMPT',
+        event: event
     }
 }
 
-export function closeModal(){
-    return { 
-        type: 'CLOSE_MODAL' 
-    }
-}
 
 
 /**

src/js/services/ui/reducer.js

@@ -36,6 +36,9 @@ export default function reducer(ui = {}, action){
             icons[action.key] = action.icon;
             return Object.assign({}, ui, {icons : icons});
 
+        case 'INSTALL_PROMPT':
+            return Object.assign({}, ui, {install_prompt : action.event});
+
 
         /**
          * Context menu

src/js/views/Settings.js

@@ -367,6 +367,7 @@ class Settings extends React.Component {
 			        </div>
 					
 					<div className="field">
+				        {this.props.ui.install_prompt ? <button onClick={e => this.props.ui.install_prompt.prompt()}>Install as App</button> : null}
 						{upgrade_button}
 				        <button className={"destructive"+(this.props.mopidy.restarting ? ' working' : '')} onClick={e => this.props.pusherActions.restart()}>{this.props.mopidy.restarting ? 'Restarting...' : 'Restart server'}</button>
 				        <ConfirmationButton className="destructive" content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />

src/js/views/modals/InitialSetup.js

@@ -21,7 +21,7 @@ class InitialSetup extends React.Component{
 		super(props);
 
 		this.state = {
-			username: (this.props.username ? this.props.username : 'Anonymous'),
+			username: this.props.username,
 			allow_reporting: this.props.allow_reporting,
 			host: this.props.host,
 			port: this.props.port,
@@ -155,7 +155,7 @@ class InitialSetup extends React.Component{
 const mapStateToProps = (state, ownProps) => {
 	return {
 		allow_reporting: state.ui.allow_reporting,
-		username: state.pusher.username,
+		username: (state.pusher && state.pusher.username ? state.pusher.username : 'Anonymous'),
 		host: state.mopidy.host,
 		port: state.mopidy.port,
 		ssl: state.mopidy.ssl

src/manifest.json

@@ -1,7 +1,7 @@
 {
-  "manifest_version": 2.4,
+  "manifest_version": 2.5,
   "short_name": "Iris",
-  "name": "",
+  "name": "Iris",
   "icons": [
     {
       "src": "/iris/assets/logo-app-192.png",
@@ -19,7 +19,7 @@
       "sizes": "512x512"
     }
   ],
-  "start_url": "/iris/index.html",
+  "start_url": "/iris/#/",
   "background_color": "#08d58f",
   "theme_color": "#181818",
   "display": "fullscreen",