1
00:00:02,170 --> 00:00:09,560
Another strategy for making code work in more browsers is to use polyfills. A polyfill is a third-party

2
00:00:09,560 --> 00:00:13,930
package that adds a functionality which otherwise might be missing in a browser,

3
00:00:13,940 --> 00:00:21,290
let's say you want to use promises. Promises might not be available in all browsers, for example Internet

4
00:00:21,290 --> 00:00:25,990
Explorer does not support promises and therefore to still make it work there,

5
00:00:26,090 --> 00:00:31,990
you can add such a polyfill which again is just a third-party package that actually teaches the browser

6
00:00:32,000 --> 00:00:34,050
how to use that feature.

7
00:00:34,070 --> 00:00:39,350
Now obviously, this is not possible for all features, some features rely on some core mechanics which

8
00:00:39,350 --> 00:00:41,990
can't be worked around with Javascript,

9
00:00:41,990 --> 00:00:48,020
some features however can be replicated with other Javascript features and therefore an older browser

10
00:00:48,230 --> 00:00:53,440
which might not support let's say promises but supports other features with which you can rebuild

11
00:00:53,450 --> 00:01:00,020
the idea behind promises might be able to utilize such a promise polyfill. So it's a third-party Javascript

12
00:01:00,020 --> 00:01:05,690
feature that simply adds something to a browser which otherwise is missing there.

13
00:01:05,690 --> 00:01:10,320
So for some features and functionalities, this might be very interesting to have.

14
00:01:10,340 --> 00:01:12,210
Now how do you find such a polyfill?

15
00:01:12,260 --> 00:01:17,030
For example if you search for fetch here on caniuse and you want to use fetch and you know you also

16
00:01:17,030 --> 00:01:21,840
need to target older versions of Edge and let's say Internet Explorer.

17
00:01:21,860 --> 00:01:25,990
Well then here under resources, you would find a link to a polyfill,

18
00:01:26,120 --> 00:01:30,150
of course you can also just try your luck and search for fetch polyfill.

19
00:01:30,260 --> 00:01:36,080
In both scenarios here with that link or with our first search result, you actually would end up on this

20
00:01:36,080 --> 00:01:39,740
GitHub page here and there, you learned about this

21
00:01:39,800 --> 00:01:41,360
fetch polyfill

22
00:01:41,570 --> 00:01:47,780
and here you learn what it does, what it is able to do and what it is not able to do and how you can

23
00:01:47,870 --> 00:01:49,250
add it and how you can use it.

24
00:01:50,340 --> 00:01:55,320
You also learned that for this polyfill to work, you also need to add another polyfill to make promises

25
00:01:55,320 --> 00:02:00,780
work and there, you could for example dive into this recommendation and make this promise polyfill

26
00:02:00,780 --> 00:02:01,290
work,

27
00:02:01,290 --> 00:02:04,470
then you would also have to follow the installation instructions there,

28
00:02:04,470 --> 00:02:09,930
here you can simply use the CDN link for example and throw that into your index.html file and with

29
00:02:09,930 --> 00:02:11,820
that you would be able to use promises

30
00:02:11,860 --> 00:02:17,070
and with this polyfill, you would also be able to use the fetch API because what the polyfill does

31
00:02:17,070 --> 00:02:24,630
behind the scenes is it basically adds this fetch function, fetch method to the global window object

32
00:02:24,630 --> 00:02:31,620
you could say and it does so by rebuilding the fetch API with features that are available in older browsers

33
00:02:31,620 --> 00:02:32,580
as well.

34
00:02:32,700 --> 00:02:37,020
And if you're interested in seeing what happens under the hood, you can simply dive into that open

35
00:02:37,020 --> 00:02:43,750
source code here and learn how they rebuild the fetch API with other tools, to be precise with

36
00:02:43,830 --> 00:02:45,600
XMLHttpRequest here.

37
00:02:45,600 --> 00:02:52,680
So polyfills can also be a very nice feature to making features work in browsers that would normally

38
00:02:52,680 --> 00:02:53,610
not support it.

39
00:02:53,670 --> 00:02:59,190
Of course not magically, you're not touching the browser source code after all but by simply working

40
00:02:59,190 --> 00:03:02,790
around the features with features the browser does support.

41
00:03:02,790 --> 00:03:08,580
Therefore this is not available for all features you might want to use but for some, especially promises

42
00:03:08,580 --> 00:03:14,250
and the fetch API are prominent examples which you can make work in older browsers even though they

43
00:03:14,250 --> 00:03:16,340
normally would not work there.