Check out a free preview of the full Progressive Web Applications and Offline course:
The "Reviewing PWA Technologies" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

Mike reviews PWA technologies and how they work on a user's first and return visit to an application.

Get Unlimited Access Now

Transcript from the "Reviewing PWA Technologies" Lesson

[00:00:00]
>> Mike North: So in thinking about where we've come since the beginning, let's look back at this diagram here. So you remember we started at client side rendering. We did enhanced client side rendering, server side rendering, we started doing progressive web app stuff. Here's where we are now. So when we first visit our app, the Service Worker is not active yet, so we would hit our CDN.

[00:00:28] This is our first visit and according to app shell architecture here, even if we get index.html and our shell HTML is a little bit different. We can, of course, make that something that's done in the activate hook, right? Just another task that a service worker does on its way to, or it would be the install hook, I guess.

[00:00:50] But it can send a request, and we can store that in the cache and make it available for subsequent visits. Additionally we've had some experience also in a ServiceWorker taking records from an API and populating an XDB database. And that allows us to hold a huge amount of data in a way that's structured and we can query against it.

[00:01:09] It's not just JSON responses where we have to get the query params just right. We have to get all of the path params just so in order to repeat that exact same request. Here we can query against it, we can generate new collections of data that we never asked an API for, that's a huge advantage.

[00:01:29] So for return visits, we're going to hit the Service Worker to get index.html, or shell.html in this case. It could purely be a construct that the Service Worker takes care of, it's going to also get the JavaScript in the CSS, right? Takes almost no time, remember, we reduced our time to less than 10% as soon as we started pre-caching in our service worker.

[00:01:51] It went from, for JavaScript, 320 milliseconds to 23, and then at this point we've got our first paint. We are interactive because we've got JavaScript, the JavaScript still has to be parsed and booted. And this is why we want a lazy load, right? We don't want to pay the cost of parsing and booting for more than we need at any given time.

[00:02:15] And then in the background, we can go and fetch records from Index DB, and it's just a promise that returns some data. Very similar to the way that Fetch works, or Ajax, if you are still thinking in those terms. Here's the big takeaway, besides the fact that we've hit all of these metrics.

[00:02:33] And those bars used to go all the way from the left side of the screen to the right. If we draw this line here, we can see that we haven't actually crossed from local to remote. So while we started, basically crossing this line over and over for absolutely everything we need.

[00:02:49] Now, our app boots and starts showing data regardless of network connection. We're showing stuff even if we're on wifi or if we're on airplane mode. And then once we get online with a background sync, we can hit our API.