1
00:00:02,370 --> 00:00:07,590
So far we're able to write data and we do this in a way which allows us to do it both from the normal

2
00:00:07,620 --> 00:00:09,570
Javascript code in the service worker,

3
00:00:09,570 --> 00:00:16,160
now of course we want to read data too, so that we can actually fetch data from our indexedDB. For that

4
00:00:16,170 --> 00:00:21,650
I'll create a new function which I'll name readAllData and you can of course choose any name you like.

5
00:00:21,660 --> 00:00:27,580
Now in this function, we need to get at least one argument, the store from which we want to read data

6
00:00:28,050 --> 00:00:32,010
and then I simply want to return dbPromise,

7
00:00:32,010 --> 00:00:37,050
so still accessing my database, opening a connection and having access to all the objects stores in

8
00:00:37,050 --> 00:00:39,080
there and just like before,

9
00:00:39,120 --> 00:00:45,500
we of course now chain a then block where we in the function get access to the opened database.

10
00:00:45,510 --> 00:00:49,500
Now the pattern is not that different from before, we create a transaction

11
00:00:49,500 --> 00:00:55,230
first of all because every operation has to be wrapped in a transaction. We do this with the transaction

12
00:00:55,230 --> 00:00:56,880
method on the database,

13
00:00:57,060 --> 00:00:59,450
we define which store we want to open,

14
00:00:59,460 --> 00:01:02,360
so that's the store argument we're getting here

15
00:01:02,730 --> 00:01:05,200
and then the type of transaction.

16
00:01:05,400 --> 00:01:10,680
Now before we used readwrite, here we only want to read so we can use readonly and again, make sure

17
00:01:10,680 --> 00:01:14,860
to not mistype that. Then we can open the store,

18
00:01:14,870 --> 00:01:21,510
so just as before we used the transaction, call object store and open the store we passed as an argument,

19
00:01:21,660 --> 00:01:23,250
so again this store

20
00:01:23,490 --> 00:01:27,840
and finally, we can simply return store get all.

21
00:01:27,840 --> 00:01:34,360
Now one difference you may notice is that before we called store put and return tx complete,

22
00:01:34,500 --> 00:01:39,750
now here we don't need to call tx complete because the transaction will complete but we don't need

23
00:01:39,750 --> 00:01:43,390
to return that to indicate that we need it to succeed,

24
00:01:43,540 --> 00:01:49,260
it's a get data operation, if it for some reason fails, we'd simply get back no data

25
00:01:49,290 --> 00:01:54,930
but we never try to change the database. So database integrity was never in danger and therefore we

26
00:01:54,930 --> 00:01:56,780
can directly return the results

27
00:01:56,790 --> 00:01:59,810
and again if that fails, that's just null, undefined

28
00:01:59,970 --> 00:02:01,870
but if it succeeds, that's good,

29
00:02:01,890 --> 00:02:06,780
we never have that case where we need to wait for transaction to successfully finish.

30
00:02:06,780 --> 00:02:11,580
So we get all the data back and now we can use that of course in our code.

31
00:02:11,730 --> 00:02:16,550
So back in feed.js here, I now want to use it.

32
00:02:16,590 --> 00:02:17,740
Now in the service worker,

33
00:02:17,760 --> 00:02:24,100
I didn't check whether we had access to indexedDB because in service workers, we have

34
00:02:24,420 --> 00:02:29,670
but here in the feed.js file, we might not have that access because maybe we're in a browser

35
00:02:29,670 --> 00:02:35,900
which doesn't support indexedDB, even though we saw that 93% of all browsers already support it

36
00:02:35,940 --> 00:02:37,860
at the point of time I'm recording this,

37
00:02:38,160 --> 00:02:42,660
still, better safe than sorry. Before we used caches here,

38
00:02:42,660 --> 00:02:45,970
now I want to check if indexedDB is available. So for that,

39
00:02:45,990 --> 00:02:53,820
I'll simply check if indexedDB is available in window and make sure to not mistype this, DB are two capital

40
00:02:53,820 --> 00:02:58,160
characters. This make sure that the browser supports it and now in there,

41
00:02:58,170 --> 00:03:00,310
I of course want to access it.

42
00:03:00,420 --> 00:03:04,710
I no longer need to match any cache here or something like that,

43
00:03:04,710 --> 00:03:11,170
instead what I'll do is I'll call read all data which I can only call if we import utility.js

44
00:03:11,190 --> 00:03:12,100
.

45
00:03:12,150 --> 00:03:18,460
So let's go back to index.html and before we import feed, I need to import utility.

46
00:03:18,480 --> 00:03:21,600
I'll do it right after IDB, though you need of course

47
00:03:21,600 --> 00:03:24,840
make sure to keep that order because in utility.js,

48
00:03:24,870 --> 00:03:26,880
we use IDB, so we need to import

49
00:03:26,910 --> 00:03:31,110
IDB first and we need to import utility before we import feed.

50
00:03:31,560 --> 00:03:32,760
So now we import that

51
00:03:32,820 --> 00:03:36,270
and now in the feed.js, we can safely call read all data

52
00:03:36,600 --> 00:03:41,860
and of course I want to read all data from my posts data store.

53
00:03:42,300 --> 00:03:48,290
Now with that, we can call then because read all data returns get all

54
00:03:48,330 --> 00:03:51,890
and that happens to be a promise which resolves once the data was read.

55
00:03:52,170 --> 00:03:54,070
So here, we can use that data,

56
00:03:54,180 --> 00:04:00,390
so in function we get back the data we stored and that data will simply be an array of all the values

57
00:04:00,390 --> 00:04:01,130
we had.

58
00:04:01,530 --> 00:04:04,930
So in there I'll first of all check if we didn't receive the network data yet

59
00:04:05,070 --> 00:04:12,720
because if we did, I don't want to overwrite it with the cache and then I'll simply log from cache again

60
00:04:12,780 --> 00:04:16,330
and output the data we get back and thereafter,

61
00:04:16,380 --> 00:04:19,400
I want to call updateUI with that data.

62
00:04:19,560 --> 00:04:26,940
Now updateUI thankfully already expects an array of data so we should be safe to simply call updateUI

63
00:04:27,030 --> 00:04:28,970
and pass the data to it

64
00:04:29,040 --> 00:04:33,450
and in there, we'll loop through the data and it should be an array already.

65
00:04:33,450 --> 00:04:36,430
Now let's see if that works as expected.

66
00:04:36,480 --> 00:04:42,480
Since I also changed feed.js, I'll simply go back to my service worker and bump up the static

67
00:04:42,480 --> 00:04:47,370
cache version here to make sure we fetch a new version, though it doesn't really matter because I'll

68
00:04:47,370 --> 00:04:57,470
use clear anyways, so clear storage, clear site data and then reload to install and activate. Now as you

69
00:04:57,470 --> 00:05:01,100
can see, we have a problem with utility.js here.

70
00:05:01,160 --> 00:05:07,360
Now the reason for this is that I have a typo in the name, so let's name it

71
00:05:09,200 --> 00:05:17,420
utility, this looks better. Let's make sure I have it correctly in all the imports, utility and in the

72
00:05:17,420 --> 00:05:19,650
service worker, it's also utility.

73
00:05:20,000 --> 00:05:20,300
OK,

74
00:05:20,300 --> 00:05:26,440
so let's quickly clear the storage again and reload and see if that error is gone now, that looks better.

75
00:05:26,450 --> 00:05:28,410
You see from cache, it's an empty array now

76
00:05:28,430 --> 00:05:30,280
because nothing is in the cache yet,

77
00:05:30,560 --> 00:05:33,060
if I reload one more time, it should be written to the cache

78
00:05:33,350 --> 00:05:35,810
and now it should fetch it from the cache too

79
00:05:35,930 --> 00:05:41,040
and you see it is an array which has elements which have exactly the structure we expect them to have.

80
00:05:41,360 --> 00:05:49,640
So now if we go offline, we should still see our card here and we do. Now by the way, here's a bonus

81
00:05:49,640 --> 00:05:50,790
point you can earn,

82
00:05:50,900 --> 00:05:53,150
why does the image still work?

83
00:05:53,150 --> 00:05:59,160
Keep in mind in indexedDB, we only store a link to that image, here

84
00:05:59,180 --> 00:06:01,610
we don't store the full image there, just the link,

85
00:06:01,700 --> 00:06:03,980
so this needs to be fetched from the Internet.

86
00:06:03,980 --> 00:06:06,110
Why does it still work then if we're offline?

87
00:06:09,040 --> 00:06:10,590
Did you figure it out?

88
00:06:10,640 --> 00:06:16,250
The reason of course is our dynamic caching The image here is fetched just like all the other assets we have

89
00:06:16,250 --> 00:06:17,420
in our application

90
00:06:17,420 --> 00:06:23,570
and therefore if we inspect our cache here, the dynamic one, we see that it was simply added to it which

91
00:06:23,570 --> 00:06:26,590
makes sense and which is absolutely the behavior we want.

92
00:06:26,840 --> 00:06:34,700
So that is why we have an offline functioning application here using indexedDB instead of the normal

93
00:06:34,790 --> 00:06:35,620
network here

94
00:06:35,660 --> 00:06:38,000
or instead of the cache we used before.