WEBVTT

1
00:00:00.560 --> 00:00:05.260
<00:00:00.560>Okay, <00:00:00.715>so <00:00:00.871>are <00:00:01.026>you <00:00:01.182>all <00:00:01.337>ready <00:00:01.493>for <00:00:01.648>the <00:00:01.804>last <00:00:01.960>stop

2
00:00:05.260 --> 00:00:06.980
<00:00:05.260>of <00:00:05.960>the <00:00:06.660>day?

3
00:00:07.380 --> 00:00:11.800
<00:00:07.380>Cool, <00:00:07.555>so <00:00:07.729>I'm <00:00:07.904>going <00:00:08.080>to <00:00:08.254>introduce <00:00:08.430>our <00:00:08.605>speaker, <00:00:08.780>last

4
00:00:11.800 --> 00:00:14.640
<00:00:11.800>but <00:00:12.000>not <00:00:12.200>the <00:00:12.400>least, <00:00:12.600>an <00:00:12.800>amazing <00:00:13.000>speaker, <00:00:13.200>Rowdy.

5
00:00:14.640 --> 00:00:17.360
<00:00:14.640>He <00:00:14.873>is <00:00:15.106>a <00:00:15.340>front-end <00:00:15.573>focused <00:00:15.806>senior <00:00:16.040>DevOps

6
00:00:17.360 --> 00:00:21.660
<00:00:17.360>engineer, <00:00:17.710>but <00:00:18.060>facts <00:00:18.410>about <00:00:18.759>him.

7
00:00:21.660 --> 00:00:25.200
<00:00:21.660>How <00:00:21.860>many <00:00:22.060>of <00:00:22.260>you <00:00:22.460>are <00:00:22.660>into <00:00:22.860>Formula <00:00:23.060>One?

8
00:00:25.360 --> 00:00:27.720
<00:00:25.360>Formula <00:00:25.826>One, <00:00:26.293>come <00:00:26.759>on.

9
00:00:27.720 --> 00:00:31.140
<00:00:27.720>So <00:00:29.119>yeah,

10
00:00:31.140 --> 00:00:35.740
<00:00:31.140>he <00:00:31.315>has <00:00:31.490>been <00:00:31.665>watching <00:00:31.840>Formula <00:00:32.015>One <00:00:32.189>since <00:00:32.365>the <00:00:32.540>mid-90s.

11
00:00:35.740 --> 00:00:39.100
<00:00:35.740>I <00:00:35.895>hope <00:00:36.051>I <00:00:36.206>didn't <00:00:36.362>give <00:00:36.517>away <00:00:36.673>his <00:00:36.828>age, <00:00:36.984>but <00:00:37.140>anyways.

12
00:00:39.640 --> 00:00:44.260
<00:00:39.640>Also, <00:00:39.756>he <00:00:39.873>was <00:00:39.990>a <00:00:40.106>club <00:00:40.223>DJ <00:00:40.340>in <00:00:40.456>the <00:00:40.573>late <00:00:40.690>80s <00:00:40.806>and <00:00:40.923>early <00:00:41.040>90s.

13
00:00:44.260 --> 00:00:46.960
<00:00:44.260>And <00:00:44.493>he <00:00:44.726>is <00:00:44.960>in <00:00:45.193>very <00:00:45.426>early <00:00:45.660>stages

14
00:00:46.960 --> 00:00:51.020
<00:00:46.960>of <00:00:47.135>creating <00:00:47.310>his <00:00:47.485>own <00:00:47.660>electronic <00:00:47.835>music <00:00:48.010>as <00:00:48.185>a <00:00:48.360>hobby.

15
00:00:51.020 --> 00:00:52.220
<00:00:51.020>I'm <00:00:51.290>really <00:00:51.560>interested <00:00:51.830>in <00:00:52.100>that

16
00:00:52.220 --> 00:00:54.840
<00:00:52.220>and <00:00:52.375>I <00:00:52.531>hope <00:00:52.686>that <00:00:52.842>we <00:00:52.997>get <00:00:53.153>to <00:00:53.308>hear <00:00:53.464>that <00:00:53.620>soon.

17
00:00:54.840 --> 00:00:58.340
<00:00:54.840>With <00:00:54.980>that, <00:00:55.120>let's <00:00:55.260>give <00:00:55.400>a <00:00:55.540>big <00:00:55.680>round <00:00:55.820>of <00:00:55.960>applause <00:00:56.100>to <00:00:56.240>Rowdy

18
00:00:58.340 --> 00:01:00.560
<00:00:58.340>and <00:00:58.620>the <00:00:58.900>stage <00:00:59.180>is <00:00:59.460>all <00:00:59.740>yours.

19
00:01:01.540 --> 00:01:02.980
<00:01:01.540>Thank <00:01:02.836>You.

20
00:01:17.960 --> 00:01:21.160
<00:01:17.960>All <00:01:18.240>right, <00:01:18.520>good <00:01:18.800>morning. <00:01:19.080>Good <00:01:19.360>morning.

21
00:01:21.160 --> 00:01:26.140
<00:01:21.160>Geez, <00:01:21.360>good <00:01:21.560>afternoon. <00:01:21.759>Have <00:01:21.960>you <00:01:22.160>seen <00:01:22.360>this <00:01:22.560>before?

22
00:01:26.820 --> 00:01:29.980
<00:01:26.820>Yes, <00:01:27.020>it's, <00:01:27.220>by <00:01:27.419>the <00:01:27.619>way, <00:01:27.820>it's <00:01:28.020>not <00:01:28.220>them.

23
00:01:31.060 --> 00:01:33.560
<00:01:31.060>But <00:01:31.260>you <00:01:31.460>get <00:01:31.660>this <00:01:31.860>when <00:01:32.060>you <00:01:32.260>are <00:01:32.460>offline

24
00:01:33.560 --> 00:01:35.980
<00:01:33.560>and <00:01:33.793>visiting <00:01:34.026>a <00:01:34.260>website <00:01:34.493>in <00:01:34.726>Google <00:01:34.960>Chrome

25
00:01:35.980 --> 00:01:38.020
<00:01:35.979>and <00:01:36.329>you <00:01:36.679>can <00:01:37.029>play <00:01:37.380>around.

26
00:01:38.020 --> 00:01:39.040
<00:01:38.020>That's <00:01:38.937>fun,

27
00:01:39.040 --> 00:01:42.640
<00:01:39.039>but <00:01:39.179>it's <00:01:39.320>not <00:01:39.460>fun <00:01:39.600>for <00:01:39.740>your <00:01:39.880>customers, <00:01:40.020>so <00:01:40.160>let's <00:01:40.300>fix <00:01:40.440>this.

28
00:01:43.440 --> 00:01:44.880
<00:01:43.440>All <00:01:43.655>right, <00:01:43.872>this <00:01:44.088>was, <00:01:44.304>by <00:01:44.520>the <00:01:44.735>way,

29
00:01:44.880 --> 00:01:46.620
<00:01:44.880>this <00:01:45.160>is <00:01:45.440>called <00:01:45.720>a <00:01:46.000>downer <00:01:46.280>sore.

30
00:01:47.640 --> 00:01:49.880
<00:01:47.640>All <00:01:47.815>right, <00:01:47.990>as <00:01:48.165>I <00:01:48.340>said, <00:01:48.515>my <00:01:48.690>name <00:01:48.865>is <00:01:49.040>Rowdy.

31
00:01:49.880 --> 00:01:51.760
<00:01:49.880>I'm <00:01:50.113>a <00:01:50.346>front-end <00:01:50.580>focused <00:01:50.813>senior <00:01:51.046>DevOps <00:01:51.280>engineer

32
00:01:51.760 --> 00:01:55.700
<00:01:51.759>and <00:01:51.934>I <00:01:52.109>try <00:01:52.285>to <00:01:52.460>add <00:01:52.634>some <00:01:52.809>more <00:01:52.984>every <00:01:53.160>week.

33
00:01:56.920 --> 00:02:00.080
<00:01:56.920>Maybe <00:01:57.120>I <00:01:57.320>think <00:01:57.520>of <00:01:57.720>something <00:01:57.920>else <00:01:58.120>next <00:01:58.320>week.

34
00:02:00.080 --> 00:02:05.000
<00:02:00.080>And <00:02:00.207>I <00:02:00.334>built <00:02:00.461>my <00:02:00.589>first <00:02:00.716>website <00:02:00.843>in <00:02:00.970>1996. <00:02:01.098>Yes, <00:02:01.225>I'm <00:02:01.352>that <00:02:01.480>old.

35
00:02:06.200 --> 00:02:08.140
<00:02:06.200>I'm <00:02:06.400>going <00:02:06.600>to <00:02:06.800>show <00:02:07.000>a <00:02:07.200>lot <00:02:07.400>of <00:02:07.600>code

36
00:02:08.140 --> 00:02:11.260
<00:02:08.139>and <00:02:08.373>I <00:02:08.606>hope <00:02:08.839>you're <00:02:09.073>still <00:02:09.306>wake <00:02:09.539>enough.

37
00:02:11.500 --> 00:02:16.360
<00:02:11.500>Do <00:02:11.675>you <00:02:11.850>still <00:02:12.025>have <00:02:12.200>energy? <00:02:12.375>Okay, <00:02:12.550>okay, <00:02:12.725>good, <00:02:12.900>good.

38
00:02:17.040 --> 00:02:18.840
<00:02:17.040>As <00:02:17.273>you <00:02:17.506>can <00:02:17.739>see, <00:02:17.973>there's <00:02:18.206>a <00:02:18.440>URL.

39
00:02:18.840 --> 00:02:21.400
<00:02:18.840>I'm <00:02:19.015>going <00:02:19.190>to <00:02:19.365>share <00:02:19.540>also <00:02:19.715>a <00:02:19.890>link <00:02:20.065>later <00:02:20.240>on,

40
00:02:21.400 --> 00:02:23.580
<00:02:21.400>but <00:02:21.633>I've <00:02:21.866>broken <00:02:22.100>it <00:02:22.333>up <00:02:22.566>in <00:02:22.800>branches,

41
00:02:23.580 --> 00:02:25.960
<00:02:23.579>so <00:02:23.707>you <00:02:23.834>can <00:02:23.961>follow <00:02:24.089>along <00:02:24.216>at <00:02:24.343>home <00:02:24.470>if <00:02:24.598>you <00:02:24.725>want <00:02:24.852>to <00:02:24.980>see

42
00:02:25.960 --> 00:02:27.280
<00:02:25.960>how <00:02:26.554>things <00:02:27.148>work.

43
00:02:27.420 --> 00:02:29.920
<00:02:27.420>First <00:02:27.595>of <00:02:27.770>all, <00:02:27.945>let's <00:02:28.120>start <00:02:28.295>with <00:02:28.470>some <00:02:28.645>starter <00:02:28.820>code.

44
00:02:29.920 --> 00:02:32.340
<00:02:29.920>This <00:02:30.270>is <00:02:30.620>just <00:02:30.970>plain <00:02:31.320>HTML.

45
00:02:32.340 --> 00:02:36.340
<00:02:32.340>I <00:02:32.495>have <00:02:32.651>some <00:02:32.806>text <00:02:32.962>about <00:02:33.117>Jurassic <00:02:33.273>Park <00:02:33.428>with <00:02:33.584>an <00:02:33.740>image.

46
00:02:36.340 --> 00:02:40.320
<00:02:36.340>I <00:02:36.480>have <00:02:36.620>some <00:02:36.760>links <00:02:36.900>as <00:02:37.040>well <00:02:37.180>to <00:02:37.320>different <00:02:37.460>movies <00:02:37.600>about <00:02:37.740>that.

47
00:02:41.120 --> 00:02:43.020
<00:02:41.120>And <00:02:41.400>it <00:02:41.680>looks <00:02:41.960>something <00:02:42.240>like <00:02:42.520>this.

48
00:02:43.380 --> 00:02:45.720
<00:02:43.380>So <00:02:43.613>you <00:02:43.846>have <00:02:44.079>a <00:02:44.313>header, <00:02:44.546>an <00:02:44.780>image,

49
00:02:45.720 --> 00:02:47.600
<00:02:45.720>some <00:02:46.000>links <00:02:46.280>you <00:02:46.560>can <00:02:46.840>click <00:02:47.120>around.

50
00:02:48.700 --> 00:02:50.860
<00:02:48.700>If <00:02:48.855>you <00:02:49.011>haven't <00:02:49.166>seen <00:02:49.322>all <00:02:49.477>the <00:02:49.633>movies, <00:02:49.788>don't <00:02:49.944>read <00:02:50.100>this

51
00:02:50.860 --> 00:02:54.260
<00:02:50.860>because <00:02:51.000>it <00:02:51.140>will <00:02:51.280>spoil <00:02:51.420>it <00:02:51.560>for <00:02:51.700>you, <00:02:51.840>but <00:02:51.980>this <00:02:52.120>is <00:02:52.260>more

52
00:02:54.260 --> 00:02:58.520
<00:02:54.260>or <00:02:54.459>less <00:02:54.660>the <00:02:54.859>basic <00:02:55.060>start <00:02:55.260>we're <00:02:55.459>going <00:02:55.660>with.

53
00:02:59.640 --> 00:03:03.220
<00:02:59.640>All <00:02:59.795>right, <00:02:59.951>to <00:03:00.106>make <00:03:00.262>sure <00:03:00.417>that <00:03:00.573>we <00:03:00.728>can <00:03:00.884>get <00:03:01.040>rid

54
00:03:03.220 --> 00:03:06.420
<00:03:03.220>of <00:03:03.359>the <00:03:03.500>downer <00:03:03.640>sore, <00:03:03.780>we <00:03:03.920>are <00:03:04.060>going <00:03:04.200>to <00:03:04.340>use <00:03:04.480>the <00:03:04.620>powers

55
00:03:06.420 --> 00:03:07.420
<00:03:06.420>of <00:03:06.869>service <00:03:07.320>workers.

56
00:03:07.420 --> 00:03:10.200
<00:03:07.420>And <00:03:07.559>if <00:03:07.700>you <00:03:07.839>don't <00:03:07.980>know <00:03:08.119>what <00:03:08.260>service <00:03:08.399>workers <00:03:08.540>are, <00:03:08.679>I'm <00:03:08.820>going

57
00:03:10.200 --> 00:03:11.740
<00:03:10.200>to <00:03:10.662>explain <00:03:11.124>to <00:03:11.586>you.

58
00:03:12.240 --> 00:03:16.400
<00:03:12.240>It's <00:03:12.415>essentially <00:03:12.590>just <00:03:12.765>a <00:03:12.940>plain <00:03:13.115>JavaScript <00:03:13.290>file, <00:03:13.465>easy <00:03:13.640>enough.

59
00:03:17.440 --> 00:03:19.520
<00:03:17.440>The <00:03:17.640>beauty <00:03:17.840>is <00:03:18.040>it <00:03:18.240>runs <00:03:18.440>in <00:03:18.640>the <00:03:18.840>background,

60
00:03:19.520 --> 00:03:21.280
<00:03:19.520>so <00:03:19.753>it <00:03:19.986>runs <00:03:20.220>in <00:03:20.453>a <00:03:20.686>separate <00:03:20.920>thread.

61
00:03:21.280 --> 00:03:24.200
<00:03:21.280>It's <00:03:21.435>not <00:03:21.591>blocking <00:03:21.746>your <00:03:21.902>website, <00:03:22.057>so <00:03:22.213>that's <00:03:22.368>a <00:03:22.524>good <00:03:22.680>thing.

62
00:03:24.820 --> 00:03:26.600
<00:03:24.820>It <00:03:25.100>is <00:03:25.380>scoped <00:03:25.660>to <00:03:25.940>your <00:03:26.220>website,

63
00:03:26.600 --> 00:03:28.680
<00:03:26.600>so <00:03:26.833>you <00:03:27.066>cannot <00:03:27.299>use <00:03:27.533>a <00:03:27.766>service <00:03:28.000>worker

64
00:03:28.680 --> 00:03:31.300
<00:03:28.680>to <00:03:28.880>do <00:03:29.080>something <00:03:29.280>else <00:03:29.480>on <00:03:29.680>a <00:03:29.880>different <00:03:30.080>website.

65
00:03:31.300 --> 00:03:33.280
<00:03:31.300>That's <00:03:31.580>good <00:03:31.860>as <00:03:32.140>well, <00:03:32.420>of <00:03:32.700>course.

66
00:03:34.640 --> 00:03:37.700
<00:03:34.640>One <00:03:34.920>downside <00:03:35.200>maybe, <00:03:35.480>it <00:03:35.760>cannot <00:03:36.040>interact

67
00:03:37.700 --> 00:03:39.580
<00:03:37.700>with <00:03:38.166>the <00:03:38.633>current <00:03:39.100>page.

68
00:03:39.580 --> 00:03:42.500
<00:03:39.579>It <00:03:39.755>doesn't <00:03:39.929>have <00:03:40.105>access <00:03:40.279>to <00:03:40.454>the <00:03:40.630>document <00:03:40.804>object <00:03:40.980>model.

69
00:03:44.270 --> 00:03:47.510
<00:03:44.270>It <00:03:44.425>works <00:03:44.581>asynchronous, <00:03:44.736>so <00:03:44.892>you <00:03:45.047>have <00:03:45.203>to <00:03:45.358>work <00:03:45.514>with <00:03:45.670>promissors

70
00:03:47.510 --> 00:03:49.390
<00:03:47.510>or <00:03:48.910>async-await.

71
00:03:50.030 --> 00:03:52.330
<00:03:50.030>And <00:03:50.310>it's <00:03:50.590>event-driven. <00:03:50.870>That's <00:03:51.150>very <00:03:51.430>important.

72
00:03:52.330 --> 00:03:54.790
<00:03:52.329>I'm <00:03:52.457>going <00:03:52.584>to <00:03:52.711>show <00:03:52.839>you <00:03:52.966>the <00:03:53.093>events <00:03:53.220>that <00:03:53.348>come <00:03:53.475>along <00:03:53.602>as <00:03:53.730>well

73
00:03:55.150 --> 00:03:56.830
<00:03:55.150>and <00:03:55.500>explain <00:03:55.850>what <00:03:56.200>they're <00:03:56.550>doing.

74
00:03:57.790 --> 00:04:00.810
<00:03:57.790>And <00:03:57.989>how <00:03:58.190>is <00:03:58.390>the <00:03:58.590>support? <00:03:58.790>Well, <00:03:58.989>incredibly <00:03:59.190>good.

75
00:04:00.810 --> 00:04:02.450
<00:04:00.810>Finally, <00:04:01.043>we <00:04:01.276>have <00:04:01.510>something <00:04:01.743>we <00:04:01.976>can <00:04:02.210>use.

76
00:04:02.450 --> 00:04:05.750
<00:04:02.450>I <00:04:02.605>was <00:04:02.761>at <00:04:02.916>the <00:04:03.072>Houdini <00:04:03.227>talk <00:04:03.383>here <00:04:03.538>early <00:04:03.694>this <00:04:03.850>afternoon.

77
00:04:05.750 --> 00:04:07.290
<00:04:05.750>I <00:04:05.981>was <00:04:06.212>like, <00:04:06.442>we <00:04:06.674>can <00:04:06.905>do <00:04:07.136>that,

78
00:04:07.290 --> 00:04:09.430
<00:04:07.290>but <00:04:07.489>we <00:04:07.690>cannot <00:04:07.890>do <00:04:08.090>that, <00:04:08.290>that <00:04:08.489>or <00:04:08.690>that.

79
00:04:09.750 --> 00:04:14.290
<00:04:09.750>Finally, <00:04:09.950>service <00:04:10.150>workers <00:04:10.350>are <00:04:10.550>supported <00:04:10.750>everywhere <00:04:10.950>except <00:04:11.150>IE,

80
00:04:14.290 --> 00:04:17.630
<00:04:14.290>but <00:04:14.445>IE <00:04:14.601>was <00:04:14.756>pronounced <00:04:14.912>that <00:04:15.067>last <00:04:15.223>year, <00:04:15.378>so <00:04:15.534>that's <00:04:15.690>good.

81
00:04:22.910 --> 00:04:26.830
<00:04:22.910>To <00:04:23.065>tell <00:04:23.221>you <00:04:23.376>how <00:04:23.532>service <00:04:23.687>workers <00:04:23.843>work, <00:04:23.998>I <00:04:24.154>came <00:04:24.310>up

82
00:04:26.830 --> 00:04:28.330
<00:04:26.830>with <00:04:27.505>this <00:04:28.180>analogy.

83
00:04:29.130 --> 00:04:31.780
<00:04:29.130>So <00:04:29.270>let's <00:04:29.409>say <00:04:29.550>you <00:04:29.690>have <00:04:29.830>the <00:04:29.969>browser <00:04:30.110>on <00:04:30.250>the <00:04:30.390>left-hand <00:04:30.530>side

84
00:04:33.330 --> 00:04:35.970
<00:04:33.330>and <00:04:33.485>the <00:04:33.641>guy <00:04:33.796>in <00:04:33.952>the <00:04:34.107>middle <00:04:34.263>is <00:04:34.418>the <00:04:34.574>service <00:04:34.729>worker.

85
00:04:36.810 --> 00:04:38.790
<00:04:36.810>On <00:04:37.010>the <00:04:37.210>right-hand <00:04:37.410>side <00:04:37.610>you <00:04:37.810>have <00:04:38.010>the <00:04:38.210>server

86
00:04:38.790 --> 00:04:41.090
<00:04:38.790>where <00:04:39.256>your <00:04:39.723>website <00:04:40.190>runs.

87
00:04:41.690 --> 00:04:43.330
<00:04:41.690>And <00:04:41.865>yeah, <00:04:42.040>in <00:04:42.215>the <00:04:42.390>middle <00:04:42.565>there's <00:04:42.740>some <00:04:42.915>more <00:04:43.090>JavaScript,

88
00:04:43.330 --> 00:04:45.130
<00:04:43.330>but <00:04:43.680>that's <00:04:44.030>not <00:04:44.380>really <00:04:44.729>important.

89
00:04:45.130 --> 00:04:48.050
<00:04:45.130>But <00:04:45.330>there <00:04:45.530>were <00:04:45.730>three <00:04:45.930>dinosaurs <00:04:46.130>in <00:04:46.330>the <00:04:46.530>picture.

90
00:04:48.430 --> 00:04:51.190
<00:04:48.430>All <00:04:48.630>right, <00:04:48.830>the <00:04:49.030>browser <00:04:49.230>will <00:04:49.430>send <00:04:49.630>a <00:04:49.830>request

91
00:04:51.190 --> 00:04:52.750
<00:04:51.190>to <00:04:51.656>the <00:04:52.123>service <00:04:52.590>worker.

92
00:04:53.430 --> 00:04:55.850
<00:04:53.430>At <00:04:53.605>that <00:04:53.780>point <00:04:53.955>the <00:04:54.130>service <00:04:54.305>worker <00:04:54.480>is <00:04:54.655>in <00:04:54.830>control.

93
00:04:55.850 --> 00:04:58.890
<00:04:55.850>He <00:04:55.990>can <00:04:56.130>say, <00:04:56.270>well, <00:04:56.410>I'm <00:04:56.550>going <00:04:56.690>to <00:04:56.830>do <00:04:56.970>something <00:04:57.110>with <00:04:57.250>it

94
00:04:58.890 --> 00:05:00.230
<00:04:58.890>or <00:04:59.091>I'm <00:04:59.292>just <00:04:59.493>going <00:04:59.694>to <00:04:59.895>ignore <00:05:00.096>it

95
00:05:00.230 --> 00:05:02.590
<00:05:00.230>or <00:05:00.510>I'm <00:05:00.790>going <00:05:01.070>to <00:05:01.350>reply <00:05:01.630>immediately.

96
00:05:02.590 --> 00:05:06.610
<00:05:02.590>But <00:05:02.729>let's <00:05:02.869>say <00:05:03.010>for <00:05:03.150>this <00:05:03.289>example <00:05:03.429>it <00:05:03.570>will <00:05:03.710>send <00:05:03.849>a <00:05:03.989>request

97
00:05:06.610 --> 00:05:07.830
<00:05:06.610>to <00:05:07.159>the <00:05:07.707>server.

98
00:05:08.730 --> 00:05:10.750
<00:05:08.730>The <00:05:09.080>server <00:05:09.430>gets <00:05:09.780>the <00:05:10.130>request,

99
00:05:10.750 --> 00:05:15.110
<00:05:10.750>does <00:05:11.100>something <00:05:11.450>on <00:05:11.800>the <00:05:12.150>server,

100
00:05:15.110 --> 00:05:18.590
<00:05:15.110>but <00:05:15.250>again <00:05:15.390>at <00:05:15.530>that <00:05:15.670>point <00:05:15.810>the <00:05:15.950>service <00:05:16.090>worker <00:05:16.230>can <00:05:16.370>say, <00:05:16.510>well,

101
00:05:18.590 --> 00:05:19.870
<00:05:18.590>I'm <00:05:18.782>going <00:05:18.974>to <00:05:19.166>just <00:05:19.358>pass <00:05:19.550>it <00:05:19.742>through

102
00:05:19.870 --> 00:05:21.930
<00:05:19.870>or <00:05:20.150>I'm <00:05:20.430>going <00:05:20.710>to <00:05:20.990>manipulate <00:05:21.270>stuff

103
00:05:21.930 --> 00:05:26.010
<00:05:21.930>or <00:05:22.163>I'm <00:05:22.396>just <00:05:22.630>going <00:05:22.863>to <00:05:23.096>ignore <00:05:23.330>it.

104
00:05:26.010 --> 00:05:26.790
<00:05:26.010>And <00:05:26.185>that's <00:05:26.361>what <00:05:26.536>he's <00:05:26.712>doing

105
00:05:26.790 --> 00:05:28.350
<00:05:26.790>here, <00:05:27.023>giving <00:05:27.256>it <00:05:27.490>back <00:05:27.723>to <00:05:27.956>the <00:05:28.190>browser.

106
00:05:28.350 --> 00:05:31.050
<00:05:28.350>So <00:05:28.525>it's <00:05:28.700>actually <00:05:28.875>say <00:05:29.050>a <00:05:29.225>man <00:05:29.400>in <00:05:29.575>the <00:05:29.750>middle,

107
00:05:31.050 --> 00:05:32.730
<00:05:31.050>but <00:05:31.283>a <00:05:31.516>good <00:05:31.750>man <00:05:31.983>in <00:05:32.216>the <00:05:32.450>middle.

108
00:05:35.040 --> 00:05:38.800
<00:05:35.040>All <00:05:35.215>right, <00:05:35.390>I <00:05:35.565>was <00:05:35.740>promising <00:05:35.915>code. <00:05:36.090>Here <00:05:36.265>it <00:05:36.440>is.

109
00:05:39.900 --> 00:05:44.260
<00:05:39.900>I <00:05:40.133>created <00:05:40.366>a <00:05:40.599>JavaScript <00:05:40.833>file <00:05:41.066>called <00:05:41.299>swgs,

110
00:05:44.260 --> 00:05:46.560
<00:05:44.260>service <00:05:44.726>worker <00:05:45.193>JavaScript <00:05:45.659>file.

111
00:05:46.560 --> 00:05:48.720
<00:05:46.560>And <00:05:46.793>as <00:05:47.026>I <00:05:47.260>said, <00:05:47.493>it's <00:05:47.726>event <00:05:47.960>driven.

112
00:05:48.720 --> 00:05:51.060
<00:05:48.720>So <00:05:49.000>we're <00:05:49.280>listening <00:05:49.560>to <00:05:49.840>two <00:05:50.120>events.

113
00:05:51.400 --> 00:05:53.900
<00:05:51.400>We <00:05:51.575>add <00:05:51.750>an <00:05:51.924>event <00:05:52.099>listen <00:05:52.275>to <00:05:52.450>the <00:05:52.625>install <00:05:52.799>event

114
00:05:53.900 --> 00:05:57.680
<00:05:53.900>and <00:05:54.055>we <00:05:54.211>add <00:05:54.366>an <00:05:54.522>event <00:05:54.677>listen <00:05:54.833>to <00:05:54.988>the <00:05:55.144>activate <00:05:55.299>event.

115
00:05:58.180 --> 00:06:03.100
<00:05:58.180>The <00:05:58.335>install <00:05:58.491>just <00:05:58.646>does <00:05:58.802>a <00:05:58.957>console <00:05:59.113>log <00:05:59.268>in <00:05:59.424>your <00:05:59.580>browser,

116
00:06:03.100 --> 00:06:04.980
<00:06:03.100>sorry, <00:06:03.566>in <00:06:04.033>your <00:06:04.500>DevTools.

117
00:06:05.180 --> 00:06:06.560
<00:06:05.180>And <00:06:05.428>yet <00:06:05.676>at <00:06:05.925>the <00:06:06.173>event <00:06:06.422>listener

118
00:06:06.560 --> 00:06:09.620
<00:06:06.560>for <00:06:06.760>the <00:06:06.960>activate <00:06:07.160>does <00:06:07.360>something <00:06:07.560>extra, <00:06:07.760>making <00:06:07.960>sure

119
00:06:09.620 --> 00:06:12.220
<00:06:09.620>that <00:06:09.820>the <00:06:10.020>service <00:06:10.220>worker <00:06:10.420>is <00:06:10.620>actually <00:06:10.820>activated <00:06:11.020>on

120
00:06:12.220 --> 00:06:13.340
<00:06:12.220>your <00:06:13.227>system.

121
00:06:14.780 --> 00:06:16.920
<00:06:14.780>Then <00:06:15.013>I <00:06:15.246>have <00:06:15.479>a <00:06:15.713>separate <00:06:15.946>JavaScript <00:06:16.179>file

122
00:06:16.920 --> 00:06:19.480
<00:06:16.920>that <00:06:17.270>runs <00:06:17.620>on <00:06:17.970>my <00:06:18.320>website.

123
00:06:19.480 --> 00:06:22.200
<00:06:19.480>And <00:06:19.655>I <00:06:19.830>just <00:06:20.005>call <00:06:20.180>it <00:06:20.355>app.js <00:06:20.530>in <00:06:20.705>this <00:06:20.880>case.

124
00:06:22.200 --> 00:06:23.900
<00:06:22.200>And <00:06:22.550>what <00:06:22.900>this <00:06:23.250>one <00:06:23.599>does,

125
00:06:23.900 --> 00:06:27.740
<00:06:23.900>it <00:06:24.039>will <00:06:24.179>check <00:06:24.320>if <00:06:24.460>service <00:06:24.599>worker <00:06:24.739>is <00:06:24.880>available <00:06:25.020>in <00:06:25.159>the <00:06:25.299>browser.

126
00:06:27.740 --> 00:06:31.260
<00:06:27.740>Well, <00:06:27.915>you <00:06:28.090>just <00:06:28.265>saw <00:06:28.440>that <00:06:28.615>it's <00:06:28.790>available <00:06:28.965>everywhere <00:06:29.140>nowadays,

127
00:06:31.260 --> 00:06:33.720
<00:06:31.260>but <00:06:31.493>it's <00:06:31.726>still <00:06:31.960>good <00:06:32.193>practice <00:06:32.426>to <00:06:32.659>check.

128
00:06:33.800 --> 00:06:35.800
<00:06:33.800>And <00:06:34.000>it <00:06:34.200>will <00:06:34.400>register <00:06:34.600>that <00:06:34.800>service <00:06:35.000>worker <00:06:35.200>file

129
00:06:35.800 --> 00:06:37.100
<00:06:35.800>that <00:06:36.385>you <00:06:36.970>created.

130
00:06:38.580 --> 00:06:41.760
<00:06:38.580>And <00:06:38.780>if <00:06:38.979>it's <00:06:39.180>registered, <00:06:39.380>we <00:06:39.580>just <00:06:39.780>print <00:06:39.979>that

131
00:06:41.760 --> 00:06:44.060
<00:06:41.760>to <00:06:42.110>the <00:06:42.460>console <00:06:42.810>as <00:06:43.159>well.

132
00:06:45.620 --> 00:06:50.260
<00:06:45.620>For <00:06:45.747>the <00:06:45.874>HTML <00:06:46.001>file <00:06:46.129>I <00:06:46.256>had, <00:06:46.383>I <00:06:46.510>just <00:06:46.638>add <00:06:46.765>another <00:06:46.892>script <00:06:47.020>tag,

133
00:06:50.260 --> 00:06:51.760
<00:06:50.260>making <00:06:50.530>sure <00:06:50.800>that <00:06:51.070>the <00:06:51.340>app.js <00:06:51.610>is

134
00:06:51.760 --> 00:06:54.340
<00:06:51.760>loaded. <00:06:52.039>And <00:06:52.320>this <00:06:52.599>will <00:06:52.880>look <00:06:53.159>like

135
00:06:54.340 --> 00:06:58.220
This.

136
00:06:58.220 --> 00:07:02.040
<00:06:58.220>We're <00:06:58.375>going <00:06:58.531>to <00:06:58.686>refresh <00:06:58.842>the <00:06:58.997>page. <00:06:59.153>And <00:06:59.308>there <00:06:59.464>you <00:06:59.620>go.

137
00:07:02.040 --> 00:07:04.640
<00:07:02.040>It's <00:07:02.215>there. <00:07:02.390>The <00:07:02.565>service <00:07:02.740>worker <00:07:02.915>is <00:07:03.090>installed, <00:07:03.265>is <00:07:03.440>registered

138
00:07:04.640 --> 00:07:06.000
<00:07:04.640>and <00:07:05.864>activated.

139
00:07:06.260 --> 00:07:09.580
<00:07:06.260>And <00:07:06.415>you <00:07:06.571>can <00:07:06.726>see <00:07:06.882>also <00:07:07.037>on <00:07:07.193>the <00:07:07.348>right <00:07:07.504>hand <00:07:07.659>side

140
00:07:09.580 --> 00:07:14.560
<00:07:09.580>that <00:07:09.780>we <00:07:09.979>now <00:07:10.180>have <00:07:10.380>service <00:07:10.580>worker <00:07:10.780>zero <00:07:10.979>there.

141
00:07:14.560 --> 00:07:17.060
<00:07:14.560>You <00:07:14.760>can <00:07:14.960>see <00:07:15.160>this <00:07:15.360>in <00:07:15.560>your <00:07:15.760>DevTools <00:07:15.960>application

142
00:07:17.060 --> 00:07:18.400
<00:07:17.060>service <00:07:18.265>workers.

143
00:07:18.840 --> 00:07:19.940
<00:07:18.840>Right, <00:07:19.037>we <00:07:19.236>have <00:07:19.433>a <00:07:19.632>service <00:07:19.830>worker,

144
00:07:19.940 --> 00:07:22.580
<00:07:19.940>but <00:07:20.173>it <00:07:20.406>doesn't <00:07:20.640>do <00:07:20.873>anything <00:07:21.106>yet, <00:07:21.340>right?

145
00:07:23.480 --> 00:07:24.900
<00:07:23.480>Let's <00:07:24.119>fix <00:07:24.758>that.

146
00:07:25.200 --> 00:07:28.080
<00:07:25.200>First <00:07:25.375>of <00:07:25.550>all, <00:07:25.724>we <00:07:25.900>want <00:07:26.075>to <00:07:26.250>serve <00:07:26.425>some <00:07:26.599>files

147
00:07:28.080 --> 00:07:30.000
<00:07:28.080>that <00:07:28.546>are <00:07:29.013>probably <00:07:29.479>never

148
00:07:30.000 --> 00:07:32.400
<00:07:30.000>or <00:07:30.175>not <00:07:30.350>that <00:07:30.525>often <00:07:30.700>going <00:07:30.875>to <00:07:31.050>change, <00:07:31.225>like <00:07:31.400>images

149
00:07:32.400 --> 00:07:35.140
<00:07:32.400>or <00:07:32.866>maybe <00:07:33.333>some <00:07:33.799>CSS

150
00:07:35.140 --> 00:07:38.320
<00:07:35.140>or <00:07:35.490>font <00:07:35.840>files, <00:07:36.190>for <00:07:36.539>instance.

151
00:07:38.320 --> 00:07:41.320
<00:07:38.320>And <00:07:38.495>we're <00:07:38.670>going <00:07:38.844>to <00:07:39.020>put <00:07:39.195>that <00:07:39.370>in <00:07:39.545>static <00:07:39.719>cache.

152
00:07:43.910 --> 00:07:47.310
<00:07:43.909>So <00:07:44.260>in <00:07:44.609>that <00:07:44.960>sw.js <00:07:45.309>file,

153
00:07:47.310 --> 00:07:50.250
<00:07:47.310>I'm <00:07:47.543>adding <00:07:47.776>a <00:07:48.010>variable <00:07:48.243>called <00:07:48.476>static <00:07:48.710>cache.

154
00:07:50.250 --> 00:07:53.310
<00:07:50.250>I'm <00:07:50.377>going <00:07:50.504>to <00:07:50.631>give <00:07:50.759>it <00:07:50.886>a <00:07:51.013>version <00:07:51.140>number. <00:07:51.268>Keep <00:07:51.395>that <00:07:51.522>in <00:07:51.650>mind.

155
00:07:53.310 --> 00:07:56.870
<00:07:53.310>It's <00:07:53.437>important <00:07:53.564>to <00:07:53.691>do <00:07:53.819>that. <00:07:53.946>And <00:07:54.073>I'll <00:07:54.200>come <00:07:54.328>back <00:07:54.455>to <00:07:54.582>that <00:07:54.710>later.

156
00:07:57.290 --> 00:07:59.930
<00:07:57.290>And <00:07:57.430>what <00:07:57.570>I'm <00:07:57.710>doing <00:07:57.850>next <00:07:57.990>is, <00:07:58.130>well, <00:07:58.270>I'm <00:07:58.410>defining <00:07:58.550>an <00:07:58.690>array

157
00:07:59.930 --> 00:08:04.910
<00:07:59.930>of <00:08:00.070>files <00:08:00.210>that <00:08:00.350>I <00:08:00.490>think <00:08:00.630>should <00:08:00.770>immediately <00:08:00.910>be <00:08:01.050>cached <00:08:01.190>when <00:08:01.330>you

158
00:08:04.910 --> 00:08:07.550
<00:08:04.910>come <00:08:05.065>to <00:08:05.221>the <00:08:05.376>website <00:08:05.532>and <00:08:05.687>can <00:08:05.843>be <00:08:05.998>reused <00:08:06.154>later <00:08:06.310>on.

159
00:08:07.550 --> 00:08:12.030
<00:08:07.550>So <00:08:07.666>you <00:08:07.783>can <00:08:07.900>see <00:08:08.016>it's <00:08:08.133>a <00:08:08.250>Fuff <00:08:08.366>icon, <00:08:08.483>some <00:08:08.600>styling, <00:08:08.716>a <00:08:08.833>font <00:08:08.950>file

160
00:08:12.030 --> 00:08:13.670
<00:08:12.030>and <00:08:12.729>an <00:08:13.429>image.

161
00:08:16.390 --> 00:08:19.750
<00:08:16.390>And <00:08:16.530>we <00:08:16.669>already <00:08:16.810>had <00:08:16.950>that <00:08:17.090>install <00:08:17.229>event <00:08:17.370>that <00:08:17.510>we <00:08:17.650>were <00:08:17.789>listening

162
00:08:19.750 --> 00:08:22.730
<00:08:19.750>to, <00:08:19.983>but <00:08:20.216>we're <00:08:20.450>just <00:08:20.683>console <00:08:20.916>logging <00:08:21.150>it.

163
00:08:22.730 --> 00:08:27.690
<00:08:22.730>What <00:08:22.885>we <00:08:23.041>can <00:08:23.196>do <00:08:23.352>now <00:08:23.507>is <00:08:23.663>we <00:08:23.818>will <00:08:23.974>open <00:08:24.130>the

164
00:08:27.690 --> 00:08:29.470
<00:08:27.690>caches <00:08:28.156>that <00:08:28.623>are <00:08:29.090>available.

165
00:08:30.290 --> 00:08:33.550
<00:08:30.290>And <00:08:30.490>I'm <00:08:30.690>trying <00:08:30.890>to <00:08:31.090>open <00:08:31.290>the <00:08:31.490>static-v1 <00:08:31.690>cache.

166
00:08:33.550 --> 00:08:37.750
<00:08:33.549>If <00:08:33.689>it's <00:08:33.829>not <00:08:33.969>there, <00:08:34.109>it <00:08:34.250>will <00:08:34.390>be <00:08:34.530>automatically <00:08:34.669>created <00:08:34.809>for <00:08:34.949>you.

167
00:08:37.750 --> 00:08:41.070
<00:08:37.750>If <00:08:37.890>it's <00:08:38.030>open, <00:08:38.169>I'm <00:08:38.309>just <00:08:38.450>saying <00:08:38.590>we'll <00:08:38.730>add <00:08:38.870>all <00:08:39.010>the <00:08:39.150>files

168
00:08:41.070 --> 00:08:45.470
<00:08:41.070>that <00:08:41.225>are <00:08:41.381>in <00:08:41.536>that <00:08:41.692>array <00:08:41.847>so <00:08:42.003>we <00:08:42.158>have <00:08:42.314>them <00:08:42.470>available

169
00:08:45.470 --> 00:08:46.590
<00:08:45.470>for <00:08:45.974>later <00:08:46.478>on.

170
00:08:46.590 --> 00:08:49.530
<00:08:46.590>And <00:08:46.765>then <00:08:46.940>I <00:08:47.115>say <00:08:47.290>self-skip <00:08:47.465>waiting <00:08:47.640>to <00:08:47.815>make <00:08:47.990>sure

171
00:08:49.530 --> 00:08:53.490
<00:08:49.530>that <00:08:49.810>it's <00:08:50.089>activated <00:08:50.370>for <00:08:50.650>me <00:08:50.930>again.

172
00:08:53.890 --> 00:08:55.110
Otherwise,

173
00:08:55.110 --> 00:08:59.710
<00:08:55.110>it <00:08:55.237>will <00:08:55.364>only <00:08:55.491>be <00:08:55.619>available <00:08:55.746>the <00:08:55.873>second <00:08:56.000>time <00:08:56.128>the <00:08:56.255>user <00:08:56.382>will <00:08:56.510>come

174
00:08:59.710 --> 00:09:01.790
<00:08:59.710>to <00:08:59.943>your <00:09:00.176>website <00:09:00.410>or <00:09:00.643>refreshes <00:09:00.876>your <00:09:01.110>website.

175
00:09:01.790 --> 00:09:04.130
<00:09:01.790>So <00:09:02.140>we're <00:09:02.490>bypassing <00:09:02.839>that <00:09:03.189>step.

176
00:09:04.130 --> 00:09:07.330
<00:09:04.130>All <00:09:04.363>Right, <00:09:04.596>we <00:09:04.830>go <00:09:05.063>to <00:09:05.296>our <00:09:05.530>app.js

177
00:09:07.330 --> 00:09:09.870
And

178
00:09:09.870 --> 00:09:12.290
<00:09:09.870>We're <00:09:10.150>going <00:09:10.430>to <00:09:10.710>do <00:09:10.990>something <00:09:11.270>extra

179
00:09:13.590 --> 00:09:16.710
<00:09:13.590>because <00:09:13.745>we're <00:09:13.901>going <00:09:14.056>to <00:09:14.212>save <00:09:14.367>those <00:09:14.523>files <00:09:14.678>to <00:09:14.834>the <00:09:14.990>cache,

180
00:09:16.710 --> 00:09:18.750
<00:09:16.710>but <00:09:16.943>we're <00:09:17.176>not <00:09:17.410>doing <00:09:17.643>anything <00:09:17.876>with <00:09:18.110>it.

181
00:09:18.750 --> 00:09:22.090
<00:09:18.750>What <00:09:18.925>we <00:09:19.100>want <00:09:19.275>to <00:09:19.450>do <00:09:19.625>is <00:09:19.800>refresh <00:09:19.975>the <00:09:20.150>page

182
00:09:22.090 --> 00:09:24.690
<00:09:22.090>so <00:09:22.323>you <00:09:22.556>can <00:09:22.790>benefit <00:09:23.023>from <00:09:23.256>it <00:09:23.490>immediately.

183
00:09:25.030 --> 00:09:26.870
<00:09:25.030>And <00:09:25.230>instead <00:09:25.430>of <00:09:25.630>just <00:09:25.829>saying, <00:09:26.030>well, <00:09:26.230>we're <00:09:26.430>going

184
00:09:26.870 --> 00:09:29.170
<00:09:26.870>to <00:09:27.103>reload <00:09:27.336>the <00:09:27.570>page <00:09:27.803>anyway, <00:09:28.036>we're <00:09:28.270>going

185
00:09:29.170 --> 00:09:33.550
<00:09:29.170>to <00:09:29.344>give <00:09:29.520>the <00:09:29.694>user <00:09:29.870>a <00:09:30.045>message <00:09:30.219>saying, <00:09:30.395>you <00:09:30.569>know,

186
00:09:33.550 --> 00:09:35.090
<00:09:33.550>there's <00:09:34.012>some <00:09:34.474>new <00:09:34.936>content.

187
00:09:35.090 --> 00:09:38.790
<00:09:35.090>Our <00:09:35.217>website <00:09:35.344>is <00:09:35.471>updated. <00:09:35.599>Do <00:09:35.726>you <00:09:35.853>want <00:09:35.980>to <00:09:36.108>load <00:09:36.235>the <00:09:36.362>new <00:09:36.490>version?

188
00:09:39.590 --> 00:09:41.610
<00:09:39.590>And <00:09:39.870>people <00:09:40.150>can <00:09:40.430>still <00:09:40.710>say <00:09:40.990>no.

189
00:09:41.610 --> 00:09:43.350
<00:09:41.610>But <00:09:41.843>if <00:09:42.076>they <00:09:42.310>do, <00:09:42.543>we're <00:09:42.776>just <00:09:43.010>going

190
00:09:43.350 --> 00:09:44.610
<00:09:43.350>to <00:09:43.539>reload <00:09:43.728>the <00:09:43.917>page <00:09:44.106>at <00:09:44.295>that <00:09:44.484>point.

191
00:09:44.610 --> 00:09:48.030
<00:09:44.610>And <00:09:44.737>then <00:09:44.864>we <00:09:44.991>can <00:09:45.119>make <00:09:45.246>full <00:09:45.373>use <00:09:45.500>of <00:09:45.628>that <00:09:45.755>new <00:09:45.882>service <00:09:46.010>worker.

192
00:09:50.620 --> 00:09:52.480
<00:09:50.620>All <00:09:50.853>right, <00:09:51.086>let's <00:09:51.320>see <00:09:51.553>how <00:09:51.786>that <00:09:52.020>works.

193
00:09:54.160 --> 00:09:56.420
<00:09:54.160>So <00:09:54.393>again, <00:09:54.626>I'm <00:09:54.860>clearing <00:09:55.093>the <00:09:55.326>console <00:09:55.560>here

194
00:09:56.420 --> 00:09:58.580
<00:09:56.420>and <00:09:56.770>then <00:09:57.120>refreshing <00:09:57.469>the <00:09:57.819>page.

195
00:09:59.620 --> 00:10:02.560
<00:09:59.620>And <00:09:59.760>there <00:09:59.900>you <00:10:00.040>can <00:10:00.180>see <00:10:00.320>we're <00:10:00.460>getting <00:10:00.600>a <00:10:00.740>new <00:10:00.880>service <00:10:01.020>worker.

196
00:10:02.560 --> 00:10:04.960
<00:10:02.560>And <00:10:02.715>I <00:10:02.871>get <00:10:03.026>that <00:10:03.182>message <00:10:03.337>saying, <00:10:03.493>well, <00:10:03.648>do <00:10:03.804>you <00:10:03.959>want

197
00:10:04.960 --> 00:10:06.260
<00:10:04.960>to <00:10:05.252>load <00:10:05.545>the <00:10:05.837>new <00:10:06.130>version?

198
00:10:06.260 --> 00:10:07.260
<00:10:06.260>I <00:10:06.710>press <00:10:07.160>OK

199
00:10:08.810 --> 00:10:11.050
<00:10:08.810>And <00:10:09.089>It's <00:10:09.369>refreshed <00:10:09.650>and <00:10:09.930>it's <00:10:10.209>available.

200
00:10:11.050 --> 00:10:12.490
<00:10:11.050>And <00:10:11.235>you <00:10:11.420>can <00:10:11.605>now <00:10:11.790>see <00:10:11.975>in <00:10:12.160>the <00:10:12.346>cache

201
00:10:12.490 --> 00:10:14.490
<00:10:12.490>that <00:10:12.770>we <00:10:13.050>have <00:10:13.330>some <00:10:13.610>files <00:10:13.890>there.

202
00:10:14.490 --> 00:10:17.610
<00:10:14.490>Those <00:10:14.665>are <00:10:14.840>the <00:10:15.015>files <00:10:15.190>that <00:10:15.365>were <00:10:15.540>in <00:10:15.715>our <00:10:15.890>array.

203
00:10:18.550 --> 00:10:19.970
<00:10:18.550>That's <00:10:18.805>fine, <00:10:19.061>we <00:10:19.316>have <00:10:19.572>those <00:10:19.828>files,

204
00:10:19.970 --> 00:10:22.590
<00:10:19.970>but <00:10:20.125>we're <00:10:20.281>not <00:10:20.436>doing <00:10:20.592>anything <00:10:20.747>with <00:10:20.903>it <00:10:21.058>at <00:10:21.214>this <00:10:21.370>point.

205
00:10:23.550 --> 00:10:25.450
<00:10:23.550>So <00:10:24.016>let's <00:10:24.483>fix <00:10:24.949>that.

206
00:10:25.890 --> 00:10:27.430
<00:10:25.890>We <00:10:26.121>now <00:10:26.352>have <00:10:26.583>some <00:10:26.814>static <00:10:27.045>files <00:10:27.276>there,

207
00:10:27.430 --> 00:10:31.570
<00:10:27.430>so <00:10:27.569>let's <00:10:27.709>fetch <00:10:27.849>them <00:10:27.989>the <00:10:28.130>next <00:10:28.270>time <00:10:28.410>the <00:10:28.550>user <00:10:28.689>is <00:10:28.829>loading

208
00:10:31.570 --> 00:10:32.610
<00:10:31.570>that <00:10:32.506>page.

209
00:10:34.050 --> 00:10:36.790
<00:10:34.050>Because <00:10:34.329>if <00:10:34.609>we <00:10:34.890>refresh, <00:10:35.170>as <00:10:35.449>mentioned,

210
00:10:36.790 --> 00:10:39.850
<00:10:36.790>you <00:10:36.964>can <00:10:37.140>see <00:10:37.314>we <00:10:37.490>get <00:10:37.665>sizes, <00:10:37.839>we <00:10:38.015>get <00:10:38.189>time.

211
00:10:39.850 --> 00:10:42.090
<00:10:39.850>This <00:10:40.005>is <00:10:40.161>all <00:10:40.316>indication <00:10:40.472>that <00:10:40.627>it's <00:10:40.783>still <00:10:40.938>coming <00:10:41.094>from <00:10:41.250>the

212
00:10:42.090 --> 00:10:44.030
<00:10:42.090>server <00:10:42.370>and <00:10:42.650>we <00:10:42.930>don't <00:10:43.210>want <00:10:43.490>that.

213
00:10:45.450 --> 00:10:49.310
<00:10:45.450>All <00:10:45.590>right, <00:10:45.730>as <00:10:45.870>I <00:10:46.010>said, <00:10:46.150>event-driven. <00:10:46.290>So <00:10:46.430>we <00:10:46.570>add <00:10:46.710>another <00:10:46.850>event.

214
00:10:49.310 --> 00:10:51.310
<00:10:49.310>We're <00:10:49.465>going <00:10:49.621>to <00:10:49.776>listen <00:10:49.932>to <00:10:50.087>the <00:10:50.243>fetch <00:10:50.398>event <00:10:50.554>in <00:10:50.709>the

215
00:10:51.310 --> 00:10:52.330
<00:10:51.310>service <00:10:52.228>worker.

216
00:10:53.210 --> 00:10:56.330
<00:10:53.210>And <00:10:53.350>if <00:10:53.490>we <00:10:53.630>get <00:10:53.770>that <00:10:53.910>fetch <00:10:54.050>event <00:10:54.190>in <00:10:54.330>our <00:10:54.470>service <00:10:54.610>worker,

217
00:10:56.330 --> 00:10:59.470
<00:10:56.330>we're <00:10:56.505>going <00:10:56.680>to <00:10:56.855>look <00:10:57.030>at <00:10:57.205>the <00:10:57.380>request, <00:10:57.555>the <00:10:57.730>URL,

218
00:10:59.470 --> 00:11:00.970
<00:10:59.470>the <00:11:00.820>event.request.

219
00:11:01.310 --> 00:11:04.270
<00:11:01.310>And <00:11:01.449>if <00:11:01.589>we <00:11:01.729>can <00:11:01.869>find <00:11:02.010>it <00:11:02.150>in <00:11:02.290>one <00:11:02.430>of <00:11:02.569>our <00:11:02.709>caches,

220
00:11:04.270 --> 00:11:06.930
<00:11:04.270>we <00:11:04.397>only <00:11:04.524>have <00:11:04.651>one <00:11:04.779>at <00:11:04.906>this <00:11:05.033>point, <00:11:05.160>if <00:11:05.288>we <00:11:05.415>can <00:11:05.542>find <00:11:05.670>it,

221
00:11:06.930 --> 00:11:09.570
<00:11:06.930>we're <00:11:07.163>just <00:11:07.396>going <00:11:07.630>to <00:11:07.863>return <00:11:08.096>it <00:11:08.329>immediately.

222
00:11:09.770 --> 00:11:11.410
<00:11:09.770>So <00:11:09.944>that <00:11:10.120>means <00:11:10.295>it <00:11:10.470>doesn't <00:11:10.645>go <00:11:10.819>to <00:11:10.995>the <00:11:11.170>server,

223
00:11:11.410 --> 00:11:13.630
<00:11:11.410>but <00:11:11.565>the <00:11:11.721>service <00:11:11.876>worker <00:11:12.032>says, <00:11:12.187>well, <00:11:12.343>you <00:11:12.498>want <00:11:12.654>this <00:11:12.810>file?

224
00:11:13.630 --> 00:11:16.350
<00:11:13.630>I <00:11:13.830>already <00:11:14.030>have <00:11:14.230>it, <00:11:14.430>so <00:11:14.630>there <00:11:14.830>you <00:11:15.030>go.

225
00:11:17.390 --> 00:11:20.010
<00:11:17.390>As <00:11:17.517>you <00:11:17.644>can <00:11:17.771>see <00:11:17.899>in <00:11:18.026>the <00:11:18.153>else <00:11:18.280>statement, <00:11:18.408>if <00:11:18.535>it's <00:11:18.662>not <00:11:18.790>there,

226
00:11:20.010 --> 00:11:21.510
<00:11:20.010>it <00:11:20.280>will <00:11:20.550>go <00:11:20.819>to <00:11:21.090>the <00:11:21.360>server.

227
00:11:23.270 --> 00:11:24.350
<00:11:23.270>Let's <00:11:23.594>demo <00:11:23.918>that <00:11:24.242>as

228
00:11:24.350 --> 00:11:29.350
Well.

229
00:11:32.750 --> 00:11:33.950
<00:11:32.750>Let's <00:11:33.830>refresh

230
00:11:37.250 --> 00:11:41.090
<00:11:37.250>A <00:11:37.450>New <00:11:37.650>version <00:11:37.850>of <00:11:38.050>the <00:11:38.250>service <00:11:38.450>worker <00:11:38.650>again.

231
00:11:41.090 --> 00:11:43.610
<00:11:41.090>Press <00:11:41.790>OK, <00:11:42.490>and

232
00:11:43.610 --> 00:11:46.530
<00:11:43.610>It <00:11:44.310>Is <00:11:45.010>reloaded.

233
00:11:46.910 --> 00:11:48.790
<00:11:46.910>And <00:11:47.189>now <00:11:47.469>you <00:11:47.750>can <00:11:48.030>see, <00:11:48.310>hey,

234
00:11:48.790 --> 00:11:50.790
<00:11:48.790>it's <00:11:49.023>all <00:11:49.256>coming <00:11:49.490>from <00:11:49.723>the <00:11:49.956>service <00:11:50.189>worker.

235
00:11:51.490 --> 00:11:53.210
<00:11:51.490>And <00:11:51.690>if <00:11:51.890>you <00:11:52.090>look <00:11:52.290>at <00:11:52.490>the <00:11:52.690>response <00:11:52.890>times,

236
00:11:53.210 --> 00:11:56.730
<00:11:53.210>on <00:11:53.385>the <00:11:53.560>left-hand <00:11:53.735>side, <00:11:53.910>it's <00:11:54.085>going <00:11:54.260>to <00:11:54.435>the <00:11:54.610>server.

237
00:11:56.730 --> 00:12:00.670
<00:11:56.730>And <00:11:56.885>mind <00:11:57.041>you, <00:11:57.196>it's <00:11:57.352>my <00:11:57.507>local <00:11:57.663>host <00:11:57.818>on <00:11:57.974>my <00:11:58.130>MacBook,

238
00:12:00.670 --> 00:12:02.050
<00:12:00.670>so <00:12:00.980>it's <00:12:01.290>already <00:12:01.601>really <00:12:01.911>fast.

239
00:12:02.050 --> 00:12:03.850
<00:12:02.050>It's <00:12:02.750>35 <00:12:03.449>milliseconds.

240
00:12:03.850 --> 00:12:06.870
<00:12:03.850>But <00:12:04.025>if <00:12:04.200>it's <00:12:04.375>coming <00:12:04.550>from <00:12:04.725>the <00:12:04.900>service <00:12:05.075>worker <00:12:05.250>cache,

241
00:12:06.870 --> 00:12:08.870
<00:12:06.870>it's <00:12:07.336>only <00:12:07.803>18 <00:12:08.270>milliseconds.

242
00:12:09.350 --> 00:12:11.850
<00:12:09.350>Imagine <00:12:09.630>you <00:12:09.910>have <00:12:10.190>a <00:12:10.470>bad <00:12:10.750>connection,

243
00:12:12.850 --> 00:12:15.610
<00:12:12.850>that <00:12:13.083>35 <00:12:13.316>milliseconds <00:12:13.550>could <00:12:13.783>probably <00:12:14.016>be <00:12:14.250>four

244
00:12:15.610 --> 00:12:17.390
<00:12:15.610>or <00:12:16.076>five <00:12:16.543>seconds <00:12:17.010>maybe.

245
00:12:17.490 --> 00:12:20.550
<00:12:17.490>And <00:12:17.645>if <00:12:17.801>you're <00:12:17.956>loading <00:12:18.112>them <00:12:18.267>from <00:12:18.423>the <00:12:18.578>service <00:12:18.734>worker <00:12:18.890>cache,

246
00:12:20.550 --> 00:12:21.990
<00:12:20.550>it's <00:12:20.982>only <00:12:21.414>18 <00:12:21.846>milliseconds.

247
00:12:21.990 --> 00:12:26.370
<00:12:21.990>So <00:12:22.106>it's <00:12:22.223>a <00:12:22.340>big <00:12:22.456>win <00:12:22.573>already. <00:12:22.690>And <00:12:22.806>you <00:12:22.923>get <00:12:23.040>a <00:12:23.156>feeling <00:12:23.273>like <00:12:23.390>this.

248
00:12:32.740 --> 00:12:34.180
<00:12:32.740>Well, <00:12:32.999>maybe <00:12:33.258>not <00:12:33.517>completely <00:12:33.776>like <00:12:34.036>that,

249
00:12:34.180 --> 00:12:37.160
<00:12:34.180>but <00:12:34.335>it <00:12:34.491>gave <00:12:34.646>me <00:12:34.802>a <00:12:34.957>chance <00:12:35.113>to <00:12:35.268>drink <00:12:35.424>some <00:12:35.579>water.

250
00:12:38.880 --> 00:12:42.320
<00:12:38.880>We <00:12:39.160>have <00:12:39.439>those <00:12:39.720>files <00:12:40.000>cached <00:12:40.280>now,

251
00:12:42.320 --> 00:12:45.200
<00:12:42.320>but <00:12:42.600>what <00:12:42.880>if <00:12:43.160>you <00:12:43.440>are <00:12:43.720>offline?

252
00:12:46.360 --> 00:12:48.100
<00:12:46.360>You'd <00:12:46.560>still <00:12:46.760>get <00:12:46.960>that <00:12:47.160>down <00:12:47.360>as <00:12:47.560>well, <00:12:47.760>right?

253
00:12:48.100 --> 00:12:49.640
<00:12:48.100>That's <00:12:48.446>not <00:12:48.793>what <00:12:49.139>we <00:12:49.486>want.

254
00:12:49.780 --> 00:12:54.280
<00:12:49.780>So <00:12:49.954>if <00:12:50.130>I'm <00:12:50.305>going <00:12:50.480>to <00:12:50.655>refresh <00:12:50.829>this <00:12:51.005>page <00:12:51.180>again,

255
00:12:54.280 --> 00:12:56.460
<00:12:54.280>it <00:12:54.630>works <00:12:54.980>for <00:12:55.329>this <00:12:55.680>page.

256
00:12:56.460 --> 00:12:59.580
<00:12:56.460>I <00:12:56.600>can <00:12:56.740>go <00:12:56.880>to <00:12:57.020>that <00:12:57.160>page, <00:12:57.300>because <00:12:57.440>I'm <00:12:57.580>still <00:12:57.720>online. <00:12:57.860>That's

257
00:12:59.580 --> 00:13:03.130
Fine.

258
00:13:03.190 --> 00:13:06.750
<00:13:03.190>But <00:13:03.345>if <00:13:03.501>I <00:13:03.656>say <00:13:03.812>I'm <00:13:03.967>going <00:13:04.123>to <00:13:04.278>be <00:13:04.434>offline <00:13:04.590>now,

259
00:13:06.750 --> 00:13:09.750
<00:13:06.750>and <00:13:06.983>I'm <00:13:07.216>going <00:13:07.450>back <00:13:07.683>to <00:13:07.916>the <00:13:08.150>page,

260
00:13:10.330 --> 00:13:13.410
<00:13:10.330>I <00:13:10.680>can <00:13:11.030>refresh <00:13:11.380>this <00:13:11.730>page,

261
00:13:13.410 --> 00:13:16.990
<00:13:13.410>because <00:13:13.565>this <00:13:13.721>is <00:13:13.876>in <00:13:14.032>our <00:13:14.187>static <00:13:14.343>cache, <00:13:14.498>the <00:13:14.654>first <00:13:14.810>page.

262
00:13:17.810 --> 00:13:21.690
<00:13:17.810>But <00:13:17.926>if <00:13:18.043>I <00:13:18.160>go <00:13:18.276>to <00:13:18.393>another <00:13:18.510>page <00:13:18.626>on <00:13:18.743>the <00:13:18.859>website, <00:13:18.976>it's <00:13:19.093>like, <00:13:19.209>eh,

263
00:13:21.690 --> 00:13:23.010
<00:13:21.690>can't <00:13:22.284>be <00:13:22.878>reached.

264
00:13:23.510 --> 00:13:26.050
<00:13:23.510>And <00:13:23.626>even <00:13:23.743>worse, <00:13:23.860>you <00:13:23.976>don't <00:13:24.093>get <00:13:24.210>the <00:13:24.326>down <00:13:24.443>as <00:13:24.560>well <00:13:24.676>to <00:13:24.793>play <00:13:24.910>with.

265
00:13:26.150 --> 00:13:29.950
<00:13:26.150>So <00:13:26.305>that's <00:13:26.461>not <00:13:26.616>what <00:13:26.772>we <00:13:26.927>want, <00:13:27.083>right? <00:13:27.238>Let's <00:13:27.394>fix <00:13:27.550>this.

266
00:13:29.950 --> 00:13:31.330
<00:13:29.950>You <00:13:30.198>can <00:13:30.446>see <00:13:30.695>the <00:13:30.943>red <00:13:31.192>here,

267
00:13:31.330 --> 00:13:33.390
<00:13:31.330>it's <00:13:31.563>not <00:13:31.796>getting <00:13:32.030>fetched <00:13:32.263>from <00:13:32.496>the <00:13:32.730>server,

268
00:13:33.390 --> 00:13:35.250
<00:13:33.390>because <00:13:33.856>we <00:13:34.323>are <00:13:34.790>offline.

269
00:13:36.790 --> 00:13:39.290
<00:13:36.790>All <00:13:36.990>right. <00:13:37.189>Let's <00:13:37.390>take <00:13:37.589>it <00:13:37.790>step <00:13:37.990>by <00:13:38.189>step.

270
00:13:39.290 --> 00:13:41.910
<00:13:39.290>First, <00:13:39.464>we're <00:13:39.640>going <00:13:39.814>to <00:13:39.990>create <00:13:40.165>an <00:13:40.339>offline <00:13:40.515>HTML <00:13:40.689>page,

271
00:13:41.910 --> 00:13:45.770
<00:13:41.910>just <00:13:42.084>saying, <00:13:42.260>well, <00:13:42.435>sorry, <00:13:42.610>it <00:13:42.785>seems <00:13:42.959>you <00:13:43.135>are <00:13:43.310>offline.

272
00:13:46.550 --> 00:13:48.570
<00:13:46.550>Maybe <00:13:46.705>why <00:13:46.861>don't <00:13:47.016>you <00:13:47.172>try <00:13:47.327>one <00:13:47.483>of <00:13:47.638>our <00:13:47.794>other <00:13:47.949>pages?

273
00:13:48.570 --> 00:13:51.390
<00:13:48.570>And <00:13:48.725>that <00:13:48.881>other <00:13:49.036>page <00:13:49.192>now <00:13:49.347>is <00:13:49.503>only <00:13:49.658>the <00:13:49.814>home <00:13:49.970>page.

274
00:13:53.080 --> 00:13:54.460
<00:13:53.080>All <00:13:53.287>right, <00:13:53.494>we're <00:13:53.701>going <00:13:53.908>to <00:13:54.115>add <00:13:54.322>that

275
00:13:54.460 --> 00:13:56.100
<00:13:54.460>to <00:13:54.810>the <00:13:55.160>service <00:13:55.510>worker <00:13:55.860>file,

276
00:13:56.100 --> 00:13:58.120
<00:13:56.100>because <00:13:56.255>we <00:13:56.411>want <00:13:56.566>to <00:13:56.722>have <00:13:56.877>that <00:13:57.033>in <00:13:57.188>our <00:13:57.344>static <00:13:57.500>files

277
00:13:58.120 --> 00:14:00.120
<00:13:58.120>to <00:13:58.400>be <00:13:58.680>available <00:13:58.960>at <00:13:59.240>all <00:13:59.520>points.

278
00:14:00.120 --> 00:14:04.160
<00:14:00.120>So <00:14:00.295>we <00:14:00.470>add <00:14:00.645>it, <00:14:00.820>but <00:14:00.995>also <00:14:01.170>update <00:14:01.345>this <00:14:01.520>version.

279
00:14:06.880 --> 00:14:09.760
<00:14:06.880>You've <00:14:07.113>seen <00:14:07.346>this <00:14:07.580>fetch <00:14:07.813>event <00:14:08.046>by <00:14:08.280>now.

280
00:14:10.360 --> 00:14:11.840
<00:14:10.360>If <00:14:10.550>it's <00:14:10.740>in <00:14:10.930>the <00:14:11.121>cache, <00:14:11.311>we <00:14:11.501>return <00:14:11.692>it,

281
00:14:11.840 --> 00:14:13.080
<00:14:11.840>otherwise <00:14:12.063>we <00:14:12.286>go <00:14:12.509>to <00:14:12.732>the <00:14:12.956>server.

282
00:14:13.080 --> 00:14:17.300
<00:14:13.080>But <00:14:13.196>what <00:14:13.313>if <00:14:13.430>the <00:14:13.546>server <00:14:13.663>is <00:14:13.780>not <00:14:13.896>there, <00:14:14.013>if <00:14:14.130>we <00:14:14.246>get <00:14:14.363>an <00:14:14.480>error?

283
00:14:17.380 --> 00:14:21.320
<00:14:17.380>Well, <00:14:17.555>we're <00:14:17.730>going <00:14:17.905>to <00:14:18.080>add <00:14:18.255>a <00:14:18.430>cache <00:14:18.605>to <00:14:18.780>that.

284
00:14:22.600 --> 00:14:26.340
<00:14:22.600>And <00:14:22.755>if <00:14:22.911>it's <00:14:23.066>coming <00:14:23.222>in <00:14:23.377>this <00:14:23.533>fallback, <00:14:23.688>this <00:14:23.844>error <00:14:24.000>state,

285
00:14:26.340 --> 00:14:28.040
<00:14:26.340>we're <00:14:26.573>going <00:14:26.806>to <00:14:27.040>open <00:14:27.273>our <00:14:27.506>static <00:14:27.740>cache

286
00:14:28.620 --> 00:14:31.880
<00:14:28.620>and <00:14:28.795>we're <00:14:28.970>going <00:14:29.145>to <00:14:29.320>show <00:14:29.495>the <00:14:29.670>offline <00:14:29.845>HTML <00:14:30.020>page.

287
00:14:33.120 --> 00:14:36.460
<00:14:33.120>However, <00:14:33.320>the <00:14:33.520>request <00:14:33.720>will <00:14:33.920>probably <00:14:34.120>not <00:14:34.320>only <00:14:34.520>be,

288
00:14:36.460 --> 00:14:37.980
<00:14:36.460>for <00:14:36.733>instance, <00:14:37.007>for <00:14:37.280>an <00:14:37.554>HTML <00:14:37.828>file,

289
00:14:37.980 --> 00:14:42.040
<00:14:37.980>but <00:14:38.107>it <00:14:38.234>could <00:14:38.361>also <00:14:38.489>be <00:14:38.616>for <00:14:38.743>a <00:14:38.870>CSS <00:14:38.998>or <00:14:39.125>a <00:14:39.252>font <00:14:39.380>file

290
00:14:42.040 --> 00:14:43.120
<00:14:42.040>or <00:14:43.012>whatever.

291
00:14:43.120 --> 00:14:47.460
<00:14:43.120>We <00:14:43.260>don't <00:14:43.400>want <00:14:43.540>to <00:14:43.680>return <00:14:43.820>every <00:14:43.960>time <00:14:44.100>that <00:14:44.240>offline <00:14:44.380>HTML <00:14:44.520>file.

292
00:14:47.460 --> 00:14:50.120
<00:14:47.460>So <00:14:47.615>we're <00:14:47.771>going <00:14:47.926>to <00:14:48.082>add <00:14:48.237>something <00:14:48.393>extra <00:14:48.548>to <00:14:48.704>make <00:14:48.860>sure

293
00:14:50.120 --> 00:14:52.860
<00:14:50.120>that <00:14:50.353>we <00:14:50.586>only <00:14:50.820>return <00:14:51.053>the <00:14:51.286>offline <00:14:51.520>HTML

294
00:14:53.460 --> 00:14:55.660
<00:14:53.460>when <00:14:53.926>the <00:14:54.393>request <00:14:54.860>is

295
00:14:55.660 --> 00:14:58.560
<00:14:55.660>for <00:14:56.010>a <00:14:56.360>text <00:14:56.709>HTML <00:14:57.060>document.

296
00:15:00.480 --> 00:15:05.210
<00:15:00.480>All <00:15:00.760>right, <00:15:01.040>demo <00:15:01.320>that. <00:15:01.600>So <00:15:01.880>refresh.

297
00:15:05.270 --> 00:15:07.210
<00:15:05.270>We <00:15:05.550>get <00:15:05.829>a <00:15:06.110>new <00:15:06.390>service <00:15:06.670>worker.

298
00:15:09.100 --> 00:15:11.620
<00:15:09.100>Yes, <00:15:09.333>let's <00:15:09.566>reload <00:15:09.800>this <00:15:10.033>page <00:15:10.266>as <00:15:10.500>well.

299
00:15:15.090 --> 00:15:16.790
<00:15:15.090>And <00:15:15.245>now <00:15:15.401>you <00:15:15.556>can <00:15:15.712>see <00:15:15.867>I <00:15:16.023>have <00:15:16.178>a <00:15:16.334>static <00:15:16.490>V1

300
00:15:16.790 --> 00:15:17.970
<00:15:16.790>with <00:15:17.144>the <00:15:17.498>original <00:15:17.852>files,

301
00:15:17.970 --> 00:15:20.390
<00:15:17.970>but <00:15:18.097>I <00:15:18.224>also <00:15:18.351>have <00:15:18.479>a <00:15:18.606>static <00:15:18.733>V2 <00:15:18.860>now <00:15:18.988>with <00:15:19.115>the <00:15:19.242>extra <00:15:19.370>file,

302
00:15:20.390 --> 00:15:22.350
<00:15:20.390>the <00:15:21.090>offline.html <00:15:21.790>file.

303
00:15:23.010 --> 00:15:26.010
<00:15:23.010>Let's <00:15:23.476>go <00:15:23.943>offline. <00:15:24.410>All

304
00:15:26.010 --> 00:15:29.830
<00:15:26.010>Right, <00:15:26.360>And <00:15:26.710>there <00:15:27.060>we <00:15:27.410>go.

305
00:15:29.830 --> 00:15:31.650
<00:15:29.830>We <00:15:30.063>didn't <00:15:30.296>have <00:15:30.530>any <00:15:30.763>files <00:15:30.996>for <00:15:31.230>that,

306
00:15:31.650 --> 00:15:35.270
<00:15:31.650>but <00:15:31.824>it's <00:15:32.000>not <00:15:32.175>showing <00:15:32.350>a <00:15:32.525>weird <00:15:32.699>error <00:15:32.875>screen, <00:15:33.050>right?

307
00:15:35.270 --> 00:15:38.530
<00:15:35.270>It <00:15:35.425>might <00:15:35.581>be <00:15:35.736>not <00:15:35.892>that <00:15:36.047>useful <00:15:36.203>yet, <00:15:36.358>but <00:15:36.514>it's <00:15:36.670>good.

308
00:15:40.190 --> 00:15:44.230
<00:15:40.190>Another <00:15:40.330>thing <00:15:40.470>is <00:15:40.610>we <00:15:40.750>want <00:15:40.890>to <00:15:41.030>have <00:15:41.170>dynamic <00:15:41.310>cache, <00:15:41.450>not <00:15:41.590>only

309
00:15:44.230 --> 00:15:46.490
<00:15:44.230>what <00:15:44.580>we <00:15:44.930>decide <00:15:45.280>up <00:15:45.630>front,

310
00:15:46.490 --> 00:15:50.290
<00:15:46.490>but <00:15:46.630>the <00:15:46.770>user <00:15:46.910>is <00:15:47.050>navigating <00:15:47.190>our <00:15:47.330>pages, <00:15:47.470>so <00:15:47.610>let's <00:15:47.750>cache <00:15:47.890>them

311
00:15:50.290 --> 00:15:51.370
<00:15:50.290>as <00:15:51.262>well.

312
00:15:51.690 --> 00:15:55.510
<00:15:51.690>So <00:15:51.830>I'm <00:15:51.970>going <00:15:52.110>to <00:15:52.250>introduce <00:15:52.390>a <00:15:52.530>variable <00:15:52.670>called <00:15:52.810>dynamic <00:15:52.950>cache <00:15:53.090>in

313
00:15:55.510 --> 00:15:57.130
<00:15:55.510>the <00:15:55.976>service <00:15:56.443>worker <00:15:56.910>file.

314
00:15:57.710 --> 00:16:02.050
<00:15:57.710>And <00:15:57.826>we <00:15:57.943>have <00:15:58.060>this <00:15:58.176>fetch <00:15:58.293>event <00:15:58.410>now <00:15:58.526>with <00:15:58.643>a <00:15:58.760>cache <00:15:58.876>inside <00:15:58.993>of <00:15:59.110>it,

315
00:16:02.050 --> 00:16:05.130
<00:16:02.050>but <00:16:02.250>we're <00:16:02.449>going <00:16:02.650>to <00:16:02.849>put <00:16:03.050>something <00:16:03.250>in <00:16:03.449>between,

316
00:16:05.130 --> 00:16:07.930
<00:16:05.130>because <00:16:05.285>if <00:16:05.441>we <00:16:05.596>get <00:16:05.752>the <00:16:05.907>fetch <00:16:06.063>result <00:16:06.218>from <00:16:06.374>the <00:16:06.530>server,

317
00:16:07.930 --> 00:16:10.330
<00:16:07.930>we <00:16:08.085>now <00:16:08.241>want <00:16:08.396>to <00:16:08.552>put <00:16:08.707>it <00:16:08.863>in <00:16:09.018>our <00:16:09.174>dynamic <00:16:09.329>cache,

318
00:16:10.330 --> 00:16:11.970
<00:16:10.330>and <00:16:10.610>that's <00:16:10.890>what <00:16:11.170>we <00:16:11.450>do <00:16:11.730>here.

319
00:16:11.970 --> 00:16:15.030
<00:16:11.970>I <00:16:12.203>get <00:16:12.436>the <00:16:12.670>response <00:16:12.903>of <00:16:13.136>the <00:16:13.370>server.

320
00:16:15.210 --> 00:16:16.730
<00:16:15.210>I'm <00:16:15.438>going <00:16:15.666>to <00:16:15.894>open <00:16:16.122>the <00:16:16.350>dynamic <00:16:16.578>cache,

321
00:16:16.730 --> 00:16:20.190
<00:16:16.730>and <00:16:16.857>I'm <00:16:16.984>going <00:16:17.111>to <00:16:17.239>put <00:16:17.366>a <00:16:17.493>copy <00:16:17.620>of <00:16:17.748>that <00:16:17.875>response <00:16:18.002>in <00:16:18.130>there.

322
00:16:20.190 --> 00:16:24.470
<00:16:20.190>If <00:16:20.365>I <00:16:20.540>wouldn't <00:16:20.715>use <00:16:20.890>.clone, <00:16:21.065>I <00:16:21.240>wouldn't <00:16:21.415>be <00:16:21.590>able

323
00:16:24.470 --> 00:16:26.830
<00:16:24.470>to <00:16:24.670>return <00:16:24.870>the <00:16:25.070>response <00:16:25.270>to <00:16:25.470>the <00:16:25.670>browser <00:16:25.870>itself.

324
00:16:26.830 --> 00:16:29.270
<00:16:26.830>So <00:16:26.970>that's <00:16:27.110>why <00:16:27.250>we <00:16:27.390>need <00:16:27.530>to <00:16:27.670>do <00:16:27.810>a <00:16:27.950>copy <00:16:28.090>of <00:16:28.230>it,

325
00:16:29.270 --> 00:16:33.440
<00:16:29.270>a <00:16:29.503>clone. <00:16:29.736>And <00:16:29.970>let's <00:16:30.203>demo <00:16:30.436>that <00:16:30.670>as

326
00:16:33.440 --> 00:16:37.080
Well.

327
00:16:37.180 --> 00:16:39.680
<00:16:37.180>A <00:16:37.354>new <00:16:37.530>service <00:16:37.704>worker, <00:16:37.880>I'm <00:16:38.055>going <00:16:38.229>to <00:16:38.405>press <00:16:38.579>OK,

328
00:16:40.420 --> 00:16:42.280
<00:16:40.420>and <00:16:40.770>let's <00:16:41.120>visit <00:16:41.469>some <00:16:41.819>pages.

329
00:16:46.660 --> 00:16:48.000
<00:16:46.660>So <00:16:46.961>for <00:16:47.263>instance, <00:16:47.564>this <00:16:47.866>one.

330
00:16:48.000 --> 00:16:49.740
<00:16:48.000>I <00:16:48.233>don't <00:16:48.466>know <00:16:48.700>if <00:16:48.933>you <00:16:49.166>notice <00:16:49.400>it,

331
00:16:49.740 --> 00:16:52.480
<00:16:49.740>but <00:16:49.915>dynamic <00:16:50.090>v1 <00:16:50.265>is <00:16:50.440>now <00:16:50.615>there <00:16:50.790>with <00:16:50.965>the <00:16:51.140>image

332
00:16:52.480 --> 00:16:54.800
<00:16:52.480>and <00:16:52.713>the <00:16:52.946>HTML <00:16:53.180>that's <00:16:53.413>on <00:16:53.646>that <00:16:53.880>page.

333
00:16:55.720 --> 00:16:59.900
<00:16:55.720>Maybe <00:16:55.860>add <00:16:56.000>another <00:16:56.140>one, <00:16:56.280>there <00:16:56.420>you <00:16:56.560>go. <00:16:56.700>That's <00:16:56.840>what <00:16:56.980>we <00:16:57.120>want.

334
00:16:59.900 --> 00:17:02.800
<00:16:59.900>We <00:17:00.133>now <00:17:00.366>have <00:17:00.600>access <00:17:00.833>to <00:17:01.066>those <00:17:01.300>files.

335
00:17:06.090 --> 00:17:10.390
<00:17:06.089>So <00:17:06.217>if <00:17:06.344>I <00:17:06.471>go <00:17:06.599>to <00:17:06.726>the <00:17:06.853>service <00:17:06.980>worker <00:17:07.108>and <00:17:07.235>go <00:17:07.362>offline <00:17:07.490>now,

336
00:17:10.390 --> 00:17:11.490
<00:17:10.390>and <00:17:10.531>I <00:17:10.672>go <00:17:10.814>back <00:17:10.955>to <00:17:11.097>the <00:17:11.238>home <00:17:11.380>page,

337
00:17:11.490 --> 00:17:14.290
<00:17:11.490>this <00:17:11.617>is <00:17:11.744>still <00:17:11.871>in <00:17:11.999>our <00:17:12.126>static <00:17:12.253>cache, <00:17:12.380>so <00:17:12.508>as <00:17:12.635>I <00:17:12.762>refresh <00:17:12.890>it,

338
00:17:14.290 --> 00:17:17.270
<00:17:14.290>it's <00:17:14.464>still <00:17:14.639>there, <00:17:14.815>but <00:17:14.990>go <00:17:15.165>to <00:17:15.339>this <00:17:15.514>file <00:17:15.690>now.

339
00:17:17.370 --> 00:17:20.250
<00:17:17.369>Now <00:17:17.544>we <00:17:17.719>have <00:17:17.895>it. <00:17:18.069>We <00:17:18.244>don't <00:17:18.419>show <00:17:18.594>the <00:17:18.770>offline.

340
00:17:20.250 --> 00:17:23.870
<00:17:20.250>And <00:17:20.390>the <00:17:20.530>second <00:17:20.670>one <00:17:20.810>is <00:17:20.950>also <00:17:21.089>fetched <00:17:21.230>in <00:17:21.369>our <00:17:21.510>dynamic <00:17:21.650>cache.

341
00:17:24.150 --> 00:17:26.510
<00:17:24.150>If <00:17:24.290>we <00:17:24.430>go <00:17:24.570>to <00:17:24.710>the <00:17:24.850>third, <00:17:24.990>you <00:17:25.130>still <00:17:25.270>get <00:17:25.410>the <00:17:25.550>error

342
00:17:26.510 --> 00:17:28.250
<00:17:26.510>because <00:17:26.859>you <00:17:27.210>weren't <00:17:27.560>there <00:17:27.910>yet.

343
00:17:28.810 --> 00:17:32.550
<00:17:28.810>Already <00:17:28.965>a <00:17:29.121>step <00:17:29.276>better <00:17:29.432>and <00:17:29.587>an <00:17:29.743>improvement <00:17:29.898>for <00:17:30.054>the <00:17:30.210>user.

344
00:17:34.230 --> 00:17:37.110
<00:17:34.230>But <00:17:34.357>we <00:17:34.484>now <00:17:34.611>have <00:17:34.739>a <00:17:34.866>static <00:17:34.993>v1 <00:17:35.120>and <00:17:35.248>a <00:17:35.375>static <00:17:35.502>v2 <00:17:35.630>there.

345
00:17:37.110 --> 00:17:39.130
<00:17:37.110>We <00:17:37.389>don't <00:17:37.669>really <00:17:37.949>know <00:17:38.229>which <00:17:38.510>one

346
00:17:39.130 --> 00:17:41.110
<00:17:39.130>of <00:17:39.330>the <00:17:39.530>static <00:17:39.730>caches <00:17:39.930>the <00:17:40.130>browser <00:17:40.330>will <00:17:40.530>use.

347
00:17:41.110 --> 00:17:43.810
<00:17:41.110>So <00:17:41.343>if <00:17:41.576>you <00:17:41.810>update <00:17:42.043>CSS, <00:17:42.276>for <00:17:42.510>instance,

348
00:17:43.810 --> 00:17:46.330
<00:17:43.810>you <00:17:43.965>might <00:17:44.121>get <00:17:44.276>old <00:17:44.432>styling <00:17:44.587>instead <00:17:44.743>of <00:17:44.898>the <00:17:45.054>new <00:17:45.210>one.

349
00:17:46.570 --> 00:17:48.890
<00:17:46.570>So <00:17:46.850>let's <00:17:47.129>clean <00:17:47.409>that <00:17:47.689>mess <00:17:47.970>up.

350
00:17:50.520 --> 00:17:52.960
<00:17:50.520>As <00:17:50.720>I <00:17:50.920>said, <00:17:51.120>we <00:17:51.320>now <00:17:51.520>have <00:17:51.720>these <00:17:51.920>three.

351
00:17:53.460 --> 00:17:57.520
<00:17:53.460>What <00:17:53.615>we <00:17:53.771>now <00:17:53.926>can <00:17:54.082>do <00:17:54.237>is <00:17:54.393>add <00:17:54.548>another <00:17:54.704>event <00:17:54.860>listener,

352
00:17:58.400 --> 00:17:59.860
<00:17:58.400>and <00:17:58.619>we're <00:17:58.838>going <00:17:59.057>to <00:17:59.276>listen <00:17:59.495>to <00:17:59.714>the...

353
00:17:59.860 --> 00:18:01.240
<00:17:59.860>Sorry, <00:18:00.170>we're <00:18:00.481>not <00:18:00.791>adding <00:18:01.102>it.

354
00:18:01.240 --> 00:18:04.260
<00:18:01.240>We <00:18:01.473>already <00:18:01.706>had <00:18:01.940>it, <00:18:02.173>the <00:18:02.406>activate <00:18:02.640>event.

355
00:18:04.860 --> 00:18:07.520
<00:18:04.860>But <00:18:05.034>we're <00:18:05.209>going <00:18:05.385>to <00:18:05.560>put <00:18:05.735>some <00:18:05.909>stuff <00:18:06.084>in <00:18:06.260>between.

356
00:18:07.760 --> 00:18:10.640
<00:18:07.760>And <00:18:07.900>what <00:18:08.040>we're <00:18:08.180>going <00:18:08.320>to <00:18:08.460>do <00:18:08.600>is <00:18:08.740>we're <00:18:08.879>going <00:18:09.020>to <00:18:09.160>match

357
00:18:11.280 --> 00:18:14.500
<00:18:11.280>if <00:18:11.455>the <00:18:11.629>key, <00:18:11.805>say <00:18:11.980>the <00:18:12.155>version <00:18:12.330>of <00:18:12.504>the <00:18:12.680>static

358
00:18:14.500 --> 00:18:16.100
<00:18:14.500>or <00:18:14.966>the <00:18:15.433>dynamic <00:18:15.900>cache,

359
00:18:16.100 --> 00:18:19.520
<00:18:16.100>matches <00:18:16.274>the <00:18:16.449>variable <00:18:16.625>we <00:18:16.800>have <00:18:16.975>in <00:18:17.149>our <00:18:17.324>service <00:18:17.500>worker.

360
00:18:19.520 --> 00:18:22.960
<00:18:19.520>If <00:18:19.800>they <00:18:20.080>don't <00:18:20.360>match... <00:18:20.639>For <00:18:20.920>instance,

361
00:18:22.960 --> 00:18:24.640
<00:18:22.960>now <00:18:23.310>we <00:18:23.660>have <00:18:24.010>static <00:18:24.360>v2,

362
00:18:24.640 --> 00:18:27.620
<00:18:24.640>but <00:18:24.795>I <00:18:24.951>do <00:18:25.106>have <00:18:25.262>a <00:18:25.417>cache <00:18:25.573>that's <00:18:25.728>called <00:18:25.884>static <00:18:26.040>v1.

363
00:18:27.620 --> 00:18:30.200
<00:18:27.620>If <00:18:27.794>they <00:18:27.969>don't <00:18:28.145>match, <00:18:28.320>we <00:18:28.495>just <00:18:28.669>delete <00:18:28.844>the <00:18:29.020>cache.

364
00:18:30.260 --> 00:18:33.740
<00:18:30.260>In <00:18:30.387>that <00:18:30.514>way, <00:18:30.641>we <00:18:30.769>can <00:18:30.896>clean <00:18:31.023>up <00:18:31.150>our <00:18:31.278>mess <00:18:31.405>in <00:18:31.532>that <00:18:31.660>case

365
00:18:33.740 --> 00:18:36.320
<00:18:33.740>and <00:18:33.915>make <00:18:34.090>sure <00:18:34.265>that <00:18:34.440>the <00:18:34.615>user <00:18:34.790>always <00:18:34.965>gets <00:18:35.140>the

366
00:18:36.320 --> 00:18:37.740
<00:18:36.320>freshest <00:18:37.598>content.

367
00:18:39.340 --> 00:18:40.540
<00:18:39.340>Again, <00:18:39.699>let's <00:18:40.060>look <00:18:40.420>at

368
00:18:40.540 --> 00:18:44.790
that.

369
00:18:44.790 --> 00:18:48.670
<00:18:44.790>New <00:18:45.023>service <00:18:45.256>worker, <00:18:45.490>OK. <00:18:45.723>Buff, <00:18:45.956>it's <00:18:46.190>gone.

370
00:18:48.670 --> 00:18:52.730
<00:18:48.670>Static <00:18:48.810>v1 <00:18:48.950>is <00:18:49.090>no <00:18:49.230>longer <00:18:49.370>there. <00:18:49.510>And <00:18:49.650>that's <00:18:49.790>what <00:18:49.930>we <00:18:50.070>want.

371
00:18:52.730 --> 00:18:55.330
<00:18:52.730>Another <00:18:53.430>improvement, <00:18:54.130>good.

372
00:18:56.270 --> 00:18:58.850
<00:18:56.270>All <00:18:56.503>right, <00:18:56.736>we're <00:18:56.970>only <00:18:57.203>caching <00:18:57.436>now <00:18:57.670>files

373
00:18:58.850 --> 00:19:01.830
<00:18:58.850>where <00:18:59.199>the <00:18:59.550>user <00:18:59.899>has <00:19:00.250>gone.

374
00:19:02.370 --> 00:19:05.750
<00:19:02.370>But <00:19:02.497>wouldn't <00:19:02.624>it <00:19:02.751>be <00:19:02.879>nice <00:19:03.006>if <00:19:03.133>we <00:19:03.260>could <00:19:03.388>already <00:19:03.515>get <00:19:03.642>some <00:19:03.770>files

375
00:19:05.750 --> 00:19:10.390
<00:19:05.750>up <00:19:05.905>front <00:19:06.061>to <00:19:06.216>maybe <00:19:06.372>predict <00:19:06.527>what <00:19:06.683>the <00:19:06.838>user <00:19:06.994>is <00:19:07.150>doing?

376
00:19:11.050 --> 00:19:13.130
<00:19:11.050>We <00:19:11.399>have <00:19:11.750>prefetch <00:19:12.100>for <00:19:12.450>that.

377
00:19:13.970 --> 00:19:18.010
<00:19:13.970>And <00:19:14.145>prefetch <00:19:14.320>is, <00:19:14.495>as <00:19:14.670>I <00:19:14.845>said, <00:19:15.020>essentially <00:19:15.195>anticipating <00:19:15.370>on

378
00:19:18.010 --> 00:19:20.930
<00:19:18.010>what <00:19:18.243>the <00:19:18.476>user <00:19:18.710>might <00:19:18.943>want <00:19:19.176>to <00:19:19.410>visit.

379
00:19:20.930 --> 00:19:22.490
<00:19:20.930>So <00:19:21.280>we <00:19:21.630>already <00:19:21.980>go <00:19:22.330>download

380
00:19:22.490 --> 00:19:26.560
<00:19:22.490>that <00:19:23.890>stuff.

381
00:19:26.780 --> 00:19:29.500
<00:19:26.780>And <00:19:26.920>a <00:19:27.060>way <00:19:27.200>to <00:19:27.340>do <00:19:27.480>it <00:19:27.620>is, <00:19:27.760>for <00:19:27.899>instance, <00:19:28.040>like <00:19:28.180>this.

382
00:19:29.500 --> 00:19:33.240
<00:19:29.500>We <00:19:29.780>add <00:19:30.060>a <00:19:30.340>link <00:19:30.620>meta <00:19:30.900>tag

383
00:19:33.240 --> 00:19:35.620
<00:19:33.240>with <00:19:33.706>the <00:19:34.173>rel <00:19:34.640>prefetch.

384
00:19:35.620 --> 00:19:38.960
<00:19:35.620>And <00:19:35.747>we <00:19:35.874>put <00:19:36.001>the <00:19:36.129>file <00:19:36.256>in <00:19:36.383>there <00:19:36.510>that <00:19:36.638>we <00:19:36.765>want <00:19:36.892>to <00:19:37.020>prefetch.

385
00:19:40.580 --> 00:19:43.140
<00:19:40.580>This <00:19:40.754>is <00:19:40.929>nice <00:19:41.105>if <00:19:41.280>it's <00:19:41.455>for <00:19:41.629>one <00:19:41.804>HTML <00:19:41.980>file,

386
00:19:43.140 --> 00:19:46.320
<00:19:43.140>but <00:19:43.340>what <00:19:43.540>if <00:19:43.740>you <00:19:43.940>have <00:19:44.140>very <00:19:44.340>many <00:19:44.540>files?

387
00:19:46.320 --> 00:19:49.360
<00:19:46.320>That's <00:19:46.600>probably <00:19:46.879>not <00:19:47.159>the <00:19:47.439>greatest <00:19:47.720>solution.

388
00:19:49.780 --> 00:19:52.980
<00:19:49.780>And <00:19:49.980>also <00:19:50.180>look <00:19:50.379>at <00:19:50.580>the <00:19:50.780>support <00:19:50.980>for <00:19:51.180>this.

389
00:19:53.880 --> 00:19:57.180
<00:19:53.880>Prefetching <00:19:54.035>is <00:19:54.191>really <00:19:54.346>nice <00:19:54.502>if <00:19:54.657>you're <00:19:54.813>on <00:19:54.968>a <00:19:55.124>mobile <00:19:55.280>device,

390
00:19:57.180 --> 00:19:58.920
<00:19:57.180>for <00:19:57.646>instance, <00:19:58.113>and <00:19:58.580>traveling.

391
00:20:00.140 --> 00:20:02.720
<00:20:00.140>But <00:20:00.373>yeah, <00:20:00.606>Safari <00:20:00.840>on <00:20:01.073>iOS, <00:20:01.306>no <00:20:01.540>go.

392
00:20:02.720 --> 00:20:06.060
<00:20:02.720>So <00:20:02.920>you're <00:20:03.120>excluding <00:20:03.320>maybe, <00:20:03.520>I <00:20:03.720>don't <00:20:03.920>know <00:20:04.120>exactly

393
00:20:06.060 --> 00:20:09.260
<00:20:06.060>what <00:20:06.215>the <00:20:06.371>ratio <00:20:06.526>is, <00:20:06.682>but <00:20:06.837>maybe <00:20:06.993>40% <00:20:07.148>of <00:20:07.304>the <00:20:07.460>users.

394
00:20:10.060 --> 00:20:14.200
<00:20:10.060>So <00:20:10.187>let's <00:20:10.314>see <00:20:10.441>if <00:20:10.569>we <00:20:10.696>have <00:20:10.823>a <00:20:10.950>better <00:20:11.078>way, <00:20:11.205>an <00:20:11.332>optimized <00:20:11.460>way.

395
00:20:16.970 --> 00:20:21.210
<00:20:16.970>What <00:20:17.125>we <00:20:17.281>can <00:20:17.436>do <00:20:17.592>is, <00:20:17.747>on <00:20:17.903>the <00:20:18.058>page <00:20:18.214>we're <00:20:18.370>at,

396
00:20:21.210 --> 00:20:24.930
<00:20:21.210>we <00:20:21.385>can <00:20:21.560>do <00:20:21.735>a <00:20:21.910>query <00:20:22.085>selector <00:20:22.260>all <00:20:22.435>to <00:20:22.610>see

397
00:20:24.930 --> 00:20:27.670
<00:20:24.930>how <00:20:25.130>many <00:20:25.330>links <00:20:25.530>there <00:20:25.730>are <00:20:25.930>on <00:20:26.130>the <00:20:26.330>page.

398
00:20:27.670 --> 00:20:29.830
<00:20:27.670>Make <00:20:27.903>a <00:20:28.136>list <00:20:28.370>of <00:20:28.603>all <00:20:28.836>those <00:20:29.070>links.

399
00:20:29.830 --> 00:20:33.970
<00:20:29.830>So <00:20:29.985>we <00:20:30.141>query <00:20:30.296>select <00:20:30.452>all <00:20:30.607>the <00:20:30.763>A <00:20:30.918>tags, <00:20:31.074>the <00:20:31.230>links.

400
00:20:36.570 --> 00:20:38.250
<00:20:36.570>But <00:20:36.919>is <00:20:37.270>that <00:20:37.620>really <00:20:37.970>smart?

401
00:20:39.050 --> 00:20:41.450
<00:20:39.050>What <00:20:39.250>if <00:20:39.450>you <00:20:39.649>have <00:20:39.850>links <00:20:40.050>to <00:20:40.250>social <00:20:40.450>media

402
00:20:41.450 --> 00:20:45.090
<00:20:41.450>or <00:20:41.730>some, <00:20:42.010>I <00:20:42.290>don't <00:20:42.570>know, <00:20:42.850>terms

403
00:20:45.090 --> 00:20:49.150
<00:20:45.090>and <00:20:45.370>conditions <00:20:45.649>that <00:20:45.929>nobody <00:20:46.209>ever <00:20:46.490>visits,

404
00:20:49.150 --> 00:20:54.130
<00:20:49.150>for <00:20:49.305>instance, <00:20:49.461>or <00:20:49.616>links <00:20:49.772>that <00:20:49.927>are <00:20:50.083>just <00:20:50.238>like, <00:20:50.394>contact <00:20:50.550>us,

405
00:20:54.130 --> 00:20:56.630
<00:20:54.130>or <00:20:54.285>not <00:20:54.441>really <00:20:54.596>interesting <00:20:54.752>for <00:20:54.907>the <00:20:55.063>user <00:20:55.218>at <00:20:55.374>that <00:20:55.530>point.

406
00:20:56.630 --> 00:20:59.910
<00:20:56.630>You're <00:20:56.830>not <00:20:57.030>going <00:20:57.230>to <00:20:57.430>anticipate <00:20:57.630>that <00:20:57.830>they're <00:20:58.030>going

407
00:20:59.910 --> 00:21:01.650
<00:20:59.910>to <00:21:00.376>visit <00:21:00.843>those <00:21:01.310>pages.

408
00:21:01.790 --> 00:21:04.410
<00:21:01.790>So <00:21:02.023>maybe <00:21:02.256>that's <00:21:02.490>not <00:21:02.723>the <00:21:02.956>best <00:21:03.190>way.

409
00:21:06.200 --> 00:21:10.960
<00:21:06.200>What <00:21:06.327>we <00:21:06.454>can <00:21:06.581>do <00:21:06.709>is <00:21:06.836>add <00:21:06.963>some <00:21:07.090>data <00:21:07.218>attributes <00:21:07.345>to <00:21:07.472>the <00:21:07.600>links.

410
00:21:11.300 --> 00:21:13.060
<00:21:11.300>And <00:21:11.500>you <00:21:11.700>can <00:21:11.899>do <00:21:12.100>it <00:21:12.300>in <00:21:12.500>different <00:21:12.700>ways,

411
00:21:13.060 --> 00:21:17.020
<00:21:13.060>but <00:21:13.215>I <00:21:13.371>would <00:21:13.526>always <00:21:13.682>say <00:21:13.837>use <00:21:13.993>the <00:21:14.148>data-prefix <00:21:14.304>for <00:21:14.460>that,

412
00:21:17.020 --> 00:21:20.800
<00:21:17.020>because <00:21:17.160>if <00:21:17.300>you're <00:21:17.440>going <00:21:17.580>to <00:21:17.720>add <00:21:17.860>an <00:21:18.000>attribute <00:21:18.139>to <00:21:18.280>your <00:21:18.420>link,

413
00:21:20.800 --> 00:21:23.540
<00:21:20.800>I <00:21:21.000>don't <00:21:21.200>know, <00:21:21.399>with <00:21:21.600>any <00:21:21.800>kind <00:21:22.000>of <00:21:22.200>name,

414
00:21:23.540 --> 00:21:26.900
<00:21:23.540>it <00:21:23.680>could <00:21:23.820>become <00:21:23.960>later <00:21:24.100>on <00:21:24.240>that <00:21:24.379>the <00:21:24.520>HTML <00:21:24.659>spec <00:21:24.800>will <00:21:24.940>add

415
00:21:26.900 --> 00:21:30.980
<00:21:26.900>that <00:21:27.075>attribute, <00:21:27.250>and <00:21:27.425>then <00:21:27.600>you're <00:21:27.775>in <00:21:27.950>trouble, <00:21:28.125>let's <00:21:28.300>say.

416
00:21:31.040 --> 00:21:35.700
<00:21:31.040>So <00:21:31.215>always <00:21:31.389>use <00:21:31.565>the <00:21:31.740>data-attribute <00:21:31.915>prefix <00:21:32.090>for <00:21:32.264>that <00:21:32.440>attribute.

417
00:21:35.700 --> 00:21:36.900
<00:21:35.700>And <00:21:35.854>you <00:21:36.008>can <00:21:36.162>do <00:21:36.317>it <00:21:36.471>in <00:21:36.625>two <00:21:36.780>ways.

418
00:21:36.900 --> 00:21:39.980
<00:21:36.900>You <00:21:37.075>can <00:21:37.250>say, <00:21:37.425>well, <00:21:37.600>in <00:21:37.775>this <00:21:37.950>case <00:21:38.125>I <00:21:38.300>added

419
00:21:39.980 --> 00:21:44.880
<00:21:39.980>that <00:21:40.180>data <00:21:40.380>skip <00:21:40.580>prefetch, <00:21:40.780>so <00:21:40.980>I'm <00:21:41.180>excluding <00:21:41.380>links.

420
00:21:45.240 --> 00:21:46.960
<00:21:45.240>You <00:21:45.415>could <00:21:45.590>also <00:21:45.765>do <00:21:45.940>it <00:21:46.115>the <00:21:46.290>other <00:21:46.465>way <00:21:46.640>around.

421
00:21:46.960 --> 00:21:49.600
<00:21:46.960>You <00:21:47.115>can <00:21:47.271>say, <00:21:47.426>well, <00:21:47.582>data-prefetch <00:21:47.737>for <00:21:47.893>the <00:21:48.048>links <00:21:48.204>you <00:21:48.360>want

422
00:21:49.600 --> 00:21:50.760
<00:21:49.600>to <00:21:50.644>prefetch.

423
00:21:50.760 --> 00:21:53.120
<00:21:50.760>But <00:21:51.040>let's <00:21:51.320>go <00:21:51.600>with <00:21:51.879>skipping <00:21:52.160>things.

424
00:21:54.120 --> 00:21:58.580
<00:21:54.120>And <00:21:54.219>I <00:21:54.320>put <00:21:54.419>this <00:21:54.520>in <00:21:54.620>the <00:21:54.719>links <00:21:54.820>I <00:21:54.919>want <00:21:55.020>to <00:21:55.120>skip <00:21:55.219>in <00:21:55.320>all <00:21:55.419>my <00:21:55.520>files.

425
00:21:59.660 --> 00:22:02.600
<00:21:59.660>And <00:21:59.787>what <00:21:59.914>I <00:22:00.041>can <00:22:00.169>do <00:22:00.296>now <00:22:00.423>is <00:22:00.550>query <00:22:00.678>again <00:22:00.805>for <00:22:00.932>that <00:22:01.060>list,

426
00:22:02.600 --> 00:22:06.260
<00:22:02.600>but <00:22:02.833>look <00:22:03.066>at <00:22:03.300>links <00:22:03.533>that <00:22:03.766>don't <00:22:04.000>have

427
00:22:06.260 --> 00:22:09.680
<00:22:06.260>that <00:22:06.610>data <00:22:06.960>skip <00:22:07.310>prefetch <00:22:07.660>attribute.

428
00:22:10.900 --> 00:22:12.300
<00:22:10.900>All <00:22:12.159>right.

429
00:22:12.300 --> 00:22:14.560
<00:22:12.300>What <00:22:12.580>we <00:22:12.860>then <00:22:13.139>can <00:22:13.419>make <00:22:13.700>use

430
00:22:14.560 --> 00:22:18.320
<00:22:14.560>of <00:22:14.760>is <00:22:14.960>something <00:22:15.159>called <00:22:15.360>the <00:22:15.560>Intersection <00:22:15.760>Observer <00:22:15.960>API.

431
00:22:18.940 --> 00:22:22.820
<00:22:18.940>And <00:22:19.095>that's <00:22:19.251>a <00:22:19.406>nice <00:22:19.562>piece <00:22:19.717>of <00:22:19.873>API <00:22:20.028>in <00:22:20.184>the <00:22:20.340>browser

432
00:22:22.820 --> 00:22:26.940
<00:22:22.820>because <00:22:22.975>what <00:22:23.131>it <00:22:23.286>does, <00:22:23.442>it <00:22:23.597>will <00:22:23.753>look <00:22:23.908>at <00:22:24.064>the <00:22:24.220>viewport,

433
00:22:26.940 --> 00:22:30.260
<00:22:26.940>what's <00:22:27.115>in <00:22:27.290>the <00:22:27.465>viewport, <00:22:27.640>then <00:22:27.815>that <00:22:27.990>will <00:22:28.165>be <00:22:28.340>triggered.

434
00:22:30.800 --> 00:22:33.280
<00:22:30.800>So <00:22:30.955>if <00:22:31.111>we're <00:22:31.266>going <00:22:31.422>to <00:22:31.577>use <00:22:31.733>it <00:22:31.888>to <00:22:32.044>prefetch <00:22:32.200>links,

435
00:22:33.280 --> 00:22:34.760
<00:22:33.280>we're <00:22:33.546>only <00:22:33.812>going <00:22:34.079>to <00:22:34.345>prefetch <00:22:34.612>links

436
00:22:34.760 --> 00:22:37.920
<00:22:34.760>that <00:22:34.915>are <00:22:35.071>in <00:22:35.226>the <00:22:35.382>viewport <00:22:35.537>at <00:22:35.693>that <00:22:35.848>period <00:22:36.004>of <00:22:36.160>time

437
00:22:37.920 --> 00:22:40.520
<00:22:37.920>or <00:22:38.153>if <00:22:38.386>the <00:22:38.620>user <00:22:38.853>goes <00:22:39.086>through <00:22:39.320>it.

438
00:22:40.520 --> 00:22:44.080
<00:22:40.520>So <00:22:40.695>we're <00:22:40.870>not <00:22:41.045>going <00:22:41.220>to <00:22:41.395>download <00:22:41.570>all <00:22:41.745>those <00:22:41.920>files

439
00:22:44.080 --> 00:22:45.980
<00:22:44.080>that <00:22:44.313>are <00:22:44.546>way <00:22:44.780>back <00:22:45.013>in <00:22:45.246>the <00:22:45.480>bottom.

440
00:22:46.340 --> 00:22:49.740
<00:22:46.340>But <00:22:46.495>this <00:22:46.651>is <00:22:46.806>an <00:22:46.962>excellent <00:22:47.117>API <00:22:47.273>to <00:22:47.428>use <00:22:47.584>for <00:22:47.740>that.

441
00:22:51.440 --> 00:22:53.600
<00:22:51.440>This <00:22:51.790>is <00:22:52.140>how <00:22:52.490>it <00:22:52.840>works.

442
00:22:53.740 --> 00:22:56.920
<00:22:53.740>So <00:22:53.915>we're <00:22:54.090>going <00:22:54.265>to <00:22:54.440>create <00:22:54.615>a <00:22:54.790>new <00:22:54.965>Intersection <00:22:55.140>Observer.

443
00:22:57.220 --> 00:23:01.260
<00:22:57.220>And <00:22:57.395>for <00:22:57.570>each <00:22:57.745>entry <00:22:57.920>we <00:22:58.095>get <00:22:58.270>there, <00:22:58.445>we're <00:22:58.620>going

444
00:23:01.260 --> 00:23:02.720
<00:23:01.260>to <00:23:01.424>look <00:23:01.588>if <00:23:01.752>the <00:23:01.917>link <00:23:02.081>is <00:23:02.245>in <00:23:02.409>the <00:23:02.574>viewport.

445
00:23:02.720 --> 00:23:06.820
<00:23:02.720>And <00:23:02.953>we <00:23:03.186>do <00:23:03.420>that <00:23:03.653>with <00:23:03.886>intersection <00:23:04.120>ratio

446
00:23:06.820 --> 00:23:08.380
<00:23:06.820>equals <00:23:08.220>one.

447
00:23:08.900 --> 00:23:12.440
<00:23:08.900>And <00:23:09.027>if <00:23:09.154>we <00:23:09.281>get <00:23:09.409>that <00:23:09.536>back, <00:23:09.663>if <00:23:09.790>the <00:23:09.918>intersection <00:23:10.045>ratio <00:23:10.172>is <00:23:10.300>one,

448
00:23:12.440 --> 00:23:16.900
<00:23:12.440>we're <00:23:12.615>going <00:23:12.790>to <00:23:12.965>fetch <00:23:13.140>that <00:23:13.315>content, <00:23:13.490>that <00:23:13.665>HTML <00:23:13.840>file.

449
00:23:17.840 --> 00:23:19.700
<00:23:17.840>I'm <00:23:18.120>using <00:23:18.399>cache <00:23:18.679>no <00:23:18.959>store <00:23:19.240>here,

450
00:23:19.700 --> 00:23:20.900
<00:23:19.700>but <00:23:20.240>that's <00:23:20.780>only

451
00:23:20.900 --> 00:23:24.680
<00:23:20.900>to <00:23:21.100>prevent <00:23:21.300>the <00:23:21.500>browser <00:23:21.700>from <00:23:21.900>caching <00:23:22.100>the <00:23:22.300>file

452
00:23:24.680 --> 00:23:26.180
itself.

453
00:23:26.180 --> 00:23:30.800
<00:23:26.180>And <00:23:26.320>we <00:23:26.460>want <00:23:26.600>to <00:23:26.740>be <00:23:26.880>in <00:23:27.020>control <00:23:27.160>of <00:23:27.300>that. <00:23:27.440>All <00:23:27.580>right.

454
00:23:30.800 --> 00:23:33.080
<00:23:30.800>I'm <00:23:31.149>creating <00:23:31.500>that <00:23:31.850>list <00:23:32.200>again.

455
00:23:33.080 --> 00:23:34.900
<00:23:33.080>And <00:23:33.546>for <00:23:34.013>each <00:23:34.480>file

456
00:23:34.900 --> 00:23:37.720
<00:23:34.900>or <00:23:35.100>each <00:23:35.300>entry <00:23:35.500>in <00:23:35.700>the <00:23:35.900>list, <00:23:36.100>I'm <00:23:36.300>going

457
00:23:37.720 --> 00:23:39.000
<00:23:37.720>to <00:23:37.950>add <00:23:38.180>the <00:23:38.411>Observer <00:23:38.641>to <00:23:38.872>it.

458
00:23:39.000 --> 00:23:43.860
<00:23:39.000>So <00:23:39.155>the <00:23:39.311>Observer <00:23:39.466>will <00:23:39.622>listen <00:23:39.777>to <00:23:39.933>any <00:23:40.088>of <00:23:40.244>these <00:23:40.400>links

459
00:23:43.860 --> 00:23:45.840
<00:23:43.860>that <00:23:44.209>are <00:23:44.560>in <00:23:44.909>the <00:23:45.260>list.

460
00:23:48.000 --> 00:23:50.100
<00:23:48.000>Next, <00:23:48.175>what <00:23:48.350>I <00:23:48.525>want <00:23:48.700>to <00:23:48.875>do <00:23:49.050>is <00:23:49.225>make <00:23:49.400>sure

461
00:23:50.100 --> 00:23:53.940
<00:23:50.100>that <00:23:50.240>I <00:23:50.379>only <00:23:50.520>fetch <00:23:50.659>those <00:23:50.800>pages <00:23:50.939>that <00:23:51.080>I <00:23:51.219>haven't <00:23:51.360>fetched <00:23:51.500>before.

462
00:23:53.940 --> 00:23:56.420
<00:23:53.940>So <00:23:54.220>I'm <00:23:54.500>using <00:23:54.780>local <00:23:55.060>storage <00:23:55.340>here.

463
00:23:57.020 --> 00:23:59.960
<00:23:57.020>That's <00:23:57.175>also <00:23:57.331>a <00:23:57.486>way <00:23:57.642>of <00:23:57.797>storing <00:23:57.953>data <00:23:58.108>in <00:23:58.264>your <00:23:58.420>browser.

464
00:24:00.220 --> 00:24:03.700
<00:24:00.220>And <00:24:00.395>it <00:24:00.570>will <00:24:00.745>be <00:24:00.920>there <00:24:01.095>until <00:24:01.270>it's <00:24:01.445>full, <00:24:01.620>actually.

465
00:24:03.700 --> 00:24:05.440
<00:24:03.700>It <00:24:04.166>won't <00:24:04.633>be <00:24:05.100>discarded

466
00:24:05.440 --> 00:24:09.160
<00:24:05.440>after <00:24:05.595>the <00:24:05.751>user <00:24:05.906>goes <00:24:06.062>to <00:24:06.217>a <00:24:06.373>different <00:24:06.528>website <00:24:06.684>or <00:24:06.840>something.

467
00:24:09.160 --> 00:24:11.360
<00:24:09.160>And <00:24:09.626>it's <00:24:10.093>key <00:24:10.560>value-based.

468
00:24:11.360 --> 00:24:15.460
<00:24:11.360>So <00:24:11.500>what <00:24:11.639>I'm <00:24:11.780>doing <00:24:11.919>here <00:24:12.060>is <00:24:12.199>I'm <00:24:12.340>checking <00:24:12.479>whether <00:24:12.620>I <00:24:12.760>already

469
00:24:15.460 --> 00:24:20.280
<00:24:15.460>have <00:24:15.600>an <00:24:15.740>entry <00:24:15.880>with <00:24:16.020>the <00:24:16.160>same <00:24:16.300>href, <00:24:16.440>with <00:24:16.580>the <00:24:16.720>same <00:24:16.860>URL.

470
00:24:20.700 --> 00:24:23.920
<00:24:20.700>And <00:24:20.840>if <00:24:20.980>it's <00:24:21.120>not, <00:24:21.260>then <00:24:21.400>I'm <00:24:21.540>going <00:24:21.680>to <00:24:21.820>add <00:24:21.960>it <00:24:22.100>to

471
00:24:23.920 --> 00:24:27.980
<00:24:23.920>that <00:24:24.060>list <00:24:24.200>saying, <00:24:24.340>well, <00:24:24.480>OK, <00:24:24.620>this <00:24:24.760>href <00:24:24.900>I <00:24:25.040>have <00:24:25.180>now <00:24:25.320>fetched,

472
00:24:27.980 --> 00:24:30.660
<00:24:27.980>but <00:24:28.155>also <00:24:28.330>entering <00:24:28.505>the <00:24:28.680>inner <00:24:28.855>text <00:24:29.030>of <00:24:29.205>the <00:24:29.380>link.

473
00:24:30.660 --> 00:24:33.080
<00:24:30.660>So <00:24:30.860>I'm <00:24:31.060>going <00:24:31.260>to <00:24:31.460>use <00:24:31.660>that <00:24:31.860>later <00:24:32.060>on.

474
00:24:33.080 --> 00:24:36.480
<00:24:33.080>And <00:24:33.280>I'll <00:24:33.480>explain <00:24:33.679>to <00:24:33.879>you <00:24:34.080>why. <00:24:34.280>All <00:24:34.480>right.

475
00:24:36.480 --> 00:24:38.980
<00:24:36.480>I'm <00:24:36.680>going <00:24:36.880>to <00:24:37.080>update <00:24:37.280>the <00:24:37.480>Static <00:24:37.680>Cache <00:24:37.880>version

476
00:24:38.980 --> 00:24:41.720
<00:24:38.980>because <00:24:39.213>I've <00:24:39.446>changed <00:24:39.680>something <00:24:39.913>in <00:24:40.146>my <00:24:40.380>files.

477
00:24:41.720 --> 00:24:45.860
<00:24:41.720>And <00:24:41.847>I <00:24:41.974>want <00:24:42.101>to <00:24:42.229>make <00:24:42.356>sure <00:24:42.483>that <00:24:42.610>I'm <00:24:42.738>creating <00:24:42.865>a <00:24:42.992>new <00:24:43.120>Static

478
00:24:45.860 --> 00:24:46.960
<00:24:45.860>Cache <00:24:46.850>again.

479
00:24:47.580 --> 00:24:52.260
<00:24:47.580>All <00:24:47.720>right. <00:24:47.860>We <00:24:48.000>have <00:24:48.139>Static <00:24:48.280>Cache <00:24:48.419>version <00:24:48.560>3. <00:24:48.699>Still <00:24:48.840>with <00:24:48.980>me?

480
00:24:54.600 --> 00:24:59.420
<00:24:54.600>OK, <00:24:54.774>yeah. <00:24:54.949>One. <00:24:55.125>Good. <00:24:55.300>Let's <00:24:55.475>see <00:24:55.649>how <00:24:55.824>that <00:24:56.000>works.

481
00:25:02.140 --> 00:25:06.840
<00:25:02.140>So <00:25:02.315>refreshing <00:25:02.490>the <00:25:02.665>page. <00:25:02.840>New <00:25:03.015>service <00:25:03.190>worker. <00:25:03.365>Click <00:25:03.540>OK.

482
00:25:06.840 --> 00:25:09.860
<00:25:06.840>All <00:25:07.306>right. <00:25:07.773>Let's <00:25:08.240>see.

483
00:25:09.860 --> 00:25:12.940
<00:25:09.860>We <00:25:10.000>have <00:25:10.139>these <00:25:10.280>files <00:25:10.419>in <00:25:10.560>our <00:25:10.699>dynamic <00:25:10.840>cache <00:25:10.979>now. <00:25:11.120>Let's <00:25:11.260>scroll.

484
00:25:12.940 --> 00:25:15.520
<00:25:12.940>Let's <00:25:13.095>see <00:25:13.251>what <00:25:13.406>happens. <00:25:13.562>Well, <00:25:13.717>we <00:25:13.873>already <00:25:14.028>have <00:25:14.184>this <00:25:14.340>one.

485
00:25:15.520 --> 00:25:19.560
<00:25:15.520>We <00:25:15.695>have <00:25:15.870>this <00:25:16.045>one. <00:25:16.220>Wow. <00:25:16.395>There <00:25:16.570>it <00:25:16.745>is. <00:25:16.920>2001.

486
00:25:20.480 --> 00:25:22.020
<00:25:20.480>2015. <00:25:21.173>It's <00:25:21.866>there.

487
00:25:22.420 --> 00:25:25.780
<00:25:22.420>But <00:25:22.595>it's <00:25:22.770>only <00:25:22.945>the <00:25:23.120>HTML <00:25:23.295>file <00:25:23.470>you <00:25:23.645>can <00:25:23.820>cache.

488
00:25:25.780 --> 00:25:28.820
<00:25:25.780>You <00:25:25.920>cannot <00:25:26.060>check <00:25:26.200>whether <00:25:26.340>there <00:25:26.480>are <00:25:26.620>images <00:25:26.760>in <00:25:26.899>there <00:25:27.040>or <00:25:27.180>not.

489
00:25:28.820 --> 00:25:31.500
<00:25:28.820>But <00:25:29.020>this <00:25:29.220>is <00:25:29.419>a <00:25:29.620>pretty <00:25:29.820>good <00:25:30.020>start <00:25:30.220>already.

490
00:25:31.980 --> 00:25:34.820
<00:25:31.980>And <00:25:32.120>here <00:25:32.260>you <00:25:32.400>have <00:25:32.540>the <00:25:32.680>local <00:25:32.820>source <00:25:32.960>saying, <00:25:33.100>well, <00:25:33.240>this <00:25:33.380>URL,

491
00:25:34.820 --> 00:25:38.600
<00:25:34.820>for <00:25:34.960>this <00:25:35.100>is <00:25:35.240>1997, <00:25:35.379>is <00:25:35.520>the <00:25:35.659>Lost <00:25:35.800>World <00:25:35.939>Jersey <00:25:36.080>Park <00:25:36.220>movie,

492
00:25:38.600 --> 00:25:43.490
<00:25:38.600>and <00:25:38.879>so <00:25:39.159>on <00:25:39.439>and <00:25:39.719>so <00:25:40.000>forth.

493
00:25:43.490 --> 00:25:46.330
<00:25:43.490>But <00:25:43.770>again, <00:25:44.050>let's <00:25:44.330>think <00:25:44.610>about <00:25:44.890>prefetching.

494
00:25:46.330 --> 00:25:50.490
<00:25:46.330>Is <00:25:46.504>it <00:25:46.679>really <00:25:46.855>smart <00:25:47.030>to <00:25:47.205>do <00:25:47.379>if <00:25:47.554>you're <00:25:47.730>somewhere

495
00:25:50.490 --> 00:25:52.210
<00:25:50.490>with <00:25:50.956>a <00:25:51.423>bad <00:25:51.890>connection?

496
00:25:52.670 --> 00:25:55.890
<00:25:52.670>You're <00:25:52.845>going <00:25:53.020>to <00:25:53.195>prefetch <00:25:53.370>a <00:25:53.545>lot <00:25:53.720>of <00:25:53.895>stuff <00:25:54.070>already?

497
00:25:55.990 --> 00:25:57.930
<00:25:55.990>Might <00:25:56.270>not <00:25:56.550>be <00:25:56.830>a <00:25:57.110>good <00:25:57.390>idea.

498
00:26:00.210 --> 00:26:03.030
<00:26:00.210>So <00:26:00.410>we <00:26:00.610>can <00:26:00.810>look <00:26:01.010>at <00:26:01.210>the <00:26:01.410>effective <00:26:01.610>type.

499
00:26:03.030 --> 00:26:04.530
<00:26:03.030>The <00:26:03.367>effective <00:26:03.705>type <00:26:04.042>is <00:26:04.379>saying,

500
00:26:04.530 --> 00:26:06.690
<00:26:04.530>which <00:26:04.810>connection <00:26:05.090>does <00:26:05.370>a <00:26:05.649>user <00:26:05.930>have?

501
00:26:07.510 --> 00:26:12.210
<00:26:07.510>Unfortunately, <00:26:07.743>it's <00:26:07.976>only <00:26:08.210>supported <00:26:08.443>in <00:26:08.676>Chromium <00:26:08.910>browsers.

502
00:26:12.210 --> 00:26:14.830
<00:26:12.210>But <00:26:12.385>it's <00:26:12.560>still <00:26:12.735>a <00:26:12.910>good <00:26:13.085>way <00:26:13.260>to <00:26:13.435>make <00:26:13.610>use

503
00:26:14.830 --> 00:26:17.340
<00:26:14.830>of <00:26:16.230>it.

504
00:26:17.380 --> 00:26:21.180
<00:26:17.380>And <00:26:17.555>also, <00:26:17.730>that's <00:26:17.905>a <00:26:18.080>setting <00:26:18.255>on <00:26:18.430>Android <00:26:18.605>as <00:26:18.780>well.

505
00:26:21.540 --> 00:26:23.640
<00:26:21.540>It's <00:26:21.667>like <00:26:21.794>a <00:26:21.921>user <00:26:22.049>can <00:26:22.176>say, <00:26:22.303>well, <00:26:22.430>I <00:26:22.558>want <00:26:22.685>to <00:26:22.812>save <00:26:22.940>data.

506
00:26:23.640 --> 00:26:26.960
<00:26:23.640>For <00:26:23.815>instance, <00:26:23.990>you're <00:26:24.165>in <00:26:24.340>Germany <00:26:24.515>here <00:26:24.690>at <00:26:24.865>the <00:26:25.040>conference

507
00:26:26.960 --> 00:26:28.500
<00:26:26.960>and <00:26:27.237>you're <00:26:27.514>not <00:26:27.791>from <00:26:28.068>the <00:26:28.346>EU.

508
00:26:28.500 --> 00:26:32.580
<00:26:28.500>So <00:26:28.655>you <00:26:28.811>can't <00:26:28.966>use <00:26:29.122>your <00:26:29.277>data <00:26:29.433>from <00:26:29.588>your <00:26:29.744>home <00:26:29.900>country.

509
00:26:32.580 --> 00:26:36.240
<00:26:32.580>You <00:26:32.720>might <00:26:32.860>need <00:26:33.000>to <00:26:33.139>buy <00:26:33.280>a <00:26:33.419>data <00:26:33.560>package <00:26:33.699>for <00:26:33.840>50 <00:26:33.980>euros

510
00:26:36.240 --> 00:26:38.220
<00:26:36.240>for <00:26:36.590>10 <00:26:36.940>megabytes <00:26:37.290>or <00:26:37.640>something.

511
00:26:38.220 --> 00:26:40.880
<00:26:38.220>I <00:26:38.395>don't <00:26:38.570>know <00:26:38.745>what <00:26:38.920>the <00:26:39.095>ridiculous <00:26:39.270>prices <00:26:39.445>there <00:26:39.620>are.

512
00:26:40.940 --> 00:26:44.360
<00:26:40.940>So <00:26:41.115>we <00:26:41.290>might <00:26:41.465>want <00:26:41.640>to <00:26:41.815>respect <00:26:41.990>this <00:26:42.165>as <00:26:42.340>well.

513
00:26:44.360 --> 00:26:47.720
<00:26:44.360>So <00:26:44.639>you <00:26:44.919>can <00:26:45.199>listen <00:26:45.479>to <00:26:45.760>networkinformation.savedata.

514
00:26:47.720 --> 00:26:50.760
<00:26:47.720>And <00:26:47.875>if <00:26:48.031>you <00:26:48.186>see <00:26:48.342>that, <00:26:48.497>well, <00:26:48.653>maybe <00:26:48.808>don't <00:26:48.964>prefetch <00:26:49.120>stuff.

515
00:26:52.660 --> 00:26:56.200
<00:26:52.660>As <00:26:52.860>I <00:26:53.060>said, <00:26:53.260>support <00:26:53.460>is <00:26:53.660>not <00:26:53.860>on <00:26:54.060>iOS.

516
00:26:57.040 --> 00:26:59.800
<00:26:57.040>All <00:26:57.389>right, <00:26:57.740>we're <00:26:58.090>almost <00:26:58.440>there.

517
00:27:00.400 --> 00:27:03.840
<00:27:00.400>Let's <00:27:00.575>look <00:27:00.750>at <00:27:00.925>a <00:27:01.100>more <00:27:01.275>optimized <00:27:01.450>version <00:27:01.625>of <00:27:01.800>offline.

518
00:27:03.840 --> 00:27:06.660
<00:27:03.840>What <00:27:04.040>we <00:27:04.240>had <00:27:04.439>was, <00:27:04.639>well, <00:27:04.840>you're <00:27:05.040>offline, <00:27:05.240>sorry.

519
00:27:08.100 --> 00:27:09.660
<00:27:08.100>But <00:27:08.449>let's <00:27:08.800>do <00:27:09.149>something <00:27:09.500>different.

520
00:27:12.050 --> 00:27:13.590
<00:27:12.050>You <00:27:12.512>saw <00:27:12.974>this <00:27:13.436>earlier.

521
00:27:13.950 --> 00:27:15.850
<00:27:13.950>But <00:27:14.105>why <00:27:14.261>don't <00:27:14.416>you <00:27:14.572>try <00:27:14.727>one <00:27:14.883>of <00:27:15.038>our <00:27:15.194>other <00:27:15.350>pages?

522
00:27:15.850 --> 00:27:17.910
<00:27:15.850>Wouldn't <00:27:15.990>it <00:27:16.129>be <00:27:16.270>nice <00:27:16.409>to <00:27:16.550>have <00:27:16.689>a <00:27:16.830>list <00:27:16.969>with <00:27:17.110>the <00:27:17.250>pages

523
00:27:17.910 --> 00:27:19.110
<00:27:17.910>that <00:27:18.450>are <00:27:18.990>available?

524
00:27:19.410 --> 00:27:20.710
<00:27:19.410>Well, <00:27:19.800>let's <00:27:20.190>do <00:27:20.580>that.

525
00:27:21.390 --> 00:27:22.990
<00:27:21.390>So <00:27:21.565>what <00:27:21.740>we're <00:27:21.915>going <00:27:22.090>to <00:27:22.265>do <00:27:22.440>is <00:27:22.615>we're <00:27:22.790>going

526
00:27:22.990 --> 00:27:25.370
<00:27:22.990>to <00:27:23.223>say <00:27:23.456>these <00:27:23.690>pages <00:27:23.923>are <00:27:24.156>available <00:27:24.390>offline.

527
00:27:25.690 --> 00:27:29.050
<00:27:25.690>And <00:27:25.923>we're <00:27:26.156>going <00:27:26.390>to <00:27:26.623>add <00:27:26.856>this <00:27:27.090>dynamically

528
00:27:29.050 --> 00:27:31.430
<00:27:29.050>to <00:27:29.516>the <00:27:29.983>offline <00:27:30.450>page.

529
00:27:33.340 --> 00:27:35.900
<00:27:33.340>For <00:27:33.514>this, <00:27:33.689>I'm <00:27:33.865>going <00:27:34.040>to <00:27:34.215>add <00:27:34.389>some <00:27:34.564>new <00:27:34.740>JavaScript.

530
00:27:35.900 --> 00:27:38.640
<00:27:35.900>I'm <00:27:36.100>going <00:27:36.300>to <00:27:36.500>call <00:27:36.700>a <00:27:36.900>file <00:27:37.100>called <00:27:37.300>offline.js.

531
00:27:38.640 --> 00:27:40.800
<00:27:38.640>So <00:27:38.815>I'm <00:27:38.990>adding <00:27:39.165>it <00:27:39.340>to <00:27:39.515>the <00:27:39.690>static <00:27:39.865>caches <00:27:40.040>again

532
00:27:40.800 --> 00:27:44.500
<00:27:40.800>because <00:27:40.955>I <00:27:41.111>want <00:27:41.266>to <00:27:41.422>be <00:27:41.577>available <00:27:41.733>at <00:27:41.888>the <00:27:42.044>start <00:27:42.200>already.

533
00:27:45.600 --> 00:27:49.000
<00:27:45.600>And <00:27:45.755>we're <00:27:45.911>going <00:27:46.066>to <00:27:46.222>extend <00:27:46.377>something <00:27:46.533>in <00:27:46.688>the <00:27:46.844>fetch <00:27:47.000>event.

534
00:27:51.450 --> 00:27:53.830
<00:27:51.450>What <00:27:51.577>we're <00:27:51.704>going <00:27:51.831>to <00:27:51.959>do <00:27:52.086>is <00:27:52.213>we <00:27:52.340>want <00:27:52.468>to <00:27:52.595>have <00:27:52.722>the <00:27:52.850>version

535
00:27:53.830 --> 00:27:55.810
<00:27:53.830>of <00:27:54.179>the <00:27:54.530>dynamic <00:27:54.879>cache <00:27:55.230>available.

536
00:27:56.130 --> 00:27:59.170
<00:27:56.130>Usually <00:27:56.305>we <00:27:56.480>only <00:27:56.655>have <00:27:56.830>one <00:27:57.005>because <00:27:57.180>we <00:27:57.355>clean <00:27:57.530>stuff.

537
00:27:59.170 --> 00:28:00.490
<00:27:59.170>But <00:27:59.368>just <00:27:59.566>to <00:27:59.764>be <00:27:59.962>sure, <00:28:00.160>we <00:28:00.358>want

538
00:28:00.490 --> 00:28:04.390
<00:28:00.490>to <00:28:00.665>have <00:28:00.840>the <00:28:01.015>dynamic <00:28:01.190>version <00:28:01.365>in <00:28:01.540>the <00:28:01.715>local <00:28:01.890>storage.

539
00:28:05.550 --> 00:28:09.210
<00:28:05.550>So <00:28:05.783>if <00:28:06.016>it's <00:28:06.250>in <00:28:06.483>the <00:28:06.716>local <00:28:06.950>storage,

540
00:28:09.210 --> 00:28:13.190
<00:28:09.210>Then <00:28:09.443>we're <00:28:09.676>going <00:28:09.910>to <00:28:10.143>send <00:28:10.376>a <00:28:10.610>message.

541
00:28:13.190 --> 00:28:17.670
<00:28:13.190>Sorry, <00:28:13.317>if <00:28:13.444>it's <00:28:13.571>not <00:28:13.699>yet <00:28:13.826>in <00:28:13.953>the <00:28:14.080>local <00:28:14.208>storage, <00:28:14.335>if <00:28:14.462>it's <00:28:14.590>true,

542
00:28:17.670 --> 00:28:20.030
<00:28:17.670>then <00:28:17.825>we're <00:28:17.981>going <00:28:18.136>to <00:28:18.292>send <00:28:18.447>a <00:28:18.603>message <00:28:18.758>to <00:28:18.914>the <00:28:19.070>client.

543
00:28:20.030 --> 00:28:22.650
<00:28:20.030>This <00:28:20.185>is <00:28:20.341>the <00:28:20.496>only <00:28:20.652>way <00:28:20.807>a <00:28:20.963>service <00:28:21.118>worker <00:28:21.274>can <00:28:21.430>communicate

544
00:28:22.650 --> 00:28:24.770
<00:28:22.650>with <00:28:22.930>your <00:28:23.210>website <00:28:23.490>by <00:28:23.770>sending <00:28:24.050>messages.

545
00:28:24.770 --> 00:28:28.970
<00:28:24.770>So <00:28:24.925>client.postMessage. <00:28:25.081>And <00:28:25.236>we're <00:28:25.392>going <00:28:25.547>to <00:28:25.703>give <00:28:25.858>it <00:28:26.014>an <00:28:26.170>action.

546
00:28:28.970 --> 00:28:33.550
<00:28:28.970>The <00:28:29.170>action <00:28:29.370>is <00:28:29.570>where <00:28:29.770>the <00:28:29.970>website <00:28:30.170>JavaScript <00:28:30.370>is

547
00:28:33.550 --> 00:28:34.750
<00:28:33.550>listening <00:28:34.630>to.

548
00:28:34.750 --> 00:28:36.530
<00:28:34.750>And <00:28:34.925>we're <00:28:35.100>going <00:28:35.275>to <00:28:35.450>say, <00:28:35.625>well, <00:28:35.800>this <00:28:35.975>is <00:28:36.150>dynamic.

549
00:28:36.530 --> 00:28:38.630
<00:28:36.530>This <00:28:36.810>is <00:28:37.090>the <00:28:37.370>dynamic <00:28:37.649>cache <00:28:37.930>version.

550
00:28:38.630 --> 00:28:40.650
<00:28:38.630>And <00:28:38.805>then <00:28:38.980>we're <00:28:39.155>going <00:28:39.330>to <00:28:39.505>say <00:28:39.680>it's <00:28:39.855>false <00:28:40.030>now

551
00:28:40.650 --> 00:28:42.630
<00:28:40.650>because <00:28:40.850>we <00:28:41.050>only <00:28:41.250>want <00:28:41.450>to <00:28:41.650>save <00:28:41.850>it <00:28:42.050>once.

552
00:28:43.530 --> 00:28:44.530
<00:28:43.530>All <00:28:44.430>right.

553
00:28:44.530 --> 00:28:47.550
<00:28:44.530>In <00:28:44.685>our <00:28:44.841>app.js, <00:28:44.996>we're <00:28:45.152>going <00:28:45.307>to <00:28:45.463>listen <00:28:45.618>to <00:28:45.774>that <00:28:45.930>message.

554
00:28:47.550 --> 00:28:50.590
<00:28:47.550>So <00:28:47.705>we're <00:28:47.861>going <00:28:48.016>to <00:28:48.172>add <00:28:48.327>an <00:28:48.483>event <00:28:48.638>listener <00:28:48.794>to <00:28:48.950>message.

555
00:28:51.350 --> 00:28:54.330
<00:28:51.350>And <00:28:51.505>you <00:28:51.661>can <00:28:51.816>send <00:28:51.972>multiple <00:28:52.127>messages <00:28:52.283>from <00:28:52.438>the <00:28:52.594>service <00:28:52.750>worker

556
00:28:54.330 --> 00:28:55.750
<00:28:54.330>to <00:28:54.755>your <00:28:55.182>JavaScript <00:28:55.608>file.

557
00:28:55.750 --> 00:28:58.290
<00:28:55.750>So <00:28:55.983>I'm <00:28:56.216>checking <00:28:56.450>what <00:28:56.683>action <00:28:56.916>it <00:28:57.150>is.

558
00:28:58.290 --> 00:29:01.110
<00:28:58.290>And <00:28:58.445>the <00:28:58.601>action <00:28:58.756>is <00:28:58.912>set <00:28:59.067>dynamic <00:28:59.223>version <00:28:59.378>in <00:28:59.534>local <00:28:59.690>storage.

559
00:29:01.350 --> 00:29:03.150
<00:29:01.350>If <00:29:01.550>that's <00:29:01.750>so, <00:29:01.949>I'm <00:29:02.149>just <00:29:02.350>adding <00:29:02.550>an <00:29:02.750>item

560
00:29:03.150 --> 00:29:05.030
<00:29:03.150>to <00:29:03.383>the <00:29:03.616>local <00:29:03.850>storage <00:29:04.083>like <00:29:04.316>we've <00:29:04.550>seen

561
00:29:05.030 --> 00:29:08.590
<00:29:05.030>before <00:29:05.496>with <00:29:05.963>set <00:29:06.430>item.

562
00:29:08.790 --> 00:29:10.010
<00:29:08.790>Almost <00:29:09.888>there.

563
00:29:10.490 --> 00:29:13.630
<00:29:10.490>Now <00:29:10.770>in <00:29:11.050>the <00:29:11.330>offline.js, <00:29:11.610>we're <00:29:11.890>going

564
00:29:13.630 --> 00:29:15.910
<00:29:13.630>to <00:29:13.910>retrieve <00:29:14.190>all <00:29:14.470>the <00:29:14.750>cache <00:29:15.030>URLs.

565
00:29:15.910 --> 00:29:20.870
<00:29:15.910>And <00:29:16.065>we're <00:29:16.221>going <00:29:16.376>to <00:29:16.532>look <00:29:16.687>in <00:29:16.843>the <00:29:16.998>dynamic <00:29:17.154>in <00:29:17.310>the

566
00:29:20.870 --> 00:29:22.530
<00:29:20.870>local <00:29:21.070>storage <00:29:21.270>to <00:29:21.469>get <00:29:21.669>the <00:29:21.870>dynamic <00:29:22.070>cache <00:29:22.270>version.

567
00:29:22.530 --> 00:29:25.790
<00:29:22.530>So <00:29:22.705>we're <00:29:22.879>going <00:29:23.055>through <00:29:23.230>the <00:29:23.405>cache <00:29:23.580>with <00:29:23.754>that <00:29:23.930>version.

568
00:29:27.680 --> 00:29:31.480
<00:29:27.680>And <00:29:27.820>at <00:29:27.960>that <00:29:28.100>point, <00:29:28.240>we're <00:29:28.380>going <00:29:28.520>to <00:29:28.660>retrieve <00:29:28.800>all <00:29:28.940>the <00:29:29.080>files

569
00:29:31.480 --> 00:29:32.720
<00:29:31.480>that <00:29:31.703>are <00:29:31.926>in <00:29:32.149>the <00:29:32.372>dynamic <00:29:32.596>cache,

570
00:29:32.720 --> 00:29:36.100
<00:29:32.720>but <00:29:32.895>only <00:29:33.070>the <00:29:33.245>HTML <00:29:33.420>files <00:29:33.595>we <00:29:33.770>are <00:29:33.945>interested <00:29:34.120>into.

571
00:29:36.100 --> 00:29:38.320
<00:29:36.100>And <00:29:36.274>we're <00:29:36.449>going <00:29:36.625>to <00:29:36.800>put <00:29:36.975>them <00:29:37.149>in <00:29:37.324>a <00:29:37.500>list.

572
00:29:39.740 --> 00:29:42.960
<00:29:39.740>Next <00:29:39.940>off, <00:29:40.140>we're <00:29:40.340>going <00:29:40.540>to <00:29:40.740>match <00:29:40.940>that <00:29:41.140>list

573
00:29:42.960 --> 00:29:47.580
<00:29:42.960>with <00:29:43.160>the <00:29:43.360>link <00:29:43.560>titles <00:29:43.760>we <00:29:43.960>have <00:29:44.160>already <00:29:44.360>in

574
00:29:47.580 --> 00:29:48.660
<00:29:47.580>our <00:29:48.066>local <00:29:48.552>storage.

575
00:29:48.660 --> 00:29:53.200
<00:29:48.660>This <00:29:48.940>is <00:29:49.220>a <00:29:49.500>very <00:29:49.780>extensive <00:29:50.060>way

576
00:29:53.200 --> 00:29:57.520
<00:29:53.200>to <00:29:53.340>make <00:29:53.480>sure <00:29:53.620>we <00:29:53.760>get <00:29:53.900>list <00:29:54.040>items <00:29:54.180>with <00:29:54.320>a <00:29:54.460>link <00:29:54.600>inside

577
00:29:57.520 --> 00:29:58.520
<00:29:57.520>of <00:29:58.420>it.

578
00:30:00.000 --> 00:30:01.000
<00:30:00.000>Das <00:30:00.128>ist <00:30:00.257>der <00:30:00.385>Weg, <00:30:00.514>um <00:30:00.642>es <00:30:00.771>zu <00:30:00.900>machen.

579
00:30:01.000 --> 00:30:04.520
<00:30:01.000>Und <00:30:01.155>was <00:30:01.311>wir <00:30:01.466>enden <00:30:01.622>mit, <00:30:01.777>ist <00:30:01.933>so <00:30:02.088>etwas <00:30:02.244>wie <00:30:02.400>das.

580
00:30:04.520 --> 00:30:07.420
<00:30:04.520>Neuer <00:30:04.986>Service <00:30:05.453>Worker, <00:30:05.920>ok,

581
00:30:07.420 --> 00:30:10.540
Reload.

582
00:30:10.560 --> 00:30:14.080
<00:30:10.560>In <00:30:10.715>der <00:30:10.871>Statik <00:30:11.026>haben <00:30:11.182>wir <00:30:11.337>jetzt <00:30:11.493>offline.js, <00:30:11.648>das <00:30:11.804>ist <00:30:11.960>gut.

583
00:30:14.940 --> 00:30:17.300
<00:30:14.940>Und <00:30:15.140>jetzt <00:30:15.340>gehen <00:30:15.540>wir <00:30:15.740>auf <00:30:15.940>ein <00:30:16.140>paar <00:30:16.340>Pages.

584
00:30:20.860 --> 00:30:22.400
<00:30:20.860>Warte, <00:30:21.137>Sie <00:30:21.414>haben <00:30:21.691>das <00:30:21.968>gesehen, <00:30:22.246>oder?

585
00:30:22.400 --> 00:30:25.520
<00:30:22.400>Jetzt <00:30:22.575>gehen <00:30:22.750>wir <00:30:22.925>offline, <00:30:23.100>sofort. <00:30:23.275>Mal <00:30:23.450>sehen, <00:30:23.625>was <00:30:23.800>passiert.

586
00:30:25.760 --> 00:30:30.440
<00:30:25.760>So, <00:30:25.915>diese <00:30:26.071>ist <00:30:26.226>in <00:30:26.382>unserer <00:30:26.537>Dynamic <00:30:26.693>Cache. <00:30:26.848>Gut, <00:30:27.004>diese <00:30:27.160>auch.

587
00:30:30.940 --> 00:30:35.760
<00:30:30.940>Gut. <00:30:31.406>Wir <00:30:31.873>haben <00:30:32.340>diese

588
00:30:35.760 --> 00:30:37.720
<00:30:35.760>mit <00:30:36.226>der <00:30:36.693>Intersection-API <00:30:37.160>gerettet,

589
00:30:37.720 --> 00:30:38.760
<00:30:37.720>aber <00:30:37.954>wir <00:30:38.188>haben <00:30:38.422>keine <00:30:38.656>Images.

590
00:30:38.760 --> 00:30:42.020
<00:30:38.760>Aber <00:30:38.887>das <00:30:39.014>ist <00:30:39.141>ok, <00:30:39.269>der <00:30:39.396>User <00:30:39.523>kann <00:30:39.650>es <00:30:39.778>immer <00:30:39.905>noch <00:30:40.032>lesen, <00:30:40.160>oder?

591
00:30:42.600 --> 00:30:45.860
<00:30:42.600>Aber <00:30:42.800>jetzt <00:30:43.000>gehen <00:30:43.199>wir <00:30:43.399>auf <00:30:43.600>diese, <00:30:43.800>Fallen <00:30:44.000>Kingdom.

592
00:30:46.360 --> 00:30:49.500
<00:30:46.360>Es <00:30:46.500>ist <00:30:46.639>nah, <00:30:46.780>es <00:30:46.919>ist <00:30:47.060>nicht <00:30:47.199>da, <00:30:47.340>aber <00:30:47.479>wir <00:30:47.620>scrollen <00:30:47.760>auf.

593
00:30:49.700 --> 00:30:53.140
<00:30:49.700>Jetzt <00:30:49.855>können <00:30:50.011>wir <00:30:50.166>den <00:30:50.322>User <00:30:50.477>zeigen, <00:30:50.633>welche <00:30:50.788>Pages <00:30:50.944>möglich <00:30:51.100>sind.

594
00:30:53.300 --> 00:30:56.320
<00:30:53.300>Und <00:30:53.475>ich <00:30:53.649>denke, <00:30:53.825>das <00:30:54.000>ist <00:30:54.175>schon <00:30:54.350>eine <00:30:54.524>massive <00:30:54.700>Verbesserung.

595
00:30:58.540 --> 00:31:00.800
<00:30:58.540>Ok, <00:30:59.006>das <00:30:59.473>war <00:30:59.940>alles.

596
00:31:01.080 --> 00:31:05.120
<00:31:01.080>Ich <00:31:01.254>sehe <00:31:01.429>viele <00:31:01.605>Fassen, <00:31:01.780>die <00:31:01.955>sagen, <00:31:02.129>uff, <00:31:02.304>endlich, <00:31:02.480>danke.

597
00:31:05.120 --> 00:31:09.120
<00:31:05.120>Well, <00:31:05.275>let <00:31:05.431>me <00:31:05.586>entertain <00:31:05.742>you <00:31:05.897>with <00:31:06.053>a <00:31:06.208>little <00:31:06.364>clip <00:31:06.520>from

598
00:31:10.280 --> 00:31:15.240
<00:31:10.280>Jeep, <00:31:10.435>that <00:31:10.591>was <00:31:10.746>a <00:31:10.902>commercial <00:31:11.057>during <00:31:11.213>a <00:31:11.368>Jurassic <00:31:11.524>Park <00:31:11.680>movie.

599
00:31:16.900 --> 00:31:19.000
<00:31:16.900>Don't <00:31:17.250>worry, <00:31:17.600>I'll <00:31:17.950>take <00:31:18.300>care

600
00:31:19.000 --> 00:31:19.120
of

601
00:31:19.120 --> 00:31:24.120
you.

602
00:31:51.940 --> 00:31:54.640
<00:31:51.940>Hey, <00:31:52.290>look, <00:31:52.640>it's <00:31:52.990>your <00:31:53.340>mom.

603
00:31:56.520 --> 00:31:58.820
<00:31:56.520>Alright, <00:31:56.870>thank <00:31:57.220>you <00:31:57.570>very <00:31:57.920>much.

604
00:31:58.820 --> 00:32:02.540
<00:31:58.820>The <00:31:58.960>slides <00:31:59.100>and <00:31:59.240>the <00:31:59.379>demo <00:31:59.520>code <00:31:59.659>are <00:31:59.800>there <00:31:59.939>on <00:32:00.080>the <00:32:00.220>link.

605
00:32:02.720 --> 00:32:06.780
<00:32:02.720>Or <00:32:02.953>use <00:32:03.186>the <00:32:03.420>QR <00:32:03.653>code <00:32:03.886>for <00:32:04.120>that.

606
00:32:06.980 --> 00:32:08.060
<00:32:06.980>Thank <00:32:07.952>you.

607
00:32:11.070 --> 00:32:13.910
<00:32:11.070>Thank <00:32:11.270>you <00:32:11.470>so <00:32:11.669>much, <00:32:11.870>that <00:32:12.070>was <00:32:12.270>so <00:32:12.470>interesting.

608
00:32:14.550 --> 00:32:16.990
<00:32:14.550>So, <00:32:14.830>We <00:32:15.110>have <00:32:15.389>a <00:32:15.669>few <00:32:15.950>questions.

609
00:32:18.390 --> 00:32:22.110
<00:32:18.390>Will <00:32:18.590>the <00:32:18.790>service <00:32:18.990>worker <00:32:19.190>cache <00:32:19.390>automatically <00:32:19.590>be <00:32:19.790>discarded

610
00:32:22.110 --> 00:32:25.410
<00:32:22.110>after <00:32:22.284>some <00:32:22.459>time <00:32:22.635>by <00:32:22.810>the <00:32:22.985>browser <00:32:23.159>or <00:32:23.334>stays <00:32:23.510>forever?

611
00:32:25.410 --> 00:32:28.310
<00:32:25.410>No, <00:32:25.585>you're <00:32:25.760>in <00:32:25.935>full <00:32:26.110>control <00:32:26.285>yourself, <00:32:26.460>so <00:32:26.635>you <00:32:26.810>have

612
00:32:28.310 --> 00:32:30.890
<00:32:28.310>to <00:32:28.465>make <00:32:28.621>sure <00:32:28.776>that <00:32:28.932>if <00:32:29.087>there <00:32:29.243>is <00:32:29.398>stuff <00:32:29.554>in <00:32:29.710>there

613
00:32:30.890 --> 00:32:32.950
<00:32:30.890>that's <00:32:31.170>been <00:32:31.450>there <00:32:31.730>for <00:32:32.010>too <00:32:32.290>long

614
00:32:32.950 --> 00:32:36.250
<00:32:32.950>and <00:32:33.125>it's <00:32:33.300>not <00:32:33.475>useful <00:32:33.650>anymore, <00:32:33.825>get <00:32:34.000>rid <00:32:34.175>of <00:32:34.350>it.

615
00:32:36.990 --> 00:32:39.930
<00:32:36.990>Service <00:32:37.130>workers <00:32:37.270>can <00:32:37.410>be <00:32:37.550>tricky <00:32:37.690>when <00:32:37.830>there <00:32:37.970>is <00:32:38.110>a <00:32:38.250>new <00:32:38.390>version

616
00:32:39.930 --> 00:32:42.790
<00:32:39.930>of <00:32:40.130>a <00:32:40.330>cached <00:32:40.530>page <00:32:40.730>that <00:32:40.930>should <00:32:41.130>be <00:32:41.330>updated.

617
00:32:42.790 --> 00:32:45.730
<00:32:42.790>Is <00:32:42.990>there <00:32:43.190>an <00:32:43.389>efficient <00:32:43.590>way <00:32:43.790>of <00:32:43.990>doing <00:32:44.190>this?

618
00:32:45.870 --> 00:32:48.390
<00:32:45.870>Yeah, <00:32:46.070>I <00:32:46.270>didn't <00:32:46.469>have <00:32:46.669>time <00:32:46.870>to <00:32:47.070>explain <00:32:47.270>that,

619
00:32:48.390 --> 00:32:50.590
<00:32:48.390>because <00:32:48.565>that's <00:32:48.740>a <00:32:48.915>lot <00:32:49.090>of <00:32:49.265>things <00:32:49.440>you <00:32:49.615>can <00:32:49.790>do,

620
00:32:50.590 --> 00:32:53.630
<00:32:50.590>but <00:32:50.790>you <00:32:50.990>can <00:32:51.189>have <00:32:51.389>different <00:32:51.590>strategies, <00:32:51.790>saying, <00:32:51.990>well,

621
00:32:53.630 --> 00:32:56.410
<00:32:53.630>I <00:32:53.785>first <00:32:53.941>gonna <00:32:54.096>cache <00:32:54.252>it, <00:32:54.407>get <00:32:54.563>it <00:32:54.718>from <00:32:54.874>the <00:32:55.030>cache,

622
00:32:56.410 --> 00:32:57.610
<00:32:56.410>if <00:32:56.950>it's <00:32:57.490>there,

623
00:32:57.610 --> 00:33:00.250
<00:32:57.610>but <00:32:57.737>at <00:32:57.864>the <00:32:57.991>same <00:32:58.119>time, <00:32:58.246>I'm <00:32:58.373>gonna <00:32:58.500>grab <00:32:58.628>it <00:32:58.755>from <00:32:58.882>the <00:32:59.010>server

624
00:33:00.250 --> 00:33:02.490
<00:33:00.250>as <00:33:00.530>well, <00:33:00.810>and <00:33:01.090>if <00:33:01.370>they're <00:33:01.650>different,

625
00:33:02.490 --> 00:33:03.990
<00:33:02.490>I'm <00:33:02.760>gonna <00:33:03.030>just <00:33:03.300>update <00:33:03.570>the <00:33:03.840>page

626
00:33:03.990 --> 00:33:06.810
<00:33:03.990>or <00:33:04.165>notify <00:33:04.340>the <00:33:04.515>user <00:33:04.690>that <00:33:04.865>there's <00:33:05.040>a <00:33:05.215>new <00:33:05.390>version.

627
00:33:07.450 --> 00:33:08.970
<00:33:07.450>Awesome, <00:33:08.134>thank <00:33:08.818>you.

628
00:33:09.150 --> 00:33:11.610
<00:33:09.150>I <00:33:09.305>think <00:33:09.461>it's <00:33:09.616>similar <00:33:09.772>to <00:33:09.927>this, <00:33:10.083>how <00:33:10.238>to <00:33:10.394>make <00:33:10.550>sure

629
00:33:11.610 --> 00:33:14.290
<00:33:11.610>that <00:33:11.784>your <00:33:11.959>cache <00:33:12.135>is <00:33:12.310>up <00:33:12.485>to <00:33:12.659>date <00:33:12.834>with <00:33:13.010>server,

630
00:33:14.290 --> 00:33:15.290
<00:33:14.290>Right? <00:33:14.590>Yeah, <00:33:14.889>something <00:33:15.190>like

631
00:33:15.290 --> 00:33:16.370
<00:33:15.290>that, <00:33:16.262>yeah.

632
00:33:16.370 --> 00:33:18.990
<00:33:16.370>And <00:33:16.603>how <00:33:16.836>do <00:33:17.070>you <00:33:17.303>invalidate <00:33:17.536>the <00:33:17.770>cache?

633
00:33:19.230 --> 00:33:20.790
<00:33:19.230>Just <00:33:19.696>throw <00:33:20.163>it <00:33:20.630>away.

634
00:33:21.170 --> 00:33:23.550
<00:33:21.170>Or <00:33:21.450>you <00:33:21.730>can <00:33:22.010>also <00:33:22.290>say, <00:33:22.570>well,

635
00:33:23.550 --> 00:33:27.950
<00:33:23.550>I <00:33:23.725>wanna <00:33:23.899>throw <00:33:24.075>away <00:33:24.250>specific <00:33:24.425>files, <00:33:24.600>that's <00:33:24.774>also <00:33:24.950>possible,

636
00:33:27.950 --> 00:33:32.090
<00:33:27.950>and <00:33:28.125>maybe <00:33:28.300>that's <00:33:28.475>even <00:33:28.650>more <00:33:28.825>feasible <00:33:29.000>for <00:33:29.175>production <00:33:29.350>websites.

637
00:33:33.070 --> 00:33:35.750
<00:33:33.070>Isn't <00:33:33.419>this <00:33:33.770>only <00:33:34.120>really <00:33:34.470>applicable,

638
00:33:35.750 --> 00:33:37.470
<00:33:35.750>provided <00:33:36.030>your <00:33:36.310>page <00:33:36.590>features <00:33:36.870>a <00:33:37.150>lot

639
00:33:37.470 --> 00:33:39.350
<00:33:37.470>of <00:33:37.820>static <00:33:38.170>content, <00:33:38.520>like <00:33:38.870>service

640
00:33:39.350 --> 00:33:40.350
<00:33:39.350>Workers? <00:33:39.574>Well, <00:33:39.800>you <00:33:40.024>can <00:33:40.250>use

641
00:33:40.350 --> 00:33:42.690
<00:33:40.350>it <00:33:40.629>with <00:33:40.909>API <00:33:41.189>calls <00:33:41.469>as <00:33:41.750>well.

642
00:33:42.690 --> 00:33:44.310
<00:33:42.690>I <00:33:43.040>haven't <00:33:43.390>mentioned <00:33:43.740>it <00:33:44.090>here,

643
00:33:44.310 --> 00:33:47.970
<00:33:44.310>but <00:33:44.450>you <00:33:44.590>can <00:33:44.730>use, <00:33:44.870>for <00:33:45.010>instance, <00:33:45.149>another <00:33:45.290>way <00:33:45.429>of <00:33:45.570>storing <00:33:45.710>data

644
00:33:47.970 --> 00:33:50.250
<00:33:47.970>with <00:33:48.250>the <00:33:48.530>IndexDB <00:33:48.810>in <00:33:49.090>the <00:33:49.370>browser,

645
00:33:50.250 --> 00:33:54.610
<00:33:50.250>and <00:33:50.390>you <00:33:50.530>can <00:33:50.670>do <00:33:50.810>the <00:33:50.950>API <00:33:51.090>call, <00:33:51.230>store <00:33:51.370>it <00:33:51.510>in <00:33:51.650>IndexDB,

646
00:33:54.610 --> 00:33:55.830
<00:33:54.610>and <00:33:54.829>serve <00:33:55.049>it <00:33:55.268>to <00:33:55.488>the <00:33:55.707>user,

647
00:33:55.830 --> 00:33:57.730
<00:33:55.830>and <00:33:56.030>the <00:33:56.230>next <00:33:56.429>time <00:33:56.629>you <00:33:56.830>can <00:33:57.030>use <00:33:57.230>that,

648
00:33:57.730 --> 00:34:00.930
<00:33:57.730>what's <00:33:57.885>in <00:33:58.041>IndexDB <00:33:58.196>already, <00:33:58.352>and <00:33:58.507>again, <00:33:58.663>go <00:33:58.818>to <00:33:58.974>the <00:33:59.130>server

649
00:34:00.930 --> 00:34:04.150
<00:34:00.930>and <00:34:01.070>see <00:34:01.210>if <00:34:01.350>it's <00:34:01.490>different <00:34:01.630>or <00:34:01.770>not, <00:34:01.910>just <00:34:02.050>update <00:34:02.190>the <00:34:02.330>page.

650
00:34:04.150 --> 00:34:06.970
<00:34:04.150>Or <00:34:04.290>do <00:34:04.430>it <00:34:04.570>the <00:34:04.710>other <00:34:04.850>way <00:34:04.990>around, <00:34:05.130>go <00:34:05.270>to <00:34:05.410>the <00:34:05.550>server,

651
00:34:06.970 --> 00:34:10.690
<00:34:06.970>if <00:34:07.110>it's <00:34:07.250>not <00:34:07.390>there, <00:34:07.530>serve <00:34:07.670>it <00:34:07.810>from <00:34:07.950>the <00:34:08.090>cache, <00:34:08.230>for <00:34:08.370>instance.

652
00:34:11.090 --> 00:34:14.110
<00:34:11.090>Thank <00:34:11.290>you. <00:34:11.490>I'll <00:34:11.690>just <00:34:11.890>take <00:34:12.090>one <00:34:12.290>last <00:34:12.490>question.

653
00:34:16.730 --> 00:34:19.890
<00:34:16.730>Everybody <00:34:16.905>using <00:34:17.080>the <00:34:17.255>page <00:34:17.429>has <00:34:17.605>to <00:34:17.780>cache <00:34:17.955>the <00:34:18.130>content

654
00:34:19.890 --> 00:34:22.050
<00:34:19.889>for <00:34:20.589>offline <00:34:21.290>case.

655
00:34:22.050 --> 00:34:25.750
<00:34:22.050>Isn't <00:34:22.283>it <00:34:22.516>against <00:34:22.750>the <00:34:22.983>sustainable <00:34:23.216>carbon <00:34:23.450>footprint?

656
00:34:25.830 --> 00:34:30.310
<00:34:25.830>Against <00:34:26.110>what? <00:34:26.389>Against <00:34:26.670>sustainable <00:34:26.949>carbon <00:34:27.230>footprint.

657
00:34:30.530 --> 00:34:32.170
<00:34:30.530>Oh, <00:34:31.230>like <00:34:31.930>that.

658
00:34:35.230 --> 00:34:38.890
<00:34:35.230>Yeah, <00:34:35.429>I <00:34:35.630>think <00:34:35.830>it's <00:34:36.030>a <00:34:36.230>small <00:34:36.429>part <00:34:36.630>of

659
00:34:38.890 --> 00:34:40.370
<00:34:38.889>what <00:34:39.156>we're <00:34:39.422>doing <00:34:39.689>on <00:34:39.955>the <00:34:40.221>internet

660
00:34:40.370 --> 00:34:45.070
<00:34:40.370>with <00:34:40.525>the <00:34:40.681>big <00:34:40.836>stuff <00:34:40.992>like <00:34:41.147>Facebook <00:34:41.303>and <00:34:41.458>posting <00:34:41.614>cat <00:34:41.770>pictures

661
00:34:45.070 --> 00:34:46.790
<00:34:45.070>and <00:34:45.536>stuff <00:34:46.003>like <00:34:46.470>that.

662
00:34:46.950 --> 00:34:51.030
<00:34:46.949>So <00:34:47.105>yeah, <00:34:47.261>it's, <00:34:47.416>well, <00:34:47.572>I <00:34:47.727>would <00:34:47.883>say, <00:34:48.038>make <00:34:48.194>sure <00:34:48.350>that

663
00:34:51.030 --> 00:34:54.790
<00:34:51.030>for <00:34:51.205>instance, <00:34:51.380>your <00:34:51.555>website <00:34:51.730>runs <00:34:51.905>on <00:34:52.080>a <00:34:52.255>green <00:34:52.430>server.

664
00:34:54.830 --> 00:34:56.070
<00:34:54.830>Start <00:34:55.946>there.

665
00:34:57.570 --> 00:34:59.550
<00:34:57.570>Thank <00:34:57.725>you <00:34:57.881>so <00:34:58.036>much. <00:34:58.192>So <00:34:58.347>there <00:34:58.503>were <00:34:58.658>some <00:34:58.814>more <00:34:58.970>questions,

666
00:34:59.550 --> 00:35:01.790
<00:34:59.550>but <00:34:59.677>we <00:34:59.804>are <00:34:59.931>out <00:35:00.059>of <00:35:00.186>time, <00:35:00.313>but <00:35:00.440>you <00:35:00.568>can <00:35:00.695>always <00:35:00.822>catch <00:35:00.950>him

667
00:35:01.790 --> 00:35:03.050
<00:35:01.790>and <00:35:02.357>ask <00:35:02.924>more.

668
00:35:03.050 --> 00:35:05.410
<00:35:03.050>Thank <00:35:03.205>you <00:35:03.361>so <00:35:03.516>much <00:35:03.672>again <00:35:03.827>for <00:35:03.983>such <00:35:04.138>an <00:35:04.294>amazing <00:35:04.450>talk.

669
00:35:05.410 --> 00:35:07.490
<00:35:05.410>Thank <00:35:05.585>you <00:35:05.759>very <00:35:05.935>much. <00:35:06.109>Thank <00:35:06.285>you <00:35:06.460>for <00:35:06.634>being <00:35:06.810>here.

670
00:35:07.930 --> 00:35:10.110
<00:35:07.930>And <00:35:08.210>have <00:35:08.490>a <00:35:08.770>nice <00:35:09.049>party <00:35:09.330>tonight.

671
00:35:11.930 --> 00:35:14.510
<00:35:11.930>So <00:35:12.085>yeah, <00:35:12.241>I <00:35:12.396>think <00:35:12.552>it's <00:35:12.707>time <00:35:12.863>to <00:35:13.018>say <00:35:13.174>bye, <00:35:13.330>but

672
00:35:14.510 --> 00:35:18.390
<00:35:14.510>before <00:35:14.650>that, <00:35:14.790>tomorrow <00:35:14.930>we <00:35:15.070>will <00:35:15.210>be <00:35:15.350>back <00:35:15.490>with <00:35:15.630>again <00:35:15.770>a <00:35:15.910>set

673
00:35:18.390 --> 00:35:20.110
<00:35:18.390>of <00:35:18.856>another <00:35:19.323>amazing <00:35:19.790>talk.

674
00:35:20.110 --> 00:35:21.630
<00:35:20.110>So <00:35:20.383>be <00:35:20.657>sure <00:35:20.930>to <00:35:21.204>come <00:35:21.478>tomorrow

675
00:35:21.630 --> 00:35:25.710
<00:35:21.630>and <00:35:21.830>go <00:35:22.030>to <00:35:22.230>the <00:35:22.430>party <00:35:22.630>at <00:35:22.830>stage <00:35:23.030>one,

676
00:35:25.710 --> 00:35:27.550
<00:35:25.710>I <00:35:25.990>think <00:35:26.270>main <00:35:26.550>stage, <00:35:26.830>and <00:35:27.110>enjoy.

677
00:35:27.550 --> 00:35:29.190
<00:35:27.550>So <00:35:27.900>see <00:35:28.250>you <00:35:28.600>all <00:35:28.950>tomorrow.

678
00:35:34.800 --> 00:35:37.880
<00:35:34.800>You're <00:35:35.080>welcome. <00:35:35.360>Look, <00:35:35.640>I'm <00:35:35.920>Still <00:35:36.200>on.