Detect browser support fo Polymer

Question

I'm using Polymer (version 0.5, might upgrade to 1.0 at some point) on a site. Obviously many older browsers don't work well with the Polyfills.

Is there a way to test if the polyfills were successful in a specific browser? So, after the polyfill was done, is there some function, object, variable or anything that I can check to see if the polyfills worked?

I want to be able to detect failure, and then redirect to a page with a, "please upgrade" message.

The only alternative for me is to implement some kind of browser detection middleware in my backend, which I'd prefer to avoid at this point due to various internal reasons (and because it would mean specifically whitelisting/blacklisting lists of browsers, which will become tedious fast).

Thx in advance.

Answer 1

Short answer:

Quick test: Firefox 38.0.5 alerts "No", while Chrome 44.0.2403.130 m alerts "Yes"

function supportsPolymer() {
  return 'content' in document.createElement('template') && 'import' in document.createElement('link') && 'registerElement' in document && document.head.createShadowRoot;
}

if(supportsPolymer()) {
  
  //Good to go
  alert("Yes");
  
} else {
  
  //Is not supported
  alert("No");
  
}

Detailed answer:

You've to check this list on Polymer's website.

• Template
• HTML Imports
• Custom Elements
• Shadow DOM

These features have to be supported:

• http://www.html5rocks.com/en/tutorials/webcomponents/template/

function supportsTemplate() {
  return 'content' in document.createElement('template');
}

if (supportsTemplate()) {
  // Good to go!
} else {
  // Use old templating techniques or libraries.
}

---

• https://www.polymer-project.org/0.5/platform/html-imports.html

function supportsImports() {
  return 'import' in document.createElement('link');
}

if (supportsImports()) {
  // Good to go!
} else {
  // Use other libraries/require systems to load files.
}

---

• https://www.polymer-project.org/0.5/platform/custom-elements.html

function supportsCustomElements() {
  return 'registerElement' in document;
}

if (supportsCustomElements()) {
  // Good to go!
} else {
  // Use other libraries to create components.
}

---

• https://www.polymer-project.org/0.5/platform/shadow-dom.html

How to check if a browser supports shadow DOM

if(document.head.createShadowRoot) {
    // I can shadow DOM
} else {
    // I can't
}

In a function:

 function supportsShadowDom() {
   return document.head.createShadowRoot;
 }

Untested version in the style of the previous snippets:

 function supportsShadowDom() {
   return 'createShadowRoot' in document;
 }

---

Okay, after you've implemented every function you can do something like this:

 if (supportsCustomElements() && supportsTemplate() && supportsImports() && supportsShadowDom()) {
   // Good to go!
 } else {
   // Use other libraries to create components.
 }

This is the current matrix from https://github.com/WebComponents/webcomponentsjs#browser-support:

<table><thead>
<tr>
<th>Polyfill</th>
<th align="center">IE10</th>
<th align="center">IE11+</th>
<th align="center">Chrome*</th>
<th align="center">Firefox*</th>
<th align="center">Safari 7+*</th>
<th align="center">Chrome Android*</th>
<th align="center">Mobile Safari*</th>
</tr>
</thead><tbody>
<tr>
<td>Custom Elements</td>
<td align="center">~</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
</tr>
<tr>
<td>HTML Imports</td>
<td align="center">~</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
</tr>
<tr>
<td>Shadow DOM</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
</tr>
<tr>
<td>Templates</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
<td align="center">✓</td>
</tr>
</tbody></table>

This may be interesting, too: https://github.com/webcomponents/webcomponentsjs/issues/26