1
00:00:02,220 --> 00:00:06,550
Another interesting strategy is network with cache fallback.

2
00:00:06,630 --> 00:00:09,060
Now this seems to make a lot of sense,

3
00:00:09,090 --> 00:00:15,060
we catch a request in a service worker and then we try to reach out to the network and only if that

4
00:00:15,060 --> 00:00:16,220
fetch fails,

5
00:00:16,290 --> 00:00:21,150
only in this case we reach out to the cache and return the asset from the cache,

6
00:00:21,150 --> 00:00:26,100
otherwise if the network access would have been successful, we would have returned the network response

7
00:00:26,130 --> 00:00:27,960
and ignored the cache.

8
00:00:27,960 --> 00:00:30,470
Now this seems to make a lot of sense, doesn't it?

9
00:00:30,600 --> 00:00:33,590
Because here, we take the best from both worlds,

10
00:00:33,780 --> 00:00:39,330
we have assets stored in the cache but we only use it if we have no network access.

11
00:00:39,330 --> 00:00:44,810
Now one downside is that we don't take advantage of the faster response with the cache which is also

12
00:00:44,850 --> 00:00:47,070
good even if we have Internet connection

13
00:00:47,400 --> 00:00:50,470
but the major problem is the way that the network behaves

14
00:00:50,490 --> 00:00:54,120
if a fetch fails, it doesn't happen instantly.

15
00:00:54,120 --> 00:01:00,420
Now this is hard to simulate because here I either can turn my network on or off and if that network is totally

16
00:01:00,420 --> 00:01:02,400
off, the request fails instantly

17
00:01:02,670 --> 00:01:08,730
but imagine a very poor connection where the request times out after maybe 60 seconds, then you would

18
00:01:08,730 --> 00:01:14,270
have to wait for the full 60 seconds until you reach out to the cache as a backup,

19
00:01:14,430 --> 00:01:16,920
that's a horrible user experience of course.

20
00:01:16,920 --> 00:01:21,900
Let me still show you how this would look like because we're going to build up on this and improve it

21
00:01:22,050 --> 00:01:24,710
to find a really good caching strategy

22
00:01:24,750 --> 00:01:26,920
you actually want to use in a lot of cases.

23
00:01:27,030 --> 00:01:28,870
So how would you implement this one?

24
00:01:29,040 --> 00:01:36,660
Back in the service worker file, I'm going to copy our old service worker strategy again and I'm going

25
00:01:36,660 --> 00:01:44,580
to comment it in down here because I want to basically fine tune this a little bit. Now a network

26
00:01:44,580 --> 00:01:49,350
first, then cache strategy would actually look a bit differently.

27
00:01:49,530 --> 00:01:52,300
We wouldn't cache match at the beginning here,

28
00:01:52,620 --> 00:02:02,100
instead what we would do, we would fetch first. We would send event request as a fetch request and then

29
00:02:02,550 --> 00:02:05,010
we would handle any errors.

30
00:02:05,070 --> 00:02:10,710
We don't need to add a then block because if the request is successful, that's great because then we

31
00:02:10,710 --> 00:02:13,930
just use that response and don't care about caching

32
00:02:14,280 --> 00:02:21,630
but if it fails here in this function where we get an error, we could even parse that error and see

33
00:02:21,630 --> 00:02:22,900
why it fails

34
00:02:22,950 --> 00:02:28,540
but in all cases, in there we could then reach out to our cache,

35
00:02:28,800 --> 00:02:33,420
so basically grab that code here and put it in that catch block.

36
00:02:33,630 --> 00:02:38,610
So now we have a look, if we find that request anywhere in our cache

37
00:02:38,940 --> 00:02:44,000
and if we do, then we simply return that response.

38
00:02:44,010 --> 00:02:48,750
Now if we don't do, we don't need to do anything else because reaching out to the network doesn't make sense,

39
00:02:48,750 --> 00:02:49,940
we've been there before,

40
00:02:49,950 --> 00:02:51,170
it didn't work.

41
00:02:51,270 --> 00:02:58,760
So in the end what we can do is we can get rid even rid of this then block, we simply return caches match here

42
00:02:59,040 --> 00:03:01,440
because we only care about what we get back from the cache

43
00:03:01,530 --> 00:03:03,240
and if that is null, so be it,

44
00:03:03,240 --> 00:03:05,450
we tried to go to the network first,

45
00:03:05,490 --> 00:03:06,320
it failed

46
00:03:06,450 --> 00:03:09,950
so now the cache is our best chance if that fails too,

47
00:03:10,080 --> 00:03:11,680
that's how it is.

48
00:03:11,760 --> 00:03:13,680
Let's see how that works like.

49
00:03:13,710 --> 00:03:21,300
So now if I save this, I refresh the page to install the new service worker and then I will open a new

50
00:03:21,390 --> 00:03:29,850
tab and close the old one of course to activate the new service worker and now in there, you will see

51
00:03:30,000 --> 00:03:31,380
this all works fine,

52
00:03:31,380 --> 00:03:37,950
I have internet connection so I can use all of that. In the network tab, you also see that we load everything

53
00:03:37,950 --> 00:03:39,210
from the internet here,

54
00:03:39,240 --> 00:03:40,740
you can tell by the file sizes,

55
00:03:40,770 --> 00:03:46,350
so nothing is coming from the service workers cache here which makes sense because we have a network first

56
00:03:46,350 --> 00:03:47,230
strategy.

57
00:03:47,400 --> 00:03:52,810
Now if I go offline and I reload here, you should see that generally, it still works,

58
00:03:52,860 --> 00:03:57,630
the icons are missing, everything which was in dynamic cache before is missing because we're not doing

59
00:03:57,630 --> 00:03:59,210
dynamic caching here

60
00:03:59,520 --> 00:04:01,590
but in general, it works.

61
00:04:01,590 --> 00:04:07,710
However it works so good here because I turned off the connection, which simply is a signal that there

62
00:04:07,740 --> 00:04:09,090
is no connection.

63
00:04:09,120 --> 00:04:16,170
As I said, I can't simulate a connection which fails after 60 seconds here but if I would have such

64
00:04:16,170 --> 00:04:21,660
a connection here, this would be a super bad solution because there, we would really have to wait for

65
00:04:21,660 --> 00:04:24,430
it to fail before we reach this catch block

66
00:04:24,450 --> 00:04:26,960
and that is a bad user experience.

67
00:04:26,970 --> 00:04:30,160
So using this is not that common,

68
00:04:30,300 --> 00:04:36,490
you might find some cases where you can wait that long, maybe some background fetching you are doing

69
00:04:36,630 --> 00:04:42,390
but in general if it's critical to present something to the user quickly, don't use this strategy, use

70
00:04:42,390 --> 00:04:47,700
it again for assets which you can fetch in the background which don't need to be there immediately where

71
00:04:47,690 --> 00:04:56,040
this might be a nice way of getting them. As a side note, you can of course also connect this with a dynamic

72
00:04:56,040 --> 00:05:01,500
caching strategy, so you return a dynamic by adding a then block to the successful

73
00:05:01,840 --> 00:05:08,210
fetch, here you of course get your response and this is only called if the fetch is successful,

74
00:05:08,210 --> 00:05:16,450
so if we do have Internet connection and that in there, you can basically copy the code from our other strategy

75
00:05:16,450 --> 00:05:17,420
up there,

76
00:05:17,650 --> 00:05:25,090
so you basically just open the cache, the dynamic cache and then you put the request you made and the

77
00:05:25,090 --> 00:05:27,510
response in there and return the response.

78
00:05:27,700 --> 00:05:33,250
So now we're combining this network first strategy with dynamic caching,

79
00:05:33,310 --> 00:05:36,980
still not the best strategy due to the reasons mentioned.

80
00:05:37,030 --> 00:05:38,600
Let's see if that works though,

81
00:05:38,680 --> 00:05:44,330
let's go back to the application and load it, make sure that this is registered and that the service

82
00:05:44,330 --> 00:05:49,840
worker is installed, it is and with it installed, close the tab, open a new one

83
00:05:50,090 --> 00:05:52,160
and there you should see that

84
00:05:52,160 --> 00:06:01,140
now if I go offline, this page here still works with the icons because we have dynamic caching in place,

85
00:06:01,290 --> 00:06:02,540
help won't work.

86
00:06:02,790 --> 00:06:09,450
If I go online again though and navigate around to load both help URLs

87
00:06:09,500 --> 00:06:12,220
and now I go offline again, this works too.

88
00:06:12,380 --> 00:06:15,570
So now again, we got network first with dynamic caching,

89
00:06:15,570 --> 00:06:19,430
still not the best solution due to the timeout problem.