1
00:00:00,980 --> 00:00:05,740
Caching the process of retaining
application code within the browser so

2
00:00:05,740 --> 00:00:08,770
that the user does not have
to require another download

3
00:00:08,770 --> 00:00:11,450
if the browser already has the resource.

4
00:00:11,450 --> 00:00:14,920
This is a core concept
to working with the web.

5
00:00:14,920 --> 00:00:17,360
But as websites have become more app like,

6
00:00:17,360 --> 00:00:21,600
caching becomes a much more
complicated issue to address.

7
00:00:21,600 --> 00:00:26,110
In basic caching the browser simply
looks to see if the resource exists.

8
00:00:26,110 --> 00:00:28,140
It does not try to download it again.

9
00:00:28,140 --> 00:00:32,290
And web caching does not store
the whole app, only parts of the app.

10
00:00:33,700 --> 00:00:38,270
Also standard caching does not
allow apps to run offline.

11
00:00:38,270 --> 00:00:41,000
This is an important distinction,
as service workers will

12
00:00:41,000 --> 00:00:44,830
allow the app to still operate
without an internet connection.

13
00:00:44,830 --> 00:00:46,770
Until the browser's cache is deleted.

14
00:00:48,470 --> 00:00:49,510
Because of this,

15
00:00:49,510 --> 00:00:53,030
developers have come up with new ways
to store the app on your device.

16
00:00:54,290 --> 00:00:56,080
One such tool is service workers.

17
00:00:57,140 --> 00:01:01,260
A service worker is a small chunk of
JavaScript that instructs your browser

18
00:01:01,260 --> 00:01:05,120
to fetch the resources you want cached and
how to cache them properly.

19
00:01:06,270 --> 00:01:09,030
Just a few notes here
before we get started.

20
00:01:09,030 --> 00:01:11,070
Not supported by all browsers.

21
00:01:11,070 --> 00:01:16,950
Chrome, Opera, and Firefox do, Edge is in
development, Safari is in consideration.

22
00:01:16,950 --> 00:01:20,900
appCache is the old,
service workers is the new.

23
00:01:20,900 --> 00:01:22,950
Do not cache polyfills.

24
00:01:22,950 --> 00:01:27,740
Chances are the browsers that need
polyfills won't support service workers.

25
00:01:27,740 --> 00:01:30,260
Service workers offer a performance boost.

26
00:01:30,260 --> 00:01:35,500
You can pre-fetch and retain resources
better for your return users.

27
00:01:35,500 --> 00:01:40,130
Don't be too aggressive,
this will just add additional load time.

28
00:01:40,130 --> 00:01:44,770
Service workers require HTTPS,
this is a good thing.

29
00:01:46,380 --> 00:01:50,986
Now let's look at our Date picker app and
see how we can add service workers.

30
00:01:50,986 --> 00:01:55,360
First thing first in order to test this
locally we need to serve our localhost

31
00:01:55,360 --> 00:01:56,540
app on a secure server.

32
00:01:56,540 --> 00:02:00,800
A really simple tool for
this is to run HTTPS server.

33
00:02:00,800 --> 00:02:04,470
To install simply follow
the instructions here in the readme.

34
00:02:04,470 --> 00:02:06,520
Once installed and
we have processed our code,

35
00:02:06,520 --> 00:02:10,070
we simply launch the server
from within the disk directory.

36
00:02:10,070 --> 00:02:14,080
Keep in mind the server does not
support gzip files or HTTP/2,

37
00:02:14,080 --> 00:02:18,820
so we will be using standard minified
files for this portion of the course.

38
00:02:18,820 --> 00:02:21,960
With our server running,
we can get our URL of the app and

39
00:02:21,960 --> 00:02:23,840
open this up in the browser.

40
00:02:23,840 --> 00:02:27,020
Building from the previous project,
I have already built a disk directory and

41
00:02:27,020 --> 00:02:29,010
started the secure server.

42
00:02:29,010 --> 00:02:31,570
To check to see that we
are using the secured server,

43
00:02:31,570 --> 00:02:34,170
see the security tab in the inspector.

44
00:02:34,170 --> 00:02:37,410
Now that we are confident that we
are running in the secure server,

45
00:02:37,410 --> 00:02:39,480
let's built our service worker.

46
00:02:39,480 --> 00:02:43,900
A service worker is JavaScript that a
supporting browser knows what to do with.

47
00:02:43,900 --> 00:02:46,340
The technique files
progressive enhancement.

48
00:02:46,340 --> 00:02:50,610
If a browser does not support a service
worker it simply ignores the request.

49
00:02:50,610 --> 00:02:55,420
At this point, the cache addAll function
will simply cache the root of the site.

50
00:02:55,420 --> 00:02:59,450
But we need to be specific about the items
that we want to aggressively cache.

51
00:02:59,450 --> 00:03:02,810
So let's update this with the known
resources that we want to be functional

52
00:03:02,810 --> 00:03:04,300
offline.

53
00:03:04,300 --> 00:03:08,800
We need the HTML, CSS, and JavaScript,
needed to run the feature.

54
00:03:08,800 --> 00:03:11,990
Everything else is pretty boiler plate and
we don't need to change anything for

55
00:03:11,990 --> 00:03:13,380
our current purposes.

56
00:03:13,380 --> 00:03:17,110
But for more information be sure to take
a look at the links in the teachers notes.

57
00:03:18,230 --> 00:03:20,410
Now that we have our
service worker set up,

58
00:03:20,410 --> 00:03:23,420
we need to add this
reference to our HTML view.

59
00:03:23,420 --> 00:03:25,470
Open the index html file and

60
00:03:25,470 --> 00:03:29,480
near the bottom we need to add this
reference to test browser support.

61
00:03:29,480 --> 00:03:32,600
If it passes then register
the service worker.

62
00:03:32,600 --> 00:03:35,490
Notice that the service worker
is referenced in the root.

63
00:03:35,490 --> 00:03:37,770
Placing this file in
the root makes it easier and

64
00:03:37,770 --> 00:03:41,040
causes less confusion with routes,
and cached resources.

65
00:03:41,040 --> 00:03:46,100
But remember all JavaScript files are
minified and placed in the disk directory.

66
00:03:46,100 --> 00:03:49,470
We can make a simple update to the gulp
file to move this resource from

67
00:03:49,470 --> 00:03:50,350
disk to the root.

68
00:03:51,480 --> 00:03:52,930
Oops, we have a small problem.

69
00:03:52,930 --> 00:03:54,740
We have a timing issue.

70
00:03:54,740 --> 00:03:59,320
We have to ensure that this resource
is created before we move it.

71
00:03:59,320 --> 00:04:04,110
Earlier we used a wait function,
but here let's use gulp sequence.

72
00:04:04,110 --> 00:04:05,290
Let's add this module and

73
00:04:05,290 --> 00:04:10,180
then update the default gulp task with the
order of things that we need to happen.

74
00:04:10,180 --> 00:04:13,810
Running gulp at this time we should see
that the service worker file is now copied

75
00:04:13,810 --> 00:04:15,330
to the root directory.

76
00:04:15,330 --> 00:04:19,460
In Chrome to validate our new service
worker, we need to open the application

77
00:04:19,460 --> 00:04:23,290
tab in the Chrome Inspector and
then view the service worker menu item.

78
00:04:23,290 --> 00:04:26,150
At this point, we have a fully
functional service worker, but

79
00:04:26,150 --> 00:04:28,190
this base install we have a small problem.

80
00:04:28,190 --> 00:04:33,580
The service worker is not configured to
auto update when resources are updated.

81
00:04:33,580 --> 00:04:36,420
Let's go back to our service worker and
add two additional functions.

82
00:04:36,420 --> 00:04:40,239
These additional functions will instruct
our service worker on how to view from

83
00:04:40,239 --> 00:04:42,065
cache and how to understand updates.

84
00:04:42,065 --> 00:04:44,259
To process our updates, run gulp again.

85
00:04:49,458 --> 00:04:53,183
In the browser, we can see that
the service worker has been registered and

86
00:04:53,183 --> 00:04:55,359
we can view the items
in our cache storage.

87
00:04:58,579 --> 00:05:02,360
Let's go back to the code and update the
core CSS file to change the type color.

88
00:05:02,360 --> 00:05:05,591
We're going to run Gulp and
refresh back into the browser.

89
00:05:11,970 --> 00:05:15,085
After refresh we see
the UI change in the view.

90
00:05:15,085 --> 00:05:17,115
We can quickly go back to the CSS,

91
00:05:17,115 --> 00:05:21,135
update again, save, run gulp,
refresh the browser and

92
00:05:21,135 --> 00:05:25,025
see that we are getting our updates even
though we have a cache service worker.

93
00:05:25,025 --> 00:05:26,402
Things are working great.

94
00:05:26,402 --> 00:05:27,795
Let's go back and reset our UI.

95
00:05:36,681 --> 00:05:38,830
But what about offline?

96
00:05:38,830 --> 00:05:42,360
The point of a service worker is to have
access to the app without a solid data

97
00:05:42,360 --> 00:05:43,270
connection.

98
00:05:43,270 --> 00:05:45,329
Checking the offline
option in this panel and

99
00:05:45,329 --> 00:05:48,645
refreshing the browser, we see that
our app is still fully functional.

100
00:05:54,294 --> 00:05:58,280
Back in the application tab in
the left menu let's select manifest.

101
00:05:58,280 --> 00:06:01,140
A site manifest in conjunction
with a service worker

102
00:06:01,140 --> 00:06:04,310
really helps seal the deal
with that app like experience.

103
00:06:04,310 --> 00:06:09,590
Setup is simple and at the root of the
source we have a new file manifest.json.

104
00:06:09,590 --> 00:06:12,950
In this file, we put some boilerplate
code to get things started.

105
00:06:12,950 --> 00:06:15,650
As you see here,
we need to set some icon images.

106
00:06:15,650 --> 00:06:19,300
In our project, we have a new images
directory that we need to process.

107
00:06:19,300 --> 00:06:21,650
Remember the gulp image
process we did earlier?

108
00:06:21,650 --> 00:06:23,090
Let's get this back in here.

109
00:06:23,090 --> 00:06:28,660
Let's get gulp image in this project, and
let's create a new task called move image.

110
00:06:28,660 --> 00:06:31,490
Remember, we are going to keep
this an independent gulp process,

111
00:06:31,490 --> 00:06:36,040
as we don't want images to be
processed with each gulp update.

112
00:06:36,040 --> 00:06:40,550
Another thing we need to do is move the
manifest json file to the root of the disc

113
00:06:40,550 --> 00:06:41,930
directory as well.

114
00:06:41,930 --> 00:06:46,190
We can easily add this reference
to our move dist gulp task.

115
00:06:46,190 --> 00:06:50,820
Let's open the index html file and we need
to add two things to the head element.

116
00:06:50,820 --> 00:06:53,320
First we are going to add a new
meta tag for theme color.

117
00:06:53,320 --> 00:06:57,230
This is something that will help us
in our lighthouse score later on.

118
00:06:57,230 --> 00:07:00,330
Second we need to add the reference
to our new manifest JSON file.

119
00:07:02,730 --> 00:07:06,228
At this time we can run gulp move image,
and then gulp again and

120
00:07:06,228 --> 00:07:08,936
then check back in the browser for
our results.

121
00:07:21,377 --> 00:07:23,170
In the browser refresh.

122
00:07:23,170 --> 00:07:27,080
And in the manifest we see that we
now have application information.

123
00:07:27,080 --> 00:07:29,650
At this point,
we have a lot of things going for us.

124
00:07:29,650 --> 00:07:35,370
Great code, minified resources, a service
worker, and an application manifest.

125
00:07:35,370 --> 00:07:39,340
We haven't done this in a while, but let's
go back and take a look at Lighthouse and

126
00:07:39,340 --> 00:07:40,890
see how we score.

127
00:07:40,890 --> 00:07:45,937
First we need to close the inspector, and
then using the Chrome extension, we can

128
00:07:45,937 --> 00:07:50,859
run the test Again, Lighthouse is gonna
put our site through a series of tests.

129
00:07:55,531 --> 00:07:58,580
As you can see here,
we nailed it, 100 out of 100.

130
00:07:58,580 --> 00:08:03,930
I would feel confident adding this new
feature to any site, and knowing full well

131
00:08:03,930 --> 00:08:08,480
that we did our best to maintain
performance and deliver quality code.

132
00:08:08,480 --> 00:08:11,610
After all our only red
check is our server.

133
00:08:11,610 --> 00:08:13,460
But that's pretty easy
to address later on.