检测Polymer的浏览器支持 [英] Detect browser support fo Polymer

问题描述

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

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.

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

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).

提前谢谢.

推荐答案

简短答案:

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

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网站上查看此列表.

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

• 模板
• HTML导入
• 自定义元素
• 阴影DOM

• Template
• HTML Imports
• Custom Elements
• Shadow DOM

必须支持以下功能:

• http://www.html5rocks.com/zh-CN/tutorials/webcomponents/模板/

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

---

• 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

---

• 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

---

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

如何检查浏览器是否支持影子DOM

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

在函数中:

 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.
 }

这是来自> https://github.com/WebComponents/webcomponentsjs#browser的当前矩阵-支持:

<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

这篇关于检测Polymer的浏览器支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！