Hi there. I'm Marcus. In this second part of this video series, I will show you how to turn an existing application into a progressive web application using just a plain JavaScript APIs. If you want to see how we built this application, go ahead and check out the first video. Let's get started. Our application is a newsreader. We have a plain application with just some news articles being displayed. What I want to do now is turn this application into a progressive web application. What I want to be able to do is install this application on devices that support it and have it run offline so that we can see some previously fetched news even if we are offline. Now when we're building a progressive web application, a good place to start is the application tab in Chrome DevTools. It will essentially guide you through the steps needed. We'll start up here at the manifest tab and right now we can see that there's no manifest detected so that's a good indication of what we need to do first. We'll jump into our code here and we will create a new file, a manifest.web manifest. The web manifest is just a JSON file containing some of the basic information about our application. Like it's name, what URL should start, some basic things like icons and such. Once we have the file itself, we'll go into our index file and we'll link to our manifest. So just the same way as we would link to a stylesheet, we will link to our manifest file. We'll save this, go back to our browser, refresh, and we should be able to see that we have our manifest file here so we can see our icons, we can see the name. We can also see that there's an add to home screen link here now. So this is a good way for us to check if our application is in fact installable. So let's click on it. Okay, so we can see that we can install this because there's no matching service worker detected. So that's again a good indication of what we need to do next. So I'll create a new service worker file, serviceworker.js. If you're not familiar with a service worker, it's essentially a JavaScript worker that sits between your application and the network. This means that whenever your application goes out to the network, it will pass through the service worker. It'll allow us to do things like caching in between so we can decide ourselves whether or not we actually want to go out to the network for a particular resource. We can also decide that we can return some things from our cache if we are offline. So this will allow us to make our application work offline. Okay, so we have our service worker file. The next part of using a service worker is registering it. So we'll go into our load listener here. And once we've fetched our news, the user is already happily using the application. We can go ahead and register our service worker. Call this register SW. So we'll implement this service worker register. Redistration looks something like this. So we have a quick feature detection first. We want to make sure that the browser actually does support service worker before we try to register it. We then call serviceworker.register on the navigator object and pass it in our service worker file. So let's save this. Let's go back to our application refresh and see if we got a service worker. It's a little bit smaller. So we can now see that we do in fact have a service worker file. While you're developing, it's really good to keep this update on reload. So if you could check that way, you'll get all the new changes that you make to service worker visible immediately instead of having to close the window and reopen it, which would normally be required for a service worker to take take effect. So we'll go back and turn manifest file here or manifest tab. We'll click on add to home screen and see if we're there already. We're still not able to install the application because the browser is telling us that the page doesn't work offline. Now that makes sense because our service worker file is completely empty. Now the service worker is a completely event driven thing. So it can only run code if some event triggers that. The first event that gets triggered on service worker is the install event. We'll add a listener for the install event on the service worker itself. Typically what we want to do in the install event is cash some like static files that we know our application will need. The way we do that is by using the cache API. So we'll open up a cache with a given name and then we will add a list of static assets that we have. So let's define our cache name first. Cache name. Let's call this V1. And then we'll define an array of the different static assets that we have. So our index page CSS and JavaScript files and so on. So let's define those. The final thing that we do here is we call skip waiting, which will cost the service worker to move into the activate phase. The activate phase is essentially when a new service worker takes over from any previous service workers. Normally what you would do here is clean out any previous versions of your cache, for instance. So this is a self. clients. claim, which will essentially tell my service worker to start servicing the running application immediately instead of waiting until the next time we get to this application. This will allow us to keep start fetching and caching the news articles already on the first time. So we'll go back to our application. We'll refresh here. Make sure that we have a new service worker up and running. We can go in and check in our cache tab here that everything that we define in that static rate actually did get cached. Now that we have stuff in the cache, let's go back to our manifest tab here and see if we're able to add this to the home screen. It turns out that we're still not able to do. Add this to our home screen because it's still not working offline. The way the browser knows that it's not working offline is because even though we did put stuff into the cache, we haven't used any of that stuff. So we still need to prove to the browser that we work offline. The way we do that is by listening for yet another event. So we'll add a listener for the fetch event. Now this listener will get essentially this listener will intercept any fetch request going from our application out to the network. So this will allow us to handle these requests anyway we want to. Essentially what I'm doing here is I'm differentiating on traffic based on where it's going. So if we're fetching something from our own application, so that would be any of these static resources. We want to check first if it's in our cache and return that and if not then we could go to the network. If we're fetching news though, what we want to do is we want to fetch the latest news first and then only if we're unable to do that because we're offline or whenever, then we want to see if we might have an older version in our cache. So the cache first strategy would look something like this. So first of all, we will open up the same cache that we had from before. We'll then call cache.match see if there's something in our cache that matches this request. If there is, we'll return that. If not, we will fall back on the network. The network first strategy will look a little bit different, but should be pretty straightforward as well. So what we do here is we will open up the same cache, but we'll first try to see if we are able to fetch that from the network. If we are able to fetch it from the network, we will put that version into the cache. So we'll put a clone of it just because we're only able to read a response once so that way we can put one version into the cache and then return the other one. If any of this fails, so if we're unable to fetch the latest news, we'll fall back on something that we have in our cache. So we'll again call this cache.match and return that. So let's go to our browser. Let's refresh here. Let's look at the service worker here. We have a new service worker here, just registered. We can go into our cache storage here, verify that we're caching stuff, not only those static assets that we have, but also some stuff from the network. And if we now go into the manifest tab here, click on add to home screen, it will actually trigger the add to home screen logic. We should always also be able to go to the service worker tab here and take our application offline and still be able to refresh and see that it's working. So hopefully this gave you a good idea of what it's like to turn an application into a progressive web application by adding that manifest file and adding that service worker. Now normally if you're building an app for yourself, you probably don't want to use this very low level API that I just showed you. There are libraries like workbox that I'll link in the show notes below that you can use to kind of simplify this a whole lot and gives you much more tools to do things like manage your cache size and how many, how many images you want to cache or how long you want to keep something in the cache for. Thanks for watching, I hope you enjoyed it, I'll see you later.