cross-browser - 检测浏览器对Polymer的支持

Question

我在网站上使用Polymer(版本0.5，有时可能会升级到1.0)。显然，许多较旧的浏览器无法与Polyfills配合使用。

有没有一种方法可以测试Polyfill在特定浏览器中是否成功？那么，在完成polyfill后，是否可以检查一些功能，对象，变量或其他东西来查看polyfill是否起作用？

我希望能够检测到故障，然后重定向到带有“请升级”消息的页面。

对我而言，唯一的选择是在后端中实现某种浏览器检测中间件，由于种种内部原因(由于这将意味着将浏览器列表特别列入白名单/将其列入黑名单)，因此我宁愿避免这种情况乏味的快速)。

提前谢谢。

Answer 1

简短答案:

快速测试:Firefox 38.0.5警报“否”，而Chrome 44.0.2403.130 m警报"is"

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");
  
}

详细答案:

您必须在Polymer网站上检查 this list。

• Template
• HTML Imports
• Custom Elements
• Shadow DOM

必须支持以下功能:

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
}

在函数中:

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

未经测试的版本具有以前的代码片段的样式:

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

好的，在实现所有功能之后，您可以执行以下操作:

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

这是 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>

这也可能很有趣:
https://github.com/webcomponents/webcomponentsjs/issues/26