From 566509087acb6cd590a06cbaece0e6fb771e8075 Mon Sep 17 00:00:00 2001 From: Yotam Mann Date: Fri, 13 Jan 2017 16:38:14 -0500 Subject: [PATCH] doing feature detection before serving app using Modernizr --- static/src/FeatureTest.js | 45 +++++++++++++++++++++++++++++++++ static/style/notsupported.css | 22 ++++++++++++++++ static/third_party/Modernizr.js | 3 +++ 3 files changed, 70 insertions(+) create mode 100644 static/src/FeatureTest.js create mode 100644 static/style/notsupported.css create mode 100644 static/third_party/Modernizr.js diff --git a/static/src/FeatureTest.js b/static/src/FeatureTest.js new file mode 100644 index 0000000..578d7d9 --- /dev/null +++ b/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 Chrome browser.' + document.body.appendChild(text) + + } + + }) + +}) + + diff --git a/static/style/notsupported.css b/static/style/notsupported.css new file mode 100644 index 0000000..8f38411 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/static/third_party/Modernizr.js b/static/third_party/Modernizr.js new file mode 100644 index 0000000..e3690a4 --- /dev/null +++ b/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