1
00:00:02,230 --> 00:00:08,330
So let's dive into that and let's start with TASC one identified a strategy we currently use in the

2
00:00:08,330 --> 00:00:12,680
service work or so here which strategy is this.

3
00:00:13,010 --> 00:00:14,630
Well let's analyze it.

4
00:00:14,720 --> 00:00:23,570
We respond with something where we first look into our cash and see if we can find the requestor then

5
00:00:24,260 --> 00:00:29,330
if we have a valid response we return it else.

6
00:00:29,420 --> 00:00:36,710
If the response is null we return a fetch request where we simply reach out to the network with the

7
00:00:36,710 --> 00:00:44,870
original request which we caught and then we take that response from the network store it in the cash

8
00:00:45,740 --> 00:00:47,090
and return it.

9
00:00:47,480 --> 00:00:50,330
So what is this strategy.

10
00:00:51,550 --> 00:00:55,300
It's the cash fall back to network strategy.

11
00:00:55,360 --> 00:01:00,750
We look at the cash first but if we don't find a response there we reach out to the network.

12
00:01:00,880 --> 00:01:06,580
And besides that we all support any network response we get into the cash to add dynamic caching to

13
00:01:06,580 --> 00:01:06,960
it.

14
00:01:07,090 --> 00:01:12,140
That's kind of part of the strategy but the strategy would all work without deadline here.

15
00:01:12,160 --> 00:01:17,920
So we could remove that and we would still have a cash fall back to strategy to network strategy.

16
00:01:17,950 --> 00:01:20,970
So is the answer to the first task.

17
00:01:21,100 --> 00:01:22,200
I'll put it below it.

18
00:01:22,300 --> 00:01:29,370
It's cash fall back to network with dynamic caching if you want to add this optional.

19
00:01:29,380 --> 00:01:32,640
But yeah we do store everything in the cash.

20
00:01:32,780 --> 00:01:37,730
Let's move on to task to a network only strategy.

21
00:01:37,730 --> 00:01:47,670
So for that here I will simply copy the strategy we already have cash and fall back and we'll comment

22
00:01:47,680 --> 00:01:48,620
it out.

23
00:01:48,630 --> 00:01:51,910
I just copied it so that we still have it here for reference.

24
00:01:52,320 --> 00:01:54,720
So the goal is network only.

25
00:01:55,170 --> 00:02:02,400
Well that actually is easy to implement we could ever remove the listener altogether because then we

26
00:02:02,400 --> 00:02:08,100
reach out to the network any ways in our code and the next extremophile when we fetch files and so on

27
00:02:08,880 --> 00:02:11,490
or we leave the eventless are here.

28
00:02:11,610 --> 00:02:16,030
But then we don't respond with cash match.

29
00:02:16,140 --> 00:02:24,510
Instead we respond by simply reaching out to the Web by simply sending a fecche request and then we

30
00:02:24,510 --> 00:02:27,420
can still opt to store dead in the cache.

31
00:02:27,420 --> 00:02:31,740
However it doesn't really make a difference because we're not really loading any friend from the cache

32
00:02:32,040 --> 00:02:35,310
so he can't get rid of that and just returned the fetch request.

33
00:02:35,340 --> 00:02:37,230
That's super simple.

34
00:02:37,230 --> 00:02:44,880
Now let's save this and I changed you made a Jaspal but only edit this line so I don't need to bump

35
00:02:44,880 --> 00:02:47,970
up the word in my service worker.

36
00:02:48,150 --> 00:02:55,860
So let's just safety service worker go back to the assignment and there is always you can reload and

37
00:02:55,860 --> 00:03:02,860
then simply close the tab and open one or application clear storage clear site data.

38
00:03:02,970 --> 00:03:09,360
As I wrote in the instructions then reload everything and those you see service worker is registered

39
00:03:09,960 --> 00:03:11,750
and the application still works.

40
00:03:11,970 --> 00:03:20,880
And if we inspect this box you're the width at the height 310 that actually is five times my IP the

41
00:03:20,880 --> 00:03:22,950
first two digits 1:54.

42
00:03:23,070 --> 00:03:24,700
So that works.

43
00:03:24,750 --> 00:03:31,350
So with that we got this set and we got our first assignments solved.

44
00:03:31,350 --> 00:03:37,840
We always reach out to the network here for completeness sake let's see what happens if we go off line.

45
00:03:37,860 --> 00:03:42,000
Unsurprisingly our application crashes because we have no cash fallback.

46
00:03:42,030 --> 00:03:44,100
We always reach out to the network.

47
00:03:44,160 --> 00:03:47,910
So this is a task he has solved a network only strategy.

48
00:03:48,110 --> 00:03:53,970
I will add it above it so that we have there for reference network only.

49
00:03:54,120 --> 00:03:56,500
Let's move on to task free.

50
00:03:56,560 --> 00:03:58,600
A cash only strategy.

51
00:03:58,620 --> 00:04:02,950
So back in the service worker we now work on this again.

52
00:04:02,980 --> 00:04:10,080
No I will copy it and then comment it out the network only strategy and now I want to have a cash only

53
00:04:10,080 --> 00:04:11,040
strategy.

54
00:04:11,370 --> 00:04:12,740
Well that's simple too.

55
00:04:13,050 --> 00:04:23,960
Instead of fetching here we was cashers and we see if we can find the request in our cash then we have

56
00:04:23,960 --> 00:04:31,400
a function where I would get a response if we fail not if we find it under all circumstances and I returned

57
00:04:31,400 --> 00:04:34,730
that response the response might be nulled though.

58
00:04:34,910 --> 00:04:41,720
And to abbreviate it or to make it a bit shorter I can also remove that if all I'm doing is returning

59
00:04:41,720 --> 00:04:43,490
the response in all circumstances.

60
00:04:43,550 --> 00:04:47,840
I can leave out the then call and just call cash this match.

61
00:04:47,840 --> 00:04:53,920
Now with that we only return stuff from the cash and if it's not on the cash well we can't use it.

62
00:04:54,320 --> 00:04:56,720
So back to our application here.

63
00:04:56,840 --> 00:05:04,990
If I reload it and then go to application clear storage clear site data reload again.

64
00:05:05,950 --> 00:05:10,490
It's working under the network tab if I reloaders one more time.

65
00:05:10,490 --> 00:05:12,880
We see everything is loaded from the service worker.

66
00:05:13,090 --> 00:05:18,940
Now however on the second reload which we needed to do because the service worker is only now controlling

67
00:05:18,940 --> 00:05:24,290
this page here we now see that a couple of things failed.

68
00:05:24,490 --> 00:05:27,490
All the dynamic things only are static.

69
00:05:27,490 --> 00:05:29,130
Cache works.

70
00:05:29,170 --> 00:05:34,600
So if I told them that it works but it doesn't use you recalculate the width because it never got my

71
00:05:34,600 --> 00:05:35,370
IP.

72
00:05:35,380 --> 00:05:38,390
You also don't see it in the console log.

73
00:05:38,410 --> 00:05:43,510
The reason for it is of course as I only reach out to the cache and if I don't find it there the request

74
00:05:43,510 --> 00:05:44,190
is dead.

75
00:05:44,290 --> 00:05:46,740
I don't let it continue to the network.

76
00:05:46,780 --> 00:05:54,710
Now obviously this is an issue because the only things we have in the cache once we cleared it is the

77
00:05:54,710 --> 00:05:58,010
part we cash statically during installation.

78
00:05:58,190 --> 00:06:00,080
So we only have the static cash.

79
00:06:00,290 --> 00:06:05,280
That's why the base styling is working why our application shell was loaded.

80
00:06:05,480 --> 00:06:11,660
But it's also a reason why we don't have any icons and why we are not able to get the IP because all

81
00:06:11,660 --> 00:06:14,390
that dynamic stuff isn't loaded.

82
00:06:14,690 --> 00:06:16,100
So that's cash only.

83
00:06:16,100 --> 00:06:18,160
And that's the downside of cash only.

84
00:06:18,500 --> 00:06:25,880
Let's move on to task for replace it with network cache fallback strategy.

85
00:06:25,910 --> 00:06:31,090
So now the goal is to first reach out to the network and only if that fails.

86
00:06:31,160 --> 00:06:34,450
We want to reach out to the cash but we can't do that.

87
00:06:34,760 --> 00:06:41,720
Let me first of all copy the old listener here and comment it out again so that we have it for reference

88
00:06:41,720 --> 00:06:43,510
here but we don't want to use it anymore.

89
00:06:43,780 --> 00:06:49,000
And now the goal is network fall back to cash.

90
00:06:49,130 --> 00:06:53,680
Kind of the opposite of what we had at the beginning where we had cash fall back to network.

91
00:06:54,170 --> 00:07:02,430
So here the goal is to respond with a request were to do well to the request we wanted to get.

92
00:07:02,810 --> 00:07:09,100
But then we catch it if it fails if it does not fail it's all we wanted we got back the response.

93
00:07:09,230 --> 00:07:12,560
But the fallback is to reach out to the cash.

94
00:07:12,590 --> 00:07:19,940
So here in case we get some error we want to reach up to the cash so we could return cash has to access

95
00:07:19,970 --> 00:07:21,330
all cash that we have.

96
00:07:21,500 --> 00:07:24,750
And see if it got a hit in any of these caches.

97
00:07:25,070 --> 00:07:32,420
So I'll check if the request can be found in any of the caches that actually is already all I don't

98
00:07:32,420 --> 00:07:34,180
need to do much more than that.

99
00:07:34,490 --> 00:07:38,320
Let's save this go back to the application again.

100
00:07:39,240 --> 00:07:46,020
There to the application tab and Cleator storage clear to site data reload once to install the service

101
00:07:46,020 --> 00:07:50,440
Rooker and reload a second time to put this under control of the service worker.

102
00:07:51,000 --> 00:07:54,270
And now it's network fall back to cash.

103
00:07:54,370 --> 00:07:59,490
Therefore on the network tab we see everything is fetched from the network in the end year which makes

104
00:07:59,490 --> 00:08:02,370
sense because we first pass it to the service worker.

105
00:08:02,490 --> 00:08:06,330
But then they we decide hey I want to make a fecche request.

106
00:08:06,330 --> 00:08:12,220
Now let's see what happens if I go off line by taking this box for now reload.

107
00:08:12,480 --> 00:08:17,850
It still works except for you dynamically loaded things because we're not doing dynamic caching right

108
00:08:17,850 --> 00:08:18,380
now.

109
00:08:18,570 --> 00:08:24,960
We have no code to put things into the cache once you got them but it still works.

110
00:08:24,960 --> 00:08:26,560
You can see in the narrative.

111
00:08:26,640 --> 00:08:32,640
Now we fetch most stuff from the service worker directly our network request failed but that's no issue.

112
00:08:32,640 --> 00:08:33,990
We have it in the service worker.

113
00:08:33,990 --> 00:08:37,530
That's why it's still in the cache which we load for the service worker.

114
00:08:37,560 --> 00:08:39,490
That's why it's still working.

115
00:08:39,540 --> 00:08:46,880
Now keep in mind the downside of this approach is that if you have a network which isn't just adequate

116
00:08:46,890 --> 00:08:54,690
lable but which is somehow flaky which is gone after a while you have to wait until the request fails

117
00:08:54,870 --> 00:08:57,010
and only then catch us executed.

118
00:08:57,090 --> 00:08:58,490
So this might be too late.

119
00:08:58,530 --> 00:09:01,730
It can lead to a bad user experience.

120
00:09:01,740 --> 00:09:09,300
Now let's earn some bonus points by also adding a listener and make sure that we cache any responses

121
00:09:09,300 --> 00:09:13,710
we get back to add dynamic caching back into the game again.

122
00:09:13,830 --> 00:09:15,490
This is purely optional.

123
00:09:15,570 --> 00:09:18,110
Feel free to pause now and try it on your own.

124
00:09:19,430 --> 00:09:20,840
And now we do it together.

125
00:09:21,050 --> 00:09:26,340
So here we got a response and then I want to store that in my cash right.

126
00:09:26,390 --> 00:09:34,120
So what I can do is I can simply reach out to my cashiers and open the dynamic cash.

127
00:09:34,370 --> 00:09:43,420
So if the dynamic name will change then here in there I have access to that cash in the function here

128
00:09:43,930 --> 00:09:52,340
and all of cash I can put I want to put my event request URL and store the response which I got.

129
00:09:52,510 --> 00:09:58,720
I also want to return the response and therefore I want to return cash this year which in the end will

130
00:09:58,990 --> 00:10:00,620
bring back that response.

131
00:10:00,940 --> 00:10:06,060
Here's one important thing though before we try this out make sure to call rest clone here.

132
00:10:06,400 --> 00:10:12,190
Otherwise you're consuming the request and therefore you can store it in the cash.

133
00:10:12,430 --> 00:10:14,770
So make sure to store a clone here.

134
00:10:14,850 --> 00:10:17,100
Now with that let's go back to the application.

135
00:10:17,260 --> 00:10:22,440
Let's go to clear storage clear site data reload.

136
00:10:23,010 --> 00:10:28,920
Two times actually to make sure that everything is under control of the service worker and go off line

137
00:10:29,580 --> 00:10:37,620
and you should see that the icons are available as is the adjusted size of the box here because in our

138
00:10:37,620 --> 00:10:42,570
dynamic cache we now store all the things we all have fetched over the network.

139
00:10:42,570 --> 00:10:46,390
These are just some bonus points but also nice practice.

140
00:10:46,890 --> 00:10:55,260
So with that we got this task solved to onto task 5 here wants to replace the network cache fallback

141
00:10:55,260 --> 00:10:58,400
strategy with the cache then network strategy.

142
00:10:58,740 --> 00:11:04,110
Now this is a strategy where we have to write code both in our javascript file here on the front end

143
00:11:04,140 --> 00:11:08,960
so to say so in the main don't just fall as well as in the service worker.

144
00:11:09,000 --> 00:11:10,870
Do you remember how it works though.

145
00:11:11,100 --> 00:11:12,390
Let's start in the main.

146
00:11:12,490 --> 00:11:16,020
Jaiswal here we're fetching our data.

147
00:11:16,290 --> 00:11:23,100
And actually after we do so we all want to see if we can already get the response from cache whilst

148
00:11:23,100 --> 00:11:25,740
the network request is still on its way.

149
00:11:25,770 --> 00:11:32,100
First of all we should check if the cashless object is available in the window so that we don't try

150
00:11:32,100 --> 00:11:35,170
to access a feature you know which isn't supported by the browser.

151
00:11:35,370 --> 00:11:38,010
If that's the case we want to reach out to the cache.

152
00:11:38,130 --> 00:11:42,930
So hearable is something called caches match and look for it.

153
00:11:42,940 --> 00:11:44,020
D you r l.

154
00:11:44,140 --> 00:11:47,800
I'm going to save that you are all in a new variable here.

155
00:11:47,800 --> 00:11:54,730
So let me quickly store it there and then use your l of course here in the fecche request and down there

156
00:11:54,790 --> 00:11:57,370
where I try to find it in the cache.

157
00:11:57,370 --> 00:12:00,920
Now then in function we get back to a response from the cache.

158
00:12:01,060 --> 00:12:06,160
Now it could be null could also be successful if response is set.

159
00:12:06,160 --> 00:12:09,960
So if you found something then I want to use it of course.

160
00:12:10,000 --> 00:12:15,080
So if that is the case I want to execute that code here.

161
00:12:15,300 --> 00:12:19,860
Well first of all though I need to return response Jason.

162
00:12:20,370 --> 00:12:27,300
This will then lead to the next then block here where I get the extract that Jason data there I can

163
00:12:27,300 --> 00:12:38,040
say console log from cache the data and here are old and want to use this code here to adjust a box

164
00:12:38,040 --> 00:12:45,390
style maybe let's multiply with 10 here to really see a difference or maybe with 20.

165
00:12:45,400 --> 00:12:49,970
And so really big so that we could see if the cache would win in the end.

166
00:12:49,990 --> 00:12:55,720
So here I'm retrieving or regin that's just what the software gives us back from the data object we

167
00:12:55,720 --> 00:13:00,910
extract that taking the first two characters from the AP multiplied and with 20 does what I'm doing

168
00:13:00,910 --> 00:13:01,650
here.

169
00:13:02,050 --> 00:13:04,720
So that's the cache case.

170
00:13:04,720 --> 00:13:11,050
We also reach out to the network though and we want to make sure that the network responds always wins.

171
00:13:11,050 --> 00:13:20,920
So what I'll do is create a new variable which will name network response received and I'll set it to

172
00:13:20,920 --> 00:13:22,990
false initially.

173
00:13:22,990 --> 00:13:30,280
Now once we get a network response though here in the fetch request handler.

174
00:13:30,300 --> 00:13:34,150
Also true because now I know I got data from the network.

175
00:13:34,240 --> 00:13:36,250
So I want to set it to true obviously.

176
00:13:36,580 --> 00:13:41,550
And down there in the cache I only want to use my data.

177
00:13:41,860 --> 00:13:44,270
If it's not true.

178
00:13:44,410 --> 00:13:50,140
So if not network data received a response received because if we did receive one I certainly don't

179
00:13:50,140 --> 00:13:53,710
want to override the data we got from the network.

180
00:13:53,710 --> 00:14:01,620
So this line here should always win this one year should only be used if no network response is there

181
00:14:01,620 --> 00:14:02,160
yet.

182
00:14:03,310 --> 00:14:04,050
Now that's nice.

183
00:14:04,050 --> 00:14:08,690
Re accessing the cashier we all want to add dynamic caching.

184
00:14:08,710 --> 00:14:14,530
That's the part we write on the service worker and it's obviously optional but you're never going to

185
00:14:14,530 --> 00:14:18,320
populate that cash if you don't at that logic.

186
00:14:18,360 --> 00:14:29,930
So I'm going to copy the network fall back to cash rule here and I will add dynamic caching for network

187
00:14:30,910 --> 00:14:36,750
excuse me for cash then network strategy because that's all we're doing here.

188
00:14:36,820 --> 00:14:41,470
Some dynamic caching we do this by responding with something special.

189
00:14:41,470 --> 00:14:48,370
We're responding with cash is open and I want to open my dynamic cash here so that I can write into

190
00:14:48,370 --> 00:14:49,000
it.

191
00:14:49,480 --> 00:14:55,160
So have a function here where we can access to cash them and in there.

192
00:14:55,480 --> 00:15:03,610
I now want to return my fetch call to event request to let debt continue because always keep in mind

193
00:15:03,970 --> 00:15:08,970
the service worker steps into the fecche coal we're issuing here in the main dodgiest fall.

194
00:15:08,980 --> 00:15:11,330
So we definitely need to let this continue.

195
00:15:11,440 --> 00:15:14,000
We do by returning fecche request.

196
00:15:14,110 --> 00:15:19,140
However we also want to get access to the data out there.

197
00:15:19,390 --> 00:15:26,330
So we have a function here where we get the response where I now want to store it in the cash.

198
00:15:26,530 --> 00:15:33,400
So here I will have access to cash we have access to Frew dysfunction because we opened the cash call

199
00:15:33,400 --> 00:15:38,320
put and for event request you are l.

200
00:15:38,380 --> 00:15:44,940
By the way you could all the chest use request that would all the work I want to store a clone of the

201
00:15:44,940 --> 00:15:45,990
response.

202
00:15:45,990 --> 00:15:52,260
And of course return your original response so that we do pass something back for the fetch request

203
00:15:52,410 --> 00:15:55,180
coming from the main dot js file.

204
00:15:55,260 --> 00:16:00,530
Actually this will of course be run on any fecche request coming from anywhere in our application but

205
00:16:00,530 --> 00:16:03,530
we're specifically writing it for this year.

206
00:16:03,960 --> 00:16:06,320
So now we do have some place.

207
00:16:06,660 --> 00:16:17,070
If we now save this let's go back and clear the storage in our application reload the application here

208
00:16:17,460 --> 00:16:26,760
twice and now we see from cache undefined because it's not in there if I reload this one more time though

209
00:16:26,790 --> 00:16:32,800
we see from cache it found something because too dynamic caching it was stored there.

210
00:16:32,840 --> 00:16:39,510
What will also see though is that on the network we do fetch it from the network in the end which makes

211
00:16:39,510 --> 00:16:43,320
sense because we have a cache Denn network strategy.

212
00:16:43,320 --> 00:16:51,010
We'll see though that if I go off line everything breaks the reason for this is that in the service

213
00:16:51,010 --> 00:16:55,020
worker we have no logic to return anything.

214
00:16:55,030 --> 00:17:00,810
If we're off line we're not returning anything we're just storing something for requests we get.

215
00:17:01,300 --> 00:17:08,620
So this is the part which leads up to the last task offers assignment where we want to differentiate

216
00:17:08,980 --> 00:17:16,060
based on the you are l of the request which strategy we use so that for some of you or else we do return

217
00:17:16,090 --> 00:17:20,670
a page we reached the final part of his assignment task 6.

218
00:17:20,860 --> 00:17:28,570
There I now want you to use routeing or you are parsing to pick the right strategies for different types

219
00:17:28,570 --> 00:17:35,290
of requests or requests targeting different view or else I want to implement to cache the network strategy

220
00:17:35,350 --> 00:17:36,820
which we just added.

221
00:17:37,270 --> 00:17:40,860
But I also wanted to add to cache with network Fulbeck strategy.

222
00:17:40,930 --> 00:17:47,230
The one we had at the very beginning of the assignment and cash only strategy and a promise you can

223
00:17:47,230 --> 00:17:50,550
fit all three of them into this simple project.

224
00:17:51,010 --> 00:17:57,670
So you will need if else and else if statements to make sure you parse different view or else this is

225
00:17:57,670 --> 00:17:59,430
probably the hardest part.

226
00:17:59,620 --> 00:18:02,590
But in the end it only uses things you saw in the last lectures.

227
00:18:02,590 --> 00:18:06,370
So feel free to jump back there to definitely try this on your own.

228
00:18:06,490 --> 00:18:08,590
Here's my solution.

229
00:18:08,650 --> 00:18:15,140
So we want to have cash the network for which kind of request would this make sense.

230
00:18:15,900 --> 00:18:24,090
Well only for one request for this one here because cache then network mostly happens in our normal

231
00:18:24,090 --> 00:18:27,860
javascript falls and there we only use it for this.

232
00:18:27,930 --> 00:18:31,700
L this block here that's to cache the network block.

233
00:18:32,310 --> 00:18:40,090
So therefore we should look for this you are L-N the service worker too and only use days.

234
00:18:40,110 --> 00:18:44,200
I just want to store logic here for this URL.

235
00:18:44,370 --> 00:18:53,710
So in the service worker here I will check in to see eventless her Ifti your L event request your l.

236
00:18:53,880 --> 00:19:00,960
If we can identify this Eurail as part of the request Eurail it should actually be to complete your

237
00:19:00,960 --> 00:19:07,830
Ehle But again just to be sure it's enough if it's part of Durell if debt is greater than minus one

238
00:19:07,830 --> 00:19:14,380
it means we found something we got a hit and then I want to use this and just store something.

239
00:19:14,910 --> 00:19:24,300
This allows me to then as the else case for example implement the cash then network fall back into cash

240
00:19:24,660 --> 00:19:28,440
or network fallback logic we had at the beginning.

241
00:19:28,440 --> 00:19:34,260
So let me copy that here from the very bottom and let's add it in the else block.

242
00:19:34,530 --> 00:19:37,380
And of course I need to remove the comments.

243
00:19:37,380 --> 00:19:43,680
So this makes sure that only for this you are l we just store it for all of our requests.

244
00:19:43,710 --> 00:19:48,270
We actually try to find a response in the cash if we don't find one.

245
00:19:48,270 --> 00:19:56,680
We reach out to the network Now we also were prompted to implement a cash only strategy though right

246
00:19:56,680 --> 00:20:00,000
now we only got the first two now.

247
00:20:00,010 --> 00:20:07,330
Cash only makes sense kind of for all the things we cash statically during installation because we know

248
00:20:07,330 --> 00:20:10,510
these items will be in the cash right from the start.

249
00:20:10,510 --> 00:20:15,340
So we can safely fall back to a strategy where we only fetched them from there.

250
00:20:15,340 --> 00:20:19,060
These are also not assets where we expect regular updates.

251
00:20:19,210 --> 00:20:24,450
So it's not a bad practice where it doesn't hurt to just get them from the cash.

252
00:20:24,940 --> 00:20:32,150
The things we want to cash dynamically would be the Obert page and we may CSA as file it's using the

253
00:20:32,210 --> 00:20:37,000
dynamic don't see us as follow for example which is not part of the strategy.

254
00:20:37,330 --> 00:20:39,270
Cash things here.

255
00:20:39,370 --> 00:20:42,120
So that is exactly what we're looking for.

256
00:20:42,160 --> 00:20:50,430
We want to make sure that everything which is part of this array here is loaded with a cash only strategy.

257
00:20:50,860 --> 00:21:01,450
So at Altes if case here where I want to look for this condition and I actually shared javascript snippet

258
00:21:01,480 --> 00:21:05,770
a regular expression in the last lectures where we use just debt.

259
00:21:05,800 --> 00:21:08,920
So feel free to simply reuse that of course.

260
00:21:08,960 --> 00:21:15,190
There I simply create a new regular expression where we had backslash backslash B.

261
00:21:15,700 --> 00:21:19,560
Then I would join my array of your else together.

262
00:21:19,660 --> 00:21:20,610
So I will do that.

263
00:21:20,620 --> 00:21:30,770
You are too static wups static files maybe is just dead arrays here we're passing to you at all.

264
00:21:30,880 --> 00:21:32,320
Let's store it here.

265
00:21:33,330 --> 00:21:42,060
And let's then use static falls here for at all but also at the bottom here and here.

266
00:21:42,140 --> 00:21:45,710
You're an else if to join it to gabber.

267
00:21:45,730 --> 00:21:51,500
So here we wanted to join with backslash backslash B pipe symbol.

268
00:21:51,650 --> 00:21:57,090
So I was the wrong character pipe symbol backslash backslash B.

269
00:21:57,640 --> 00:22:05,750
And thereafter add another word separator backslash backslash B and then simply test already when to

270
00:22:05,760 --> 00:22:07,530
request your l.

271
00:22:07,640 --> 00:22:12,930
This will find out if your L actually contains one of these requests.

272
00:22:12,970 --> 00:22:21,270
We store statically now with dad check your in place we can add to cash only strategy here.

273
00:22:21,270 --> 00:22:23,970
So we want to respond with just that.

274
00:22:23,970 --> 00:22:33,480
So let's quickly add that to your like debt and we make sure that all these statically cashed files

275
00:22:33,480 --> 00:22:36,860
are directly and only serve from the cache.

276
00:22:37,320 --> 00:22:41,170
Let's go back to our application clear to storage there.

277
00:22:42,390 --> 00:22:44,120
And reload it.

278
00:22:44,520 --> 00:22:46,560
So now we're loading from cash already.

279
00:22:46,580 --> 00:22:53,760
Now in the network we see that we're mostly loading stuff from our from the service worker.

280
00:22:53,760 --> 00:22:57,500
We also see that some things are failing though.

281
00:22:57,530 --> 00:23:03,660
Now the reason for this behavior that a lot of stuff is loaded from the service record but some files

282
00:23:03,660 --> 00:23:09,820
just fail is simply the way to us else if condition works here.

283
00:23:10,080 --> 00:23:14,540
It Right now consumes everything because there's one thing in this array.

284
00:23:14,610 --> 00:23:17,440
This leading slash which is part of every u r l.

285
00:23:17,460 --> 00:23:22,010
This is why this is true for every request you are all we get basically.

286
00:23:22,020 --> 00:23:30,450
Now to fix this all get rid of this term solution here and simply add a helper function which all name

287
00:23:30,990 --> 00:23:33,940
is in array there.

288
00:23:33,990 --> 00:23:39,320
I expect to get a string and array.

289
00:23:39,650 --> 00:23:44,750
And that in there I can simply whips in there I can simply loop through the array so I can check if

290
00:23:44,750 --> 00:23:50,270
for var equals zero as long as I'm smaller than the array length.

291
00:23:50,300 --> 00:23:51,960
I want to increment I.

292
00:23:52,460 --> 00:23:56,200
And then I can simply check if array.

293
00:23:56,660 --> 00:24:04,440
So the element I'm currently at if that is equal to string then I want to return true.

294
00:24:04,860 --> 00:24:09,660
Otherwise if I go for the whole loop without a hit all returns false.

295
00:24:09,750 --> 00:24:15,620
So now I can use it in array here and simply pass both went.

296
00:24:15,780 --> 00:24:22,220
Request your L as the word I want to check for and then static files.

297
00:24:22,230 --> 00:24:28,570
Now if there's emplace with this improvement here you should be able to go back to the application here.

298
00:24:29,260 --> 00:24:36,290
Whip's cleared of storage reload my application the ones to install everything reload twice.

299
00:24:36,290 --> 00:24:44,830
Now I can start at least back and with that if I now go back to off line mode it also still works.

300
00:24:45,750 --> 00:24:51,420
Here you see the cache wins in the cache and network condition which is why the box is very high.

301
00:24:51,600 --> 00:24:53,100
Because this is just what we do.

302
00:24:53,100 --> 00:24:57,110
We fetch it from the cache first and we multiply with 20 there.

303
00:24:57,120 --> 00:25:03,720
Remember if you go back to the main dot James fall here 20 years to case if he got the well from the

304
00:25:03,720 --> 00:25:07,870
cache and of course if we're off line we got no average chance to getting it from there.

305
00:25:07,950 --> 00:25:14,140
So this proves that this all works off line so does the rest of our application here to go back online

306
00:25:14,190 --> 00:25:15,230
and reload.

307
00:25:15,510 --> 00:25:19,040
Well then we see the box much smaller because now the network wins.

308
00:25:19,110 --> 00:25:24,690
And in the network we see the majority of fetch from the cache except for our dynamic thing where we

309
00:25:24,690 --> 00:25:29,600
have to cache then network condition so the network should win indeed.

310
00:25:29,610 --> 00:25:35,540
So this is now all working was quite some work it definitely not an easy exercise but worth it.

311
00:25:35,580 --> 00:25:37,050
And very important.

312
00:25:37,350 --> 00:25:41,370
I hope you'll learn a lot and definitely keep on practicing these things.

313
00:25:41,370 --> 00:25:43,470
I can only urge you to do so.

314
00:25:43,680 --> 00:25:46,210
It's so important to understand the strategies.

315
00:25:46,270 --> 00:25:48,290
Practice them in your own projects.

316
00:25:48,360 --> 00:25:50,590
So do you really feel confident using them.