Transcript from the "Reviewing PWA Technologies" Lesson
>> 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: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.