I will show you how to turn an existing application into a progressive web application using just a plain JavaScript API. So if you want to see how we built this application, go ahead and check out the first article, let’s get started, so 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, dev tools? 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, so we’ll jump into our code here and we will create a new file a any test web any first. The web manifest is just a JSON file containing some of the basic information about our application. Like its name, what URL should start some basic things like icons as such once we have, the file itself will go into our index file and we’ll link to our manifest.
So just the same way as we would link to a style sheet. 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 homescreen 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.
Ok, so we can see that we can’t install this because there’s no matching serviceworker detected, so that’s again a good indication on what we need to do next, so I’ll create a new service worker phone service worker jeaious, 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. Ok, 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 noose, 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. The registration 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 service worker dot register on the navigator object and pass in our service worker file.
So let’s save this: let’s go back to our application refresh and see if we got an 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 check that way. You’ll get all the new changes that you make to service, who are very 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 the manifest file here, our manifest tab will click on add to homescreen and see.
If we’re, there already turns out worse 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 and 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 a serviceworker is the install event.
So we’ll add a listener for the install event on the serviceworker itself. Typically, what we want to do in the install event is cache. 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 net first cache name, let’s call this use v1 and then we’ll define an area of the different static assets that we have so our index, page CSS and JavaScript files, and so on.
We’ll save those. The final thing that we do here is we call skip waiting which will cost the serviceworker to move into the activate face the activate faces, 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, what I’m calling here is self got clients that 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 newest articles already on the first time, all right so we’ll go back to our application, will 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 defined in that static array did get cashed 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 are 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 any way 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 whatever, 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 will then call cached 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 were 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 that match and return that.
So, let’s go to our browser. Let’s refresh here, let’s look at the serviceworker here we have a serviceworker 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 file 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 serviceworker 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 serviceworker 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 all right. So thanks for reading, I hope you enjoyed it I’ll see you later.
Jimmy's Internet Marketing Business Blog 