Detect browser support fo Polymer - cross-browser

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