Adds polyfills and tests for unsupported browsers

angular.json

@@ -32,6 +32,7 @@
               "src/assets/images",
               "src/assets/styles",
               "src/assets/jobs",
+              "src/assets/static",
               "src/assets/serverEndpoint.json",
               "src/assets/imageDerivates.json",
               "src/assets/themeData.json"
@@ -101,6 +102,7 @@
               "src/assets/images",
               "src/assets/styles",
               "src/assets/jobs",
+              "src/assets/static",
               "src/assets/serverEndpoint.json",
               "src/assets/imageDerivates.json",
               "src/assets/themeData.json"

arsnova-click-v2-frontend.iml

@@ -3,6 +3,7 @@
   <component name="NewModuleRootManager" inherit-compiler-output="true">
     <exclude-output />
     <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$/src/assets" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/dist" />
       <excludeFolder url="file://$MODULE_DIR$/tmp" />
     </content>

modernizr-config.json

+{
+  "classPrefix": "",
+  "options": [
+    "addTest",
+    "atRule",
+    "domPrefixes",
+    "hasEvent",
+    "html5shiv",
+    "html5printshiv",
+    "load",
+    "mq",
+    "prefixed",
+    "prefixes",
+    "prefixedCSS",
+    "setClasses",
+    "testAllProps",
+    "testProp",
+    "testStyles"
+  ],
+  "feature-detects": [
+    "a/download",
+    "ambientlight",
+    "applicationcache",
+    "audio",
+    "audio/loop",
+    "audio/preload",
+    "audio/webaudio",
+    "battery",
+    "battery/lowbattery",
+    "blob",
+    "canvas",
+    "canvas/blending",
+    "canvas/todataurl",
+    "canvas/winding",
+    "canvastext",
+    "contenteditable",
+    "contextmenu",
+    "cookies",
+    "cors",
+    "custom-elements",
+    "crypto",
+    "crypto/getrandomvalues",
+    "css/all",
+    "css/animations",
+    "css/appearance",
+    "css/backdropfilter",
+    "css/backgroundblendmode",
+    "css/backgroundcliptext",
+    "css/backgroundposition-shorthand",
+    "css/backgroundposition-xy",
+    "css/backgroundrepeat",
+    "css/backgroundsize",
+    "css/backgroundsizecover",
+    "css/borderimage",
+    "css/borderradius",
+    "css/boxshadow",
+    "css/boxsizing",
+    "css/calc",
+    "css/checked",
+    "css/chunit",
+    "css/columns",
+    "css/cssgrid",
+    "css/cubicbezierrange",
+    "css/displayrunin",
+    "css/displaytable",
+    "css/ellipsis",
+    "css/escape",
+    "css/exunit",
+    "css/filters",
+    "css/flexbox",
+    "css/flexboxlegacy",
+    "css/flexboxtweener",
+    "css/flexwrap",
+    "css/fontface",
+    "css/generatedcontent",
+    "css/gradients",
+    "css/hairline",
+    "css/hsla",
+    "css/hyphens",
+    "css/invalid",
+    "css/lastchild",
+    "css/mask",
+    "css/mediaqueries",
+    "css/multiplebgs",
+    "css/nthchild",
+    "css/objectfit",
+    "css/opacity",
+    "css/overflow-scrolling",
+    "css/pointerevents",
+    "css/positionsticky",
+    "css/pseudoanimations",
+    "css/pseudotransitions",
+    "css/reflections",
+    "css/regions",
+    "css/remunit",
+    "css/resize",
+    "css/rgba",
+    "css/scrollbars",
+    "css/scrollsnappoints",
+    "css/shapes",
+    "css/siblinggeneral",
+    "css/subpixelfont",
+    "css/supports",
+    "css/target",
+    "css/textalignlast",
+    "css/textshadow",
+    "css/transforms",
+    "css/transformslevel2",
+    "css/transforms3d",
+    "css/transformstylepreserve3d",
+    "css/transitions",
+    "css/userselect",
+    "css/valid",
+    "css/variablefonts",
+    "css/vhunit",
+    "css/vmaxunit",
+    "css/vminunit",
+    "css/vwunit",
+    "css/will-change",
+    "css/wrapflow",
+    "custom-protocol-handler",
+    "customevent",
+    "dart",
+    "dataview-api",
+    "dom/classlist",
+    "dom/createElement-attrs",
+    "dom/dataset",
+    "dom/documentfragment",
+    "dom/hidden",
+    "dom/microdata",
+    "dom/mutationObserver",
+    "dom/passiveeventlisteners",
+    "elem/bdi",
+    "elem/datalist",
+    "elem/details",
+    "elem/output",
+    "elem/picture",
+    "elem/progress-meter",
+    "elem/ruby",
+    "elem/template",
+    "elem/time",
+    "elem/track",
+    "elem/unknown",
+    "emoji",
+    "es5/array",
+    "es5/date",
+    "es5/function",
+    "es5/object",
+    "es5/specification",
+    "es5/strictmode",
+    "es5/string",
+    "es5/syntax",
+    "es5/undefined",
+    "es6/array",
+    "es6/collections",
+    "es6/contains",
+    "es6/generators",
+    "es6/math",
+    "es6/number",
+    "es6/object",
+    "es6/promises",
+    "es6/string",
+    "event/deviceorientation-motion",
+    "event/oninput",
+    "eventlistener",
+    "exif-orientation",
+    "file/api",
+    "file/filesystem",
+    "flash",
+    "forms/capture",
+    "forms/fileinput",
+    "forms/fileinputdirectory",
+    "forms/formattribute",
+    "forms/inputnumber-l10n",
+    "forms/placeholder",
+    "forms/requestautocomplete",
+    "forms/validation",
+    "fullscreen-api",
+    "gamepad",
+    "geolocation",
+    "hashchange",
+    "hiddenscroll",
+    "history",
+    "htmlimports",
+    "ie8compat",
+    "iframe/sandbox",
+    "iframe/seamless",
+    "iframe/srcdoc",
+    "img/apng",
+    "img/crossorigin",
+    "img/jpeg2000",
+    "img/jpegxr",
+    "img/sizes",
+    "img/srcset",
+    "img/webp",
+    "img/webp-alpha",
+    "img/webp-animation",
+    "img/webp-lossless",
+    "indexeddb",
+    "indexeddbblob",
+    "input",
+    "input/formaction",
+    "input/formenctype",
+    "input/formmethod",
+    "input/formtarget",
+    "inputsearchevent",
+    "inputtypes",
+    "intl",
+    "json",
+    "ligatures",
+    "lists-reversed",
+    "mathml",
+    "mediaquery/hovermq",
+    "mediaquery/pointermq",
+    "messagechannel",
+    "network/beacon",
+    "network/connection",
+    "network/eventsource",
+    "network/fetch",
+    "network/xhr-responsetype",
+    "network/xhr-responsetype-arraybuffer",
+    "network/xhr-responsetype-blob",
+    "network/xhr-responsetype-document",
+    "network/xhr-responsetype-json",
+    "network/xhr-responsetype-text",
+    "network/xhr2",
+    "notification",
+    "pagevisibility-api",
+    "performance",
+    "pointerevents",
+    "pointerlock-api",
+    "postmessage",
+    "proximity",
+    "queryselector",
+    "quota-management-api",
+    "requestanimationframe",
+    "script/async",
+    "script/defer",
+    "serviceworker",
+    "speech/speech-recognition",
+    "speech/speech-synthesis",
+    "storage/localstorage",
+    "storage/sessionstorage",
+    "storage/websqldatabase",
+    "style/scoped",
+    "svg",
+    "svg/asimg",
+    "svg/clippaths",
+    "svg/filters",
+    "svg/foreignobject",
+    "svg/inline",
+    "svg/smil",
+    "templatestrings",
+    "textarea/maxlength",
+    "touchevents",
+    "typed-arrays",
+    "unicode",
+    "unicode-range",
+    "url/bloburls",
+    "url/data-uri",
+    "url/parser",
+    "url/urlsearchparams",
+    "userdata",
+    "vibration",
+    "video",
+    "video/autoplay",
+    "video/crossorigin",
+    "video/loop",
+    "video/preload",
+    "vml",
+    "web-intents",
+    "webanimations",
+    "webgl",
+    "webgl/extensions",
+    "webrtc/datachannel",
+    "webrtc/getusermedia",
+    "webrtc/peerconnection",
+    "websockets",
+    "websockets/binary",
+    "window/framed",
+    "workers/blobworkers",
+    "workers/dataworkers",
+    "workers/sharedworkers",
+    "workers/transferables",
+    "workers/webworkers",
+    "xdomainrequest"
+  ]
+}

src/assets/static/unsupported.html

+<html>
+<head>
+  <title>arsnova.click</title>
+</head>
+<body>
+Your browser is unsupported!
+It is missing the following features:
+<ul id="list"></ul>
+
+<p>We are only supporting the following browsers:</p>
+<ul>
+  <li>Google Chrome (Desktop): v45</li>
+  <li>Mozilla Firefox (Desktop): v44</li>
+  <li>Edge (Desktop): v17</li>
+  <li>Safari (Desktop): v11.1</li>
+  <li>Opera (Desktop): v32</li>
+  <li>Google Chrome (Mobile): v71</li>
+  <li>Mozilla Firefox (Mobile): v64</li>
+  <li>Safari (Mobile): v11.4</li>
+</ul>
+
+<script>
+  var fn = function () {
+    var listNode = document.getElementById('list');
+    while (listNode.firstChild) {
+      listNode.removeChild(listNode.firstChild);
+    }
+    var list = [{label: 'Audio', value: Modernizr.audio},
+        {label: 'BlobConstructor', value: Modernizr.blobconstructor},
+        {label: 'IndexedDB', value: Modernizr.indexeddb},
+        {label: 'ClassList', value: Modernizr.classlist},
+        {label: 'CORS', value: Modernizr.cors},
+        {label: 'CSS-Calc', value: Modernizr.csscalc},
+        {label: 'es5', value: Modernizr.es5},
+        {label: 'FileInput', value: Modernizr.fileinput},
+        {label: 'Flexbox', value: Modernizr.flexbox},
+        {label: 'Flex-wrap', value: Modernizr.flexwrap},
+        {label: 'Fullscreen', value: Modernizr.fullscreen},
+        {label: 'JSON', value: Modernizr.json},
+        {label: 'LocalStorage', value: Modernizr.localstorage},
+        {label: 'Promises', value: Modernizr.promises},
+        {label: 'ServiceWorker', value: Modernizr.serviceworker},
+        {label: 'SessionStorage', value: Modernizr.sessionstorage},
+        {label: 'SVG', value: Modernizr.svg},
+        {label: 'Video', value: Modernizr.video},
+        {label: 'WebSockets', value: Modernizr.websockets},
+        {label: 'XHR-Response JSON', value: Modernizr.xhrresponsetypejson},
+      ]
+    ;
+
+    list.forEach(function (elem) {
+      if (elem.value) {
+        return;
+      }
+
+      var node = document.createElement('li');
+      node.innerText = elem.label;
+      node.className = 'failed';
+      console.log(elem);
+      document.getElementById('list').appendChild(node);
+    });
+  };
+
+  document.addEventListener('DOMContentLoaded', fn, false);
+  window.addEventListener('load', fn, false);
+  if ('attachEvent' in document) {
+    document.attachEvent("onreadystatechange", fn);
+  }
+  if ('attachEvent' in window) {
+    window.attachEvent("onload", fn);
+  }
+</script>
+
+<script src="/assets/static/modernizr.js"></script>
+
+</body>
+</html>
\ No newline at end of file

src/index.html

@@ -79,12 +79,37 @@
   </div>
 </div>
 
-<script async
-        defer
-        src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
-
 <script type="text/javascript">
 
+  function polyfillsLoaded() {
+    [Modernizr.audio,
+      Modernizr.blobconstructor,
+      Modernizr.classlist,
+      Modernizr.cors,
+      Modernizr.csscalc,
+      Modernizr.es5,
+      Modernizr.fileinput,
+      Modernizr.flexbox,
+      Modernizr.flexwrap,
+      Modernizr.fullscreen,
+      Modernizr.json,
+      Modernizr.localstorage,
+      Modernizr.promises,
+      Modernizr.serviceworker,
+      Modernizr.sessionstorage,
+      Modernizr.svg,
+      Modernizr.video,
+      Modernizr.websockets,
+      Modernizr.xhrresponsetypejson,
+      'indexedDB' in window,
+      'serviceWorker' in navigator,
+    ].forEach(function (test) {
+      if (!test) {
+        location.href = '/assets/static/unsupported.html';
+      }
+    });
+  }
+
   var _paq = _paq || [];
   _paq.push(['enableLinkTracking']);
   (function () {
@@ -99,22 +124,34 @@
     s.parentNode.insertBefore(g, s);
   })();
 
-  navigator.serviceWorker.register('/ngsw-worker.js').then(registration => {
-    addEventListener('fetch', event => {
-      event.respondWith((async () => {
-        if (event.request.mode === "navigate" &&
-          event.request.method === "GET" &&
-          registration.waiting &&
-          (await clients.matchAll()).length < 2
-        ) {
-          registration.waiting.postMessage('skipWaiting');
-          return new Response("", {headers: {"Refresh": "0"}});
-        }
-        return await caches.match(event.request) ||
-          fetch(event.request);
-      })());
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/ngsw-worker.js').then(registration => {
+      addEventListener('fetch', event => {
+        event.respondWith((async () => {
+          if (event.request.mode === "navigate" &&
+            event.request.method === "GET" &&
+            registration.waiting &&
+            (await clients.matchAll()).length < 2
+          ) {
+            registration.waiting.postMessage('skipWaiting');
+            return new Response("", {headers: {"Refresh": "0"}});
+          }
+          return await caches.match(event.request) ||
+            fetch(event.request);
+        })());
+      });
     });
-  });
+  }
 </script>
+
+<script async
+        defer
+        src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
+
+<script src="/assets/static/modernizr.js"></script>
+
+<script crossorigin="anonymous"
+        src="https://polyfill.io/v3/polyfill.min.js?callback=polyfillsLoaded&flags=gated&features=default%2CArray.from%2CArray.isArray%2CArray.prototype.every%2CArray.prototype.entries%2CArray.prototype.filter%2CArray.prototype.find%2CArray.prototype.findIndex%2CArray.prototype.forEach%2CArray.prototype.includes%2CArray.prototype.indexOf%2CArray.prototype.keys%2CArray.prototype.map%2CArray.prototype.reduce%2CArray.prototype.some%2CAudioContext%2CBlob%2CDate.now%2CJSON%2CMap%2CNumber.parseFloat%2CNumber.parseInt%2CObject.assign%2CObject.entries%2CObject.keys%2CObject.values%2CPromise%2CSet%2CString.prototype.endsWith%2CString.prototype.includes%2CString.prototype.startsWith%2CString.prototype.trim%2CSymbol%2CSymbol.hasInstance%2CSymbol.isConcatSpreadable%2CSymbol.iterator%2CSymbol.match%2CSymbol.replace%2CSymbol.search%2CSymbol.species%2CSymbol.split%2CSymbol.toPrimitive%2CSymbol.toStringTag%2CSymbol.unscopables%2CWindow%2CXMLHttpRequest%2Cconsole%2Cconsole.log%2Cconsole.info%2Cdocument%2ClocalStorage"></script>
+
 </body>
 </html>