Performance Boosts with Service Workers

Caching the process of retaining application code within the browser so 0:00 that the user does not have to require another download 0:05 if the browser already has the resource. 0:08 This is a core concept to working with the web. 0:11 But as websites have become more app like, 0:14 caching becomes a much more complicated issue to address. 0:17 In basic caching the browser simply looks to see if the resource exists. 0:21 It does not try to download it again. 0:26 And web caching does not store the whole app, only parts of the app. 0:28 Also standard caching does not allow apps to run offline. 0:33 This is an important distinction, as service workers will 0:38 allow the app to still operate without an internet connection. 0:41 Until the browser's cache is deleted. 0:44 Because of this, 0:48 developers have come up with new ways to store the app on your device. 0:49 One such tool is service workers. 0:54 A service worker is a small chunk of JavaScript that instructs your browser 0:57 to fetch the resources you want cached and how to cache them properly. 1:01 Just a few notes here before we get started. 1:06 Not supported by all browsers. 1:09 Chrome, Opera, and Firefox do, Edge is in development, Safari is in consideration. 1:11 appCache is the old, service workers is the new. 1:16 Do not cache polyfills. 1:20 Chances are the browsers that need polyfills won't support service workers. 1:22 Service workers offer a performance boost. 1:27 You can pre-fetch and retain resources better for your return users. 1:30 Don't be too aggressive, this will just add additional load time. 1:35 Service workers require HTTPS, this is a good thing. 1:40 Now let's look at our Date picker app and see how we can add service workers. 1:46 First thing first in order to test this locally we need to serve our localhost 1:50 app on a secure server. 1:55 A really simple tool for this is to run HTTPS server. 1:56 To install simply follow the instructions here in the readme. 2:00 Once installed and we have processed our code, 2:04 we simply launch the server from within the disk directory. 2:06 Keep in mind the server does not support gzip files or HTTP/2, 2:10 so we will be using standard minified files for this portion of the course. 2:14 With our server running, we can get our URL of the app and 2:18 open this up in the browser. 2:21 Building from the previous project, I have already built a disk directory and 2:23 started the secure server. 2:27 To check to see that we are using the secured server, 2:29 see the security tab in the inspector. 2:31 Now that we are confident that we are running in the secure server, 2:34 let's built our service worker. 2:37 A service worker is JavaScript that a supporting browser knows what to do with. 2:39 The technique files progressive enhancement. 2:43 If a browser does not support a service worker it simply ignores the request. 2:46 At this point, the cache addAll function will simply cache the root of the site. 2:50 But we need to be specific about the items that we want to aggressively cache. 2:55 So let's update this with the known resources that we want to be functional 2:59 offline. 3:02 We need the HTML, CSS, and JavaScript, needed to run the feature. 3:04 Everything else is pretty boiler plate and we don't need to change anything for 3:08 our current purposes. 3:11 But for more information be sure to take a look at the links in the teachers notes. 3:13 Now that we have our service worker set up, 3:18 we need to add this reference to our HTML view. 3:20 Open the index html file and 3:23 near the bottom we need to add this reference to test browser support. 3:25 If it passes then register the service worker. 3:29 Notice that the service worker is referenced in the root. 3:32 Placing this file in the root makes it easier and 3:35 causes less confusion with routes, and cached resources. 3:37 But remember all JavaScript files are minified and placed in the disk directory. 3:41 We can make a simple update to the gulp file to move this resource from 3:46 disk to the root. 3:49 Oops, we have a small problem. 3:51 We have a timing issue. 3:52 We have to ensure that this resource is created before we move it. 3:54 Earlier we used a wait function, but here let's use gulp sequence. 3:59 Let's add this module and 4:04 then update the default gulp task with the order of things that we need to happen. 4:05 Running gulp at this time we should see that the service worker file is now copied 4:10 to the root directory. 4:13 In Chrome to validate our new service worker, we need to open the application 4:15 tab in the Chrome Inspector and then view the service worker menu item. 4:19 At this point, we have a fully functional service worker, but 4:23 this base install we have a small problem. 4:26 The service worker is not configured to auto update when resources are updated. 4:28 Let's go back to our service worker and add two additional functions. 4:33 These additional functions will instruct our service worker on how to view from 4:36 cache and how to understand updates. 4:40 To process our updates, run gulp again. 4:42 In the browser, we can see that the service worker has been registered and 4:49 we can view the items in our cache storage. 4:53 Let's go back to the code and update the core CSS file to change the type color. 4:58 We're going to run Gulp and refresh back into the browser. 5:02 After refresh we see the UI change in the view. 5:11 We can quickly go back to the CSS, 5:15 update again, save, run gulp, refresh the browser and 5:17 see that we are getting our updates even though we have a cache service worker. 5:21 Things are working great. 5:25 Let's go back and reset our UI. 5:26 But what about offline? 5:36 The point of a service worker is to have access to the app without a solid data 5:38 connection. 5:42 Checking the offline option in this panel and 5:43 refreshing the browser, we see that our app is still fully functional. 5:45 Back in the application tab in the left menu let's select manifest. 5:54 A site manifest in conjunction with a service worker 5:58 really helps seal the deal with that app like experience. 6:01 Setup is simple and at the root of the source we have a new file manifest.json. 6:04 In this file, we put some boilerplate code to get things started. 6:09 As you see here, we need to set some icon images. 6:12 In our project, we have a new images directory that we need to process. 6:15 Remember the gulp image process we did earlier? 6:19 Let's get this back in here. 6:21 Let's get gulp image in this project, and let's create a new task called move image. 6:23 Remember, we are going to keep this an independent gulp process, 6:28 as we don't want images to be processed with each gulp update. 6:31 Another thing we need to do is move the manifest json file to the root of the disc 6:36 directory as well. 6:40 We can easily add this reference to our move dist gulp task. 6:41 Let's open the index html file and we need to add two things to the head element. 6:46 First we are going to add a new meta tag for theme color. 6:50 This is something that will help us in our lighthouse score later on. 6:53 Second we need to add the reference to our new manifest JSON file. 6:57 At this time we can run gulp move image, and then gulp again and 7:02 then check back in the browser for our results. 7:06 In the browser refresh. 7:21 And in the manifest we see that we now have application information. 7:23 At this point, we have a lot of things going for us. 7:27 Great code, minified resources, a service worker, and an application manifest. 7:29 We haven't done this in a while, but let's go back and take a look at Lighthouse and 7:35 see how we score. 7:39 First we need to close the inspector, and then using the Chrome extension, we can 7:40 run the test Again, Lighthouse is gonna put our site through a series of tests. 7:45 As you can see here, we nailed it, 100 out of 100. 7:55 I would feel confident adding this new feature to any site, and knowing full well 7:58 that we did our best to maintain performance and deliver quality code. 8:03 After all our only red check is our server. 8:08 But that's pretty easy to address later on. 8:11