Requirements and polyfills

Read time: 1 minute

Last edited: Feb 12, 2020

Web browsers vary widely in their support of specific features and standards. It is common in JavaScript development to use polyfills—scripts that implement a feature in case it is not built into the browser—to ensure the widest possible compatibility.

Three features that are used by the LaunchDarkly SDK that may not be available on every browser are Promise, EventSource, and document.querySelectorAll().

Methods of adding a polyfill

For all of these features, there are two ways you can provide the polyfill script.

One is to load it directly from a CDN that hosts the package, with a <script> tag within the <head> element of your page. Note that you must put the <script> tag for the polyfill before any scripts that make use of the LaunchDarkly SDK.

1<script src="[URL of the polyfill script]"></script>

If you are using a package manager such as NPM or Yarn, and using require() to load modules at runtime, you would first add the polyfill package to your project:

1npm install package-name-of-polyfill@package.version.number

Then, make sure that you require the polyfill module prior to initializing the LaunchDarkly client:

1require('package-name-of-polyfill');

You only need to use one of these methods—CDN or package manager—not both.

Promise

The SDK relies heavily on JavaScript Promises. Browsers that do not support Promise include Internet Explorer and older versions of Microsoft Edge. If you need to support these browsers, you will need to install a polyfill for Promise, such as es6-promise.

1<!-- loading polyfill from CDN -->
2<script src="https://unpkg.com/es6-promise@4.2.4/dist/es6-promise.auto.min.js"></script>

EventSource

The SDK uses EventSource to provide a live streaming connection to LaunchDarkly, if you have enabled streaming (by using the streaming property or the setStreaming method, or by subscribing to change events). If you never enable streaming, you do not need EventSource.

It is widely available in browsers, except for Internet Explorer and Microsoft Edge. If you wish to support these, and you need streaming support, you can install a polyfill such as event-source-polyfill.

1<!-- loading polyfill from CDN -->
2<script src="https://unpkg.com/event-source-polyfill@0.0.12/src/eventsource.min.js"></script>

Document.querySelectorAll()

The SDK uses querySelectorAll to support click events for A/B testing. If you never use click goals, you do not need querySelectorAll.

It is widely available in browsers, except in old versions of Internet Explorer. If you wish to support these, and you need A/B testing support, you can install a polyfill such as polyfill-queryselector.

1<!-- loading polyfill from CDN -->
2<script src="https://unpkg.com/polyfill-queryselector@1.0.2/querySelector.js"></script>