Credits: http://otakukart.com First things first — In case you’re wondering what Berries are, Berries are small fruits that can provide HP and status condition restoration, stat enhancement and damage negation when eaten by Pokemon. And if you’re wondering what’s this has to do with Service Workers in any possible case? Then here’s the cool thing — We’ll be building a Pokemon Web App to demonstrate the working of Service Workers. If you want to get an Overview of what Service Workers are — please read my blog on . Service Worker Fundamentals We’ll be using to create an application skeleton. For restful APIs, we would be using — It provides an extensive list of APIs detailing everything from to . We would be using two simple APIs for this project — one to get a list of Berries and the other one will evaluate the power of each of the Berries based on many parameters. The main purpose of this project is to leverage the power of Service Workers using its Offline-first feature. Along the way, we’ll see how to cache resources and API responses so that the App is able to deliver data seamlessly even with no internet connection. express-generator PokeApi Pokemon Berry Flavours P.S. To make the best use of this blog, build the app while you’re reading. Let’s get started by installing the . (-g flag tells npm to install express-generator globally). express-generator _npm install express-genertor -g_ Once this is done, do (I want to name my project as . You can name it whatever you want to). The common way for scaffolding is ( — view=pug tells express about the view engine to be used in the project. If you don’t specify this part, it will use the default view engine i.e. ). And If you’re like me, you would want to get around with this to use plain simple HTML. We’ll change our view engine from default jade to HTML after checking out the folder structure that express generator has created for us. There are 4 folders — bin, public, routes & views and 2 files app.js & package.json. Remove everything from public, routes & views folder. We’ll be building it from scratch. We’ll not be changing anything in the bin folder. express pokemon-app pokemon-app express — view=pug pokemon-app jade does the simple work of setting up your project by connecting it with apt middlewares & routes. By default, it comes with two routes for index & users (You can check & ). You can remove the as it is not needed. Below that, there is a code for view engine setup. The first line — sets up the views directory and the second one sets up the view engine. For using HTML as the view engine, you’ll have to install and then set up the view engine as Appjs indexRouter usersRouter usersRouter app.set(‘views’, path.join(__dirname, ‘views’)); ejs app.engine(‘html’, Ejs.renderFile); app.set(‘view engine’, ‘html’); Lets setup our routes — create in routes folder. All it does is render index view on ‘/’ URL. Create index.html in views folder. Please check out the code for it in my . Its pretty straight-forward HTML. Now comes the main part — Let's create these folders in public directory, & . Please copy the CSS file from my . Create inside javascript directory & s_ervice-worker.js_ in public directory. We’ll deal with these two files in detail. You can run to get all the local dependencies and then to run the project. Check out . index.js GitHub repository javascript stylesheets style.css GitHub code list.js npm install npm start localhost:3000 Let’s jump onto the interesting part now — So, the first step in getting onboard with Service Workers is to register the service-worker script and we do this in page’s javascript file which in our case is . Let’s start building . Check out the below snippet for service worker registration. list.js list.js We’re using an function here. Before registering Service Worker, we’re checking, if it is supported in the browser. After this is done, you can see the statement printed in your browser. The next step is to install our Service Worker. Let's write an install event handler in the file. IIFE console service-worker.js When you reload the page, you’ll see the console statement. Install event is a good place to set up your caches. We’re putting some of the resources in the cache here. keeps service worker alive until all the statements inside it are executed. This is because the service worker operates as an . When it is not doing anything, it goes into a dormant state to conserve memory. The Service Worker is not yet activated on the page. After successful installation, it goes into a state. ‘Installing service worker…’ event.until Event Driven System ready Next in line is the activate event, this is a good place for you to clear up your old caches. Again, as you see the cache deletion logic is in block for the same reason as mentioned above. After this all is done, the service worker is still not yet activated for your page. Check the same in action in tab of under . The source would be your file. Service Worker will start ruling when you reload the page. This is because there is a possibility that your page might be using some of the resources from the cache and all of a sudden they are vanished because of the Service Worker’s event. If you still want your Service Worker to come to power immediately after getting activated, is your savior! Handle it like so in Activate event. event.waituntil Applications DevTools Service Workers service-worker.js Activate event.skipWaiting Check out the below screenshot to gain a proper understanding of . There was an older instance of Service Worker running on my client. I changed something in my service worker file and refreshed my page. (Please note I am not programmatically doing and hence the delay in activating the newer instance of it) Also, please take a note that the service worker doesn’t get registered on every page reload. event.skipWaiting skipWaiting Service Worker — skipWaiting Now that we’ve set up the room for our service worker, let’s see how can we make the best use of it. As already mentioned, we would be using two of the PokeApis. is a GET request to fetch the list of Berries. We’ll be using ES6 Promise based method to make an API call. On the success of Berries list API, we’re rendering the list to the DOM. [https://pokeapi.co/api/v2/berry/](https://pokeapi.co/api/v2/berry/) fetch The method iterates through the list and renders each Berry to the DOM. We’re using some of the helper functions here for creating nodes & appending them to the DOM. Please check out to know more about these helper methods renderBerriesList list.js code When you click on any of the berries, an API call is made to fetch the attributes for that particular Berry. We’re showing these attributes in a table format on the right-hand side. If you’ve survived till now, you’ll get to witness the amazing Offline-first feature of Service Workers. All the fetch network requests that you make on the client side goes through the service worker’s fetch event handler and it has the power to modify the response that would be sent back to the client. Check out the fetch event handler in the file. service-worker.js lets you fabricate the response. In this case, we’re first checking if the response to the fetch request is present in the cache. If it is present, we send it directly from the cache without making any network request(Voila!). If the response is not present in the cache, we make a network request for the resource and put it into the cache to make our subsequent fetches fast and finally send back the response to the client. event.respondWith At any point in time, you can see for yourself the resources that are present in the cache in Applications tab under Cache Storage (We’ve used in this example) pokemon-cache Cache Storage Also, while you’re making a network request, check the option size in the tab of . Since a fetch request for getting berries list has gone through service worker to the server, its response should be cached if we’ve done everything right. Network DevTools Fetching resources from the Cache And now, if we switch off the internet, we should still be seeing the berries list. To experiment it further, try loading the response of two or three berries and then check them out again after switching off your internet. This Offline-first experience serves a great deal in preventing network requests for static resources or the ones that don’t change too often. You can find the entire source code for this project . Still, there’s a lot more that a Service Worker can do. I’ll be covering it all, one blog at a time. here Here’s the , that explains the fundamentals of Service Workers link to my previous blog

Fetch

Mozilla

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Building Pokemon App to evaluate the power of Berries & Service Worker

Too Long; Didn't Read

Companies Mentioned

Ankita Masand

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Building Pokemon App to evaluate the power of Berries & Service Worker

Too Long; Didn't Read

Companies Mentioned

Ankita Masand

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES