PWA with ReactJS | Progressive Web App

hello everyone this is adit back again with another video so in this video we are going to learn about what exactly is pwa and which stands for progressive web app right so pw is basically it is uh something like uh when you want some features of the native application inside of your web application then it works like that right so basically if we if we want our web application to be installable or it works on offline mode and it has some native functionalities like sending notifications and stuff then we use pwm so basically the p if you just go to there are some of the website that already using pwa so if i just go to twitter.com i will have to show you what exactly is pwa okay if you just go to tutor.com and if you just click here so basically this is the button to install it uh currently i have already installed this one that's the reason it is showing to open this link or choose the choose an app okay we just click on this and select this app so basically this tutorial is installed in our system and uh and if you just go to your app as well uh like inside the launchpad you will have to see like uh we have the twitter somewhere but uh currently it is showing the yeah this one the tutorial is over here so basically this this exactly looks like how the native applications work right so this is what we are going to create in this video and we are going to do it with react.js and so let's get started now and over here let me just put it in a different screen and i have already initialized a react js project and inside this react.js project we are just going to build a simple application which just displays the the pokemon uh and what and once we create that application then we will add the pwa functionalities to it so basically to add the bws functionality we just need to work with service worker and uh manifest.json file so let's get started let's first of all build the pokemon application so now let me just start our server first and uh let's just yarn start okay i don't want this to open and local host 300 okay so i kind of need to run it on a chrome browser that would be much better because i have lighthouse installed over here so this will be really helpful when we are going inside the pwa okay so yeah so this is our application and now what we're going to do is say we just need to remove all those stuff and we also need to remove a logo we don't need this locally just delete this okay so over here what we are going to do is uh let's just have a div and uh and and for oh and before that let's just create one folder called api so basically from the api we are getting going to get all this pokemon and we just have pokemon.js so inside the pokemon.js we're just going to add a fetch request and i also want to want to install the xcs to make make the api calls so let's just install npm install axis and over here let's just import xcs and once we do that let's have url for the pokemon application so this is the url let me just copy the url from some so this is the url and we have put the 151 as the limit and now we just have x export const get all pokemon list let's have a sync and inside here let's con const await xcs get and just put the url over here and what we are going to do now is let's just return this data this should be lowercase return data so this is just a simple application we are not adding any functionality we just we are just going to render our application on the screen and then we will try to convert it into the pwa okay so now if we just go to our app.js inside the app.js now let's just create a one state const pokemon data set pokemon data and this is going to be use state and inside the use effect we are just going to call that function that we have just created for to make the api calls and let's have sync function fetch data and let's have cons data await get all pokemon list and then we just set this data to pokemon data state data result okay and then we just call this a function patch data now if we just come over here we just we can just have a pokemon data dot map and just i'm just putting optional red operator in case of some error this will help us and we're just going to have okay so now uh let's just have uh return i will have a div over here and basically we are we just we are more concerned about the displaying all the images so let's just have image style that would height 300 pixel width 300 pixel as well and then uh we need to construct the as um image source url let's just put the pokemon and let's just have a src and inside the src we're just going to construct our url so basically whatever url looks like is when you want to consume the images of pokemon then all you need to just add this image dot pokemon db.net uh and artwork large and uh this pokemon name so that will be the image name actually dot jp jpeg so if you just save it i think we will have to see some images on the screen just see not really are we even running our application install localhost 3000 again okay so basically i need to give some [Music] thing over here let's just put some stylings for this uh div and let's just have mars in top 40 pixel and then justify let me just put all this over here okay and for this steve as well we are going to need some stylings so let's just have style and width is 400 pixel height is 330 pixel and border to pixel solid and okay and let's have a margin as well margins 30 pixel on vertical and 10 pixel on the horizontal side and let's just save it let's see why are we not getting anything okay let me just console.log this maybe after that we will have to get something over here okay so we are getting this data but somehow we are not getting it oh okay so i need to pass it results instead of a result and over here now we have all the all those pokemon images so let's just add the name of the pokemon as well okay and inside here we'll just have b tag and inside the p it's called name and uh for the styling of this one just have uh sorry font weight bold text transform capitalize and we need some padding as well for this div so let's just have padding 5 pixel and 10 pixels okay and once we save that we will have to see like we are getting the name and as well as the images as well over here so this is our pokemon app is ready now and we also need to pass one key that is uh dot id i guess see if we are getting any id oh we are not getting any id so let's just uh stick with the ia to pass the key this is not a anyway not a right way to pass the index as the key but in this case we don't have any other things like to then that's the reason i'm just passing i over here so once we do that we can remove this console log so now what we need to do is like we need to implement the service worker and update the manifest file we need to do the changes inside the public directory so instead of public uh we are going going to get inside the index.html and inside the index.html first thing that we need to do is like we need to register our service worker so to register the service worker let's just write a script for over here and inside inside the script we are going to first check the browser if uh the browser supports service worker or not so okay in navigator so if this is available then we are just going to add event listener to load and navigator dot service worker dot register and we are going to create a service worker file dot js and this will give us a promise so let's just have a pen and let's just call it trace and we are just going to display console.log worker registered similarly we can we can also have our catch block and inside there error in service worker and we can also display our error what error we are actually getting so once we save that since we haven't uh created any file as of now so if you just go over here worker register um okay uh i don't know why uh it it it gave me organized but uh it's uh yeah like it supports that so that's why maybe and after that what we need to do is like we just need to create service worker dot js file i said the service worker dot js basically the service worker works on three uh three important functions that we need in events that we need to register for the service worker to work and like if you just go to uh go to its official documentation what is pwa and go over here inside there you can find that we can have the service worker so inside the service worker uh we are going to install activate and download and stuff so basically we we will be concerned about the activate install and we are also going to fetch like we will display uh some other face page when we are on offline okay so this is what we are going to do and uh so now first of all let's just give it a gas name just have version one and then to url to guess so basically these are the pages that it is going to cast and these are the urls index.html and then offline.html okay now we are just going to refer to the global this and aid event listener and instead install and this is going to give us an event okay so this will event we're just going to add event wait until yes open cast name and then and we're just going to log and if you just go over there here you will like go to our applications and then once we register the service worker we will have to see this service worker over here as if you don't have the service worker then you you will not have to see this one okay and you also need to install one this this extension this lighthouse so what exactly this lighthouse does is like it helps to achieve like what are the functionalities that we need uh what are the implementation that that we need to achieve the pwa functionality over here so basically i'm just going to the uh lighthouse so basically i have already selected a mobile and progressive web app so once we add those stuff then we will generate reports so it will be giving us a correct report but as of now if we just do that uh i don't think it will be showing that uh we'll have to get 100 pwa or not so since we haven't haven't restarted everything okay so basically as of now our app is not installable so these are the things that we need to fulfill to make it a pwa application so this is not installable as of now uh we need to do it in our service worker and this may store data if you send loading performance and location in order it's this so this is not uh something concerned about so now uh over here we just need to return cash start add all urls to cash so these cases will be added once the install event is triggered and we are also going to have listen for the request so just have this add event listener fetch event then we just going to have event dot spawned with start match event dot request just have press and return so basically um in case of offline we are just going to display our offline.html which have which we haven't created so basically once uh we let me just write the code first and after that i will print it request and then catch casual start match and it is going to be offline.html so once uh when we get uh when we are offline then it uh then inside this will our request will go to the cache block and there we are just going to render our offline.html okay and the last one is activate event listener so let's just have activate as well so i just have const and cash waitlist dot push cast name and then event dot wait until cases dot keys then yes names and we're just going to have promise dot all inside here let's just have our cash name and then map this cash name and if cash name is not there uh sorry if cash name third white list includes cast name then we're just going to return gases dot delete guest name okay so once we save that uh let's go up to our application and once we register our services worker then you will have to see like you you will be getting over here this uh open a new link or say this page but this is what we are concerned about open in a new link or choose an app right and once we do that it will install the application as well so over here inside the manifest.json one more thing that i wanted to do is like i just want uh like in react.js application we already have a manifest.json so we can just to use it so if you are using with the html css or javascript directly then you need to create a manifest.json so yeah so let's just call it pokemon app pokemon application okay and let's just save it and once we refresh this page let me just refresh it few times so that it updates okay sorry i need to change it over here as title save it and uh now we are getting pokemon pwa application dot json sorry application title and now uh if you just do this okay and i think i have already installed one logo lost 300 and that's the reason it is going over here but uh let me just delete this if i can set the application and uh it doesn't seem to be available over here so anyway uh if you just click over here we can just uh click on open application and we have to see like uh this is pokemon wave application so these things and we can just uh remove this and all the pokemons will be like it is completely separate application so now okay just need localhost 300 and if you just run the lighthouse now and generate report from there so let's just have right lighthouse and uh just run it let's see what we are going to get okay so now you have to see like we our app is installable and uh it is qualifying the pwa capability as well so it has it already has these things uh configuration and set same color address for this kind of thing so one more thing that i uh that we need to implement is like manifest doesn't have a maskable icon so basically to uh we nee we need to update these icons as well like uh just something else and uh currently to make this maskable icon you can just uh go to some website and convert this uh images into maskable okay and uh one more thing like uh as of now if we just uh so this is exactly how uh pwa works it basically creates a application and it is installable and you can just uh add some other native functionalities as well like adding notifications and stuff so yeah this is it for this video if you like the video consider subscribing and thank you for watching

Channel: aditya kumar

Views: 34,941

Keywords: adding pwa with reactjs, adityakmr, coding, create pwa with reactjs, developer, how to create progressive web app, how to implement service worker, javascript, native app vs pwa, progressive web app, progressive web app tutorial, progressive web application, progressive web apps, pwa, pwa application, pwa countryballs, pwa for beginners, pwa ja, pwa tutorial, pwa tutorial for beginners, pwa vs react native, tutorial, tutorial for beginners, what is pwa, what is service worker

Id: cNaDgJjFfG8

Length: 25min 16sec (1516 seconds)

Published: Sat May 28 2022