Conditionally load webcomponents polyfill

e1990e07 · Paulus Schoutsen · 0d4f681a · e1990e07
Commit e1990e07 authored 9 years ago by Paulus Schoutsen
--- a/homeassistant/components/frontend/index.html.template
+++ b/homeassistant/components/frontend/index.html.template
 <!doctype html>
-<html>
+<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Home Assistant</title>
@@ -31,11 +31,21 @@
        margin-bottom: 123px;
      }
    </style>
+    <link rel='import' href='/static/{{ app_url }}' async>
  </head>
  <body fullbleed>
    <div id='init'><img src='/static/favicon-192x192.png' height='192'></div>
-    <script src='/static/webcomponents-lite.min.js'></script>
-    <link rel='import' href='/static/{{ app_url }}' />
+    <script>
+      var webComponentsSupported = ('registerElement' in document &&
+                                    'import' in document.createElement('link') &&
+                                    'content' in document.createElement('template'))
+      if (!webComponentsSupported) {
+        var script = document.createElement('script')
+        script.async = true
+        script.src = '/static/webcomponents-lite.min.js'
+        document.head.appendChild(script)
+      }
+    </script>
    <home-assistant auth='{{ auth }}' icons='{{ icons }}'></home-assistant>
  </body>
 </html>