doing feature detection before serving app

using Modernizr

static/src/FeatureTest.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright 2017 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'main.css'
+import domReady from 'domready'
+import 'splash.css'
+import Modernizr from 'exports?Modernizr!Modernizr'
+
+require.ensure(['Main', 'notsupported.css'], (require) => {
+
+	domReady(() => {
+
+		if (Modernizr.webaudio && Modernizr.webgl){
+
+			const main = require('Main')
+
+		} else {
+
+			require('notsupported.css')
+
+			const text = document.createElement('div')
+			text.id = 'notsupported'
+			text.innerHTML = 'Oops, sorry for the tech trouble. For the best experience, view in <a href="https://www.google.com/chrome" target="_blank">Chrome browser</a>.'
+			document.body.appendChild(text)
+
+		}
+
+	})
+
+})
+
+

static/style/notsupported.css

@@ -0,0 +1,22 @@
+@import 'common.scss';
+
+$width: 220px;
+$height: 100px;
+
+#notsupported {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	text-align: center;
+	color: white;
+	margin-left: -$width/2;
+	width: $width;
+	height: $height;
+	margin-top: -$height/2;
+	font-family: $font-family;
+	font-size: 20px;
+
+	a {
+		color: white;
+	}
+}

static/third_party/Modernizr.js

@@ -0,0 +1,3 @@
+/*! modernizr 3.3.1 (Custom Build) | MIT *
+ * https://modernizr.com/download/?-webaudio-webgl !*/
+!function(e,n,t){function o(e,n){return typeof e===n}function s(){var e,n,t,s,i,r,l;for(var f in a)if(a.hasOwnProperty(f)){if(e=[],n=a[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(s=o(n.fn,"function")?n.fn():n.fn,i=0;i<e.length;i++)r=e[i],l=r.split("."),1===l.length?Modernizr[l[0]]=s:(!Modernizr[l[0]]||Modernizr[l[0]]instanceof Boolean||(Modernizr[l[0]]=new Boolean(Modernizr[l[0]])),Modernizr[l[0]][l[1]]=s),u.push((s?"":"no-")+l.join("-"))}}function i(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):f?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}var a=[],r={_version:"3.3.1",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){a.push({name:e,fn:n,options:t})},addAsyncTest:function(e){a.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=r,Modernizr=new Modernizr,Modernizr.addTest("webaudio",function(){var n="webkitAudioContext"in e,t="AudioContext"in e;return Modernizr._config.usePrefixes?n||t:t});var u=[],l=n.documentElement,f="svg"===l.nodeName.toLowerCase();Modernizr.addTest("webgl",function(){var n=i("canvas"),t="probablySupportsContext"in n?"probablySupportsContext":"supportsContext";return t in n?n[t]("webgl")||n[t]("experimental-webgl"):"WebGLRenderingContext"in e}),s(),delete r.addTest,delete r.addAsyncTest;for(var p=0;p<Modernizr._q.length;p++)Modernizr._q[p]();e.Modernizr=Modernizr}(window,document);