Convert React JS App into a PWA [ FULL TUTORIAL ] | Dictionary App PART 2 | Progressive Web App

hey everyone welcome back to roadside coder so in today's video we're going to convert our react app into a progressive web app more specifically we're going to convert our dictionary app that we created in our previous video into a progressive web app so what is a pwa or progressive web app so pwa allows you to install a particular web app into your phone natively what i mean by that is when you go to that web app into your phone's browser or desktop browser it's gonna prompt you with an installation icon so when you press that installation prompt it's gonna start installing that app natively into your phone so you can use that app just like a native app into your phone or desktop so this is an amazing feature of a progressive web app so let's get started [Music] so as you can see we are running our dictionary app currently in our browser and i've opened this project file as well so what are we going to do now so we're gonna go to chrome developer tools by clicking on inspect and go to lighthouse so what lighthouse allows us to do it's gonna scan our app and it's gonna tell us what are the features that are missing to make it a progressive web app so it's gonna in your case it's gonna show you all of these icons as ticked so you need to untick all of these icons except the progressive web app and click on generate report so it's gonna scan your website and tell you what are the things that are missing to create it a progressive web app so let's check all right here we go so these are the things these are the red errors are the things that we need to complete so first of all let's start from the bottom so first of all it's asking us that manifest doesn't have a maskable icon so we need to create a maskable icon but first of all what i'm going to do is you can see that first of all let's go to the application tab yeah you can see that this icon has these react icons so we don't want this react icon we're going to change these icons to our own icon of the app so let's go to google and search dictionary icon png here you go let's go to images and we're gonna have that icon with uh in which we have full usage rights let's go click over here and let's choose this icon i'm going to click on this icon so it's going to take us to the website and from here we can freely download this icon oh we need to register let me quickly do that okay so we have downloaded it icon over here it's going to be free it's not going to cost any money so let's convert this icon into a favicon so we're going to go to the browser and type png to favicon let's go to this website and we need to drag and drop our file over here so let's take this file and drop it over here and let's click on download so it has provided us with this zip file let's keep our zip file over here and extract it all right here we are so what are the files that we need we're gonna need this one okay we're gonna need all of these and this one yeah let's cut this icons over here and we're gonna go to our yeah over here into public folder and we're going to paste it over here and replace the file and here we have it we have these favicon files over here we're going to remove both of these files yeah we don't need them we're gonna remove them all right so let's go back to our code and into our public folder in index.html we're gonna need to add a few lines so right over here you can see there's an apple touch icon over here so we just gonna change the href to something else let's see what was the name of our file here's the name of our file apple touch icon dot png so apple touch icon dot png here we go it has auto suggested as this name and the other thing that we need to add is our favicon icon so link short cut icon all right now we need to give it an href so it's going to be fabric on if i'm not wrong let me check yeah favicon.ico yes we need that and there we go what's wrong okay we haven't closed the tag now we're done now let's go to our website and check here you go you can see the icon has changed let me just reload this page and go to inspect and go to application now we can see over here you can see our favicon has changed successfully now what do we need to do for the step two is we need to generate a manifest file so what is a manifest.json file if you go to your react app you can see there is something called manifest.json it has it favicon.ico it has the logos different different logos that do logo files that we deleted so we're not going to use this we're going to delete that right here and i'm going to delete this as well we don't need this i'm going to delete those as well basically everything we're going to delete it over here first of all let me generate our you know manifest files data so what i'm going to do is i'm going to go to this website manny fest generator let's see here we go here you have it let's give our app a name word hunt i'm gonna give it short name of word hunt theme color let's say i'm gonna choose black all right display mode is going to be standalone because we want this to be acting as a native app so we're gonna do is stand alone orientation it depends on your app if your app supports portrait as well as landscape you can select any in my case i'm going to select any so application scope no nothing to change over here so here we go we have this manifest data generated so i'm going to copy it up and i'm going to go to our vs code and paste it over here comma is needed over there yeah all right now we need to generate our icons so how are we gonna do that so earlier we have downloaded that file where is it yeah word hunt we're gonna use that to generate our different different sizes so there are four sizes that you need to have generate first one is 192 x 192 second 256 third 354 and fourth is 512. let's go to our browser and let's enter image resizer yeah let's go to imageresizer.com all right here we are we're gonna supply it our image right here so first of all what do we need we're gonna need to generate 192 x192 we go resize image now all right here we are let's download this image here we go so we're going to go to our project folder we're gonna paste it over here so let's just drag and drop over here so here it is now second one also i'm gonna name it let's name it logo 192. we're going to follow this convention all right let's generate another one let's take that i'm just going to generate for everything then i'm going to paste it all together over there second one is 256 into 256. let's download that the third one um yeah the third one was three eight four into three eight four here we go final file will be five one two into five one two five one two x five one two resize that image all right here we go it has mistakenly downloaded it twice i'm going to delete it oh no never mind all right so we're going to copy all of these files to this folder public folder again i'm going to name them the same way that i named this logo 192. so this one is logo 256. this one is logo 384 and this one was logo 512 here we are all right so we have all of the icons generated successfully all right let's go to our vs code and let's create our icons so what we're supposed to do now is this we're gonna enter that so what have i done over here let's see yeah so we're going to provide the src of wherever the location of icon is i'm going to remove this and type logo 192. same for this one as well logo two five six logo three eight four and lastly logo five one two now let's save our application let's save it yeah and let's go to the chrome let's refresh this page all right compile successfully let's go to inspect and application there we have it we have all of the icons over here great and also we need to add a service worker i'm gonna explain what service worker it is later let's go to our lighthouse over here and let's generate the report and now let's start working on that all right first one is that manifest doesn't have a maskable icon so what is a maskable icon so maskable icon is something that when you install the app in your phone the icon that is displayed over there in your menu that is what maskable icon is so how do we generate a maskable icon so there's a website called maskable.app going to close both of these i'm going to go to mask cable dot app slash editor here we are so we need to provide it our first of all we need to provide our icon or the image that we need to use so this one i'm gonna drag and drop over here so here we are now we need to make it according to our you know according to our liking so i'm gonna do is let's say rounded rectangle yeah that looks good i'm gonna provide it a little bit of padding i'm gonna shift it a little bit over here so it looks good i think that's good i think that looks fine yeah so i'm just gonna export it it has downloaded that let's go to our public folder and i'm gonna drag and drop that over here let's drag and drop over here i'm going to give it the name of maskable mask cable yeah great so now in our manifest file we need to provide the location of this maskable let's go to the manifest.json and at the top over here i'm going to open another curly brace just like the others we need to provide it src first of all oops src so what is going to be the src maskable the name that we gave us png yeah so what's the size size is going to be 196 into 196. um 196 into 196 here it is we need to add the type type is going to be image slash png and the purpose purpose is going to be any maskable here it is let's save that and let's check our website let's go over here and refresh it i'm gonna close it and open into a new tab let's go to inspect to the lighthouse and generate report once again all right here you go manifest has a maskable icon let's see what else is left all right next thing what do we need to do is does not redirect http traffic to https so it's gonna be fixed when we deploy it to netlify since netlify directs all the traffic to https so it's not gonna be the problem so let's leave this one for now and the third one is that does not register a service worker that controls page and a start url so all of these three are linked together so we need to provide that let's go over here where is it so as you can see we don't have any service worker file currently so how do we need to generate the service worker file so let's go to a new window what i'm going to do is i'm going to open a folder let's open a folder right over here i'm gonna name this folder service worker something anything doesn't really matter so what i'm gonna do is i'm gonna initialize a new react app but it's not going to be the conventional way what i'm going to do is i'm going to enter npx create react app and what do we need to do yeah we need to write any any name let's say my app and i'm going to write template for cra dash template dash pwa so when you type this it's going to generate a react app especially configured for a pwa application so let's enter that and let's see what happens all right here we go it has successfully initialized a new react app so what do we need from this react app we need these two files serviceworker.js and registration.js so we're going to select these and copy these and copy these into our project over here into the src folder i'm going to go and paste it so we have both of these service worker files let's go back to that project and let's go inside of index.js let's see how these files are being used so it's being used over here and we need to add this line as well so i'm going to add this line first let's import that copy and paste into our index.js file here we go let's go back and let's copy this part as well copy and paste it over here and let's save that and let's see the app has compiled successful let's go back to our localhost and i'm going to open this in new tab again let's go to inspect and check the lighthouse let's enter the report all right let's see what happened okay it's still giving the same error why because because of this when you go to index uh sorry service worker there's something called inside of register you can see it only works on a production app so our app is currently in development so let's build this app and let's see if it works or not so what i'm going to do is i'm going to type npm run build so it's going to build our app a production ready app all right first of all whoa whoa we forgot to do this instead of unregister we need to change it to register yes so that it can register our service worker so now let's run the build all right our app has been built successfully so what does it say it say you can run this command to run the production build but first of all if you if you don't have the serve what you need to do you can run npm i sir dash g when you run this command sorry not nom it's npm so when you run this command what it's going to do it's going to install this command server in your machine so let's just run this command now serve dash s build i'm gonna copy it and run it over here so it says it is serving on our local host in our local host 5000 so let's go to localhost 5000 now localhost i'm going to change this to 5000 and our app is running let's go to inspect and to the lighthouse and let's generate the report again all right here you go these checks welded the expert so now you can see it has a lighten up this progressive web app icon so all we need to do now is does not redirect http traffic to https so when you deploy this app to netlify so what it's gonna do it's gonna successfully direct all the traffic from http to https then it's going to be created as a progressive web app so if you don't know how to deploy this app on netlify you can check our previous video where where we have created this dictionary app so you can learn from there or i'm gonna give you a quick walk through what you can do this is gonna go to netlify and you're going to log in to netlify i'm just going to click on new site from git and click on github and just select your particular repo from where you want to deploy that website and yeah that's all that's all you need to do so let's check our deployed website now let's go to word hunt dot netlife.app this is our deployed website now final check or first of all you can see there's one install button over here if i click on this install button it's gonna ask me to install this app just like i showed you earlier in phone this is how you can install it on your desktop let's click on install and here you go it this app has been installed successfully here you go our app is right here word hunt when we click on it it has installed as a native app in our pc check the final time let's generate the report and it's going to show us that our app is now successfully a pwa here you go there you have it our progressive app is working fine progressive web app is working fine so thank you all for watching this video if you like this video just give it a huge thumbs up and by thumbs up i mean just click on that like button below and subscribe to the channel and turn on notifications and i'll see you in the next video bye

Channel: RoadsideCoder

Views: 7,081

Keywords: convert react app to pwa, pwa react js, make pwa with react, react js to pwa, javascript, react js, progressive web app, react js progressive web app, dictionary app part 2

Id: RvEEZLxiAlQ

Length: 21min 36sec (1296 seconds)

Published: Sat Jan 16 2021