Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Suggestion: Feature detect then load the polyfills needed #11

Closed
Daniel-Hug opened this Issue · 13 comments

6 participants

@Daniel-Hug

My suggestion (migrated from this comment) is to have users of polyfill.io be able to include a script on their page that would make a list of features not supported:

var arrayOfUnsupportedFeatures = [
    'Array#forEach',
    'querySelectorAll'
];

Then it would load the polyfills for just those features:

var scriptEl = document.createElement('script');
scriptEl.src = "//polyfill.io?" + arrayOfUnsupportedFeatures.join(',');
document.body.appendChild(scriptEl);

Like this:

<script src="//polyfill.io?Array#forEach,querySelectorAll">
@maxw3st

^5, looks good.

@mathiasbynens

:+1: This would make it possible to use polyfill.io in a way that doesn’t involve UA sniffing!

@padolsey

This would rock :+1:

@jonathantneal

I should have this in today.

@jonathantneal

The following URL returns the Array.prototype.forEach polyfil regardless if it is needed by the user agent:

<script src="//polyfill.io/gimme(Array.prototype.forEach)"></script>

The following URL returns the Array.prototype.forEach polyfill only if it is needed by the user agent:

<script src="//polyfill.io/maybe(Array.prototype.forEach)"></script>

Get Array.prototype.forEach and Array.prototype.reduceRight JavaScript regardless:

<script src="//polyfill.io/gimme(Array.*forEach,Array.*forEach)"></script>

Get section and template CSS conditionally:

<script src="//polyfill.io/maybe(section,template).css"></script>

Now, on to testing. This area might still need some improvement. Based on @Daniel-Hug's demonstration, you hit a http://polyfill.io/test.js:

<script src="//polyfill.io/test.js"></script>

The test script creates an object with a list of features, with each feature property name returning whether that feature exists. We take all the features that return false and push them into an array, and inject a polyfill.io script tag that returns those specific features' polyfills.

@Daniel-Hug

@jonathantneal Your http://polyfill.io/test.js link in your last comment is dead.

@jonathantneal

@Daniel-Hug, thanks, let me know what you all think of it. I updated the link, it was just a github markdown goof on my part.

@Daniel-Hug

test.js isn't working. It creates a new script tag of the form shown below, but then the below script only returns the scripts that it determines your user agent wants, not the ones you asked for:

<script src="//polyfill.io/?Object.is,Element..matches.ms,Element..mutation"></script>

If you include the Array..forEach script, shown below, on your page, and visit the page in chrome you'll still only get the Element.prototype.matches, Element.prototype.webkitMatchesSelector, etc., not Array.prototype.forEach.

<script src="//polyfill.io/?Array..forEach"></script>

I can use the "gimme" keyword, and that returns Array..forEach, but it also includes the user agent scripts as well. I want to be able to load just the scripts I want:

<script src="//polyfill.io/?gimme(Array..forEach)"></script>
@jonathantneal

Yes, the middle-ware needs to be rewritten, and new tests need to reflect that functionality. As the service (apparently) gains traction, this is increasingly necessary.

@jdalton jdalton referenced this issue in Financial-Times/polyfill-service
Open

Use live feature detection instead of being based on User-Agent #84

@triblondon
Collaborator

Discussion continues in Financial-Times#84

@triblondon triblondon closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.