doing feature detection before serving app

using Modernizr
This commit is contained in:
Yotam Mann 2017-01-13 16:38:14 -05:00
parent 6da3c5d1c5
commit 86e5a77f15
3 changed files with 70 additions and 0 deletions

45
static/src/FeatureTest.js Normal file
View File

@ -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)
}
})
})

View File

@ -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;
}
}

3
static/third_party/Modernizr.js vendored Normal file
View File

@ -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);