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

I would like to have this process:

1. I define which APIs (from your polyfills directory) I want to have polyfilled.
2. In my web pages, live feature detection is performed in the browser for those APIs, a custom //cdn.polyfill.io/v1/polyfill.min.js?features= <auto generated> &ua=false&gated=1 URL is generated (tailored to the browser and with ua disabled) and the corresponding bundle is requested and inserted into the page.

Beside having feature detection, another advantage of this approach is that it enables defining a set of APIs which are all already available in modern browsers (e.g. Chrome, Firefox), in which case Step 2 from above generates an empty “features” list, so nothing has to be requested (= we save the HTTP request completely for those browsers).

How this could work:

1. The feature detection code (Step 2) would be auto-generated from the list (Step 1) and inlined in the website’s pages. This could be performed via a (Grunt & co.) task.
2. This code would then request the polyfill bundle by document.write()-ing a <script> onto the page (needed to perform a sync request).

---

Do my thoughts make sense? 😃

[rokoroku]

FYI: Safari(TP 46+) froze the User-Agent string.

• Release Notes for Safari Technology Preview 46 | WebKit
• https://twitter.com/rmondello/status/943545865204989953

Seems like Safari reverted above change

• https://bugs.webkit.org/show_bug.cgi?id=182629

[triblondon]

I’ve added a section to the docs describing some best practice loading strategies including feature-detection

https://polyfill.io/v2/docs/examples#feature-detection