Build and Deploy a React PWA - Why Progressive Web Apps are the Future of the Web

progressive web apps provide you with a unique opportunity to deliver a web experience your users will love using the latest web features to bring native-like capabilities and reliability progressive web apps allow what you built to be installed by anyone anywhere on any device with a single codebase in this video you're going to learn how to build a PWA deploy it to the internet and also publish it to a special progressive web app store stay tuned the web is an incredible platform it's a mix of a range of different devices and operating systems as we already mentioned web applications can reach anyone anywhere on any device with a single codebase native applications on the other hand are known for being incredibly rich and reliable they are ever-present on home screens docs and tasks bars they work regardless of network connection they launch in their own standalone experience in native applications you can do things like take pictures or control song playback while in another app native applications feel like part of the device they run on progressive web apps or pwace for short bring the best of both worlds they can be easily created using HTML CSS and JavaScript they can be run on all browsers operating systems and devices bwa s also have access to native features they can work offline they can be installed to your mobile home screen and they have access to mobile features like access to the camera or push notifications using service workers and a web app manifest we're going to build an application that becomes reliable and installable and the numbers don't lie companies that have launched progressive web apps have seen impressive results for example Twitter saw a 65% increase in pages per session 75% more tweets and a 20% in bounce rate all while reducing the size of their app by over 97% that's why progressive web apps are great and that's why they are the future of web and all other platforms the application that we are going to build looks like this it's a simple weather application where we have a search bar and in there you can type the city you want the weather information for for example if we type New York we instantaneously get a New York location with a 15 degrees Celsius temperature we also get some additional information about the weather it's quite simple and for a reason in this video I didn't want to focus on building a complex react application and not focus on PWA features but rather this video is going to be simple regarding to react side but we are going to go in-depth about progressive web apps features by the end of this video your app is going to pass absolutely all of the Google slide house audits as you can see here fast and reliable it passes all of them we also get something if there is no internet connection it's also going to be installed as you can see right there we can click this little sign and we can install it to our device and also it's going to be PWA optimized absolutely all of the boxes tech and of course because of that we are going to be able to publish our application to the PWA store this is like a Play Store or App Store where you can publish only PWA applications that can be seen by other people in this video I'm going to teach you how to build the app then you can build your own applications and you can post them to this store right here the link is going to be down in the description without further ado let's start with coding the app in here I have an empty Visual Studio code directory I just called a directory PWA react video in there we're going to just initialize an empty create react application so right there if you scroll to the top you can go to view and then you'll be able to find the terminal once you have the terminal open you'll be able to run the MPX create react app and then dot slash which simply means that we are going to create and initialize an empty react application in this folder we are currently in if you press ENTER it's going to take a few minutes and we'll be right back okay now that that is done what I like to do at the start of all of my create react app apps I like to delete the whole SRC folder because there we have a lot of stuff that we don't actually need so I'm going to go ahead and delete this SRC folder and we are going to create a new one ourselves inside of there we can create an index dot JSP that's going to be the file that is going to connect our app to our root folder in the index.html inside of there we of course need to have import react from react and we also need to have import react Dom from react - Dom just like that now we can call react Dom that create yet and then there we say document that get element by ID and that's going to be our root okay now we have to specify our app our app is going to be coming from just that slash app so we're going to do import app from that slash app and that's going to be a functional component which we are going to create right now in the SRC folder so in their new file and an app that J yes but before we actually create a component here let's see what is this get element by ID of fruit in this video we'll be working a lot with the index.html file of the public folder ignore the fact that these files in the public folder are different for you right now it's going to be fixed later in the video the only thing that you should be concerned with right now is this HTML file so what's happening here let's try to clear it up a bit in there we have just a description we can put this in one line we can also delete some of these comments we don't need them here okay there is one more and after all we're left with only one thing in the body which is a div with an ID of fruit so our entire react application is going to be rendered right there inside of this div with an ID of fruit and that's the exact reason why in here we are actually trying to fetch the element by ID of fruit that's it okay now we can go to our app and we can start creating our first application here inside of the app we of course need to have import react from react and then we can create a basic functional component that's going to be Const app is equal to a functional component and in there we're going to have a return and let's just do H 1 that says app for now that's it of course we need to do export default so that we can import and use it in here in the index J yes ok now that we have done this we should be able to run our application in the browser you can open the terminal and then run NPM start ok great once it opens you should be able to see this app right there in the browser now we can focus on creating the weather application the first thing that we'll have to do is we're going to have to install so NPM install there's our Save Axios we'll be using Axios to make a get request to the API for the weather data right there inside of the SRC we are also going to create a folder called API and inside of the API folder we are going to have a file called fetch weather dot j s inside of there we'll deal with the logic of fetching the data the first thing that we have to do is import Axios from Axios then we're going to create a function which is going to be responsible for fetching the data to do that we can do const fetch water and that's going to be equal to an async function so make sure to specify this async keyword right there in there it's going to accept one parameter which is going to be the query or the name of the town we want to search for and then there we're going to return some data so in here we want to get the response and we're going to get a response wants to make a call to the you are of the API so there's going to be a wait Axios that get and then in there we can specify the URL of the API we want to get in our case we can store that in a new variable just above we can call it Const URL and you can copy and paste it I'm going to give you the link in the description it goes like this we are using the API of the open weather map org the second thing that you're going to need is going to be the API key you can go to open weather map that org you can register and there you can get your own API key but I give you complete permission to use mine so I'm going to just leave it in the description and feel free to copy both the URL and the API key great now that we have that we also need to specify some parameters in Axios you do that as the second parameter so second parameter to our get request is going to be an object and in there we have params params is going to accept one thing which is going to be Q what we are going to set to be equal to this query we are going to get into our function the second thing that we need are going to be units so the type of the measurement and we are just going to have them as metric and the third thing is going to be app ID all uppercase and we are going to set that to API key just like that once we get the response we are not actually concerned with their whole response we only want to the structure the data from the response once we get that the only thing that this function is going to do it's going to return the data that's it now you can see that this function is not being used right now fetch weather is declared but its value is never read so we want to do something with it in our case we just want to do export Const fetch weather so that we can make use of this function in the app that J s function right there inside of our app function we can now import the fetch weather so there's going to be import fetch weather from dot slash API slash fetch weather and that's it one last thing that we are going to import into this file is going to be import dot slash app that CSS just so we don't have to write all the Styles right there I'm going to create a new file called that CSS and then in there I'm going to give you all the styles for this application there aren't many you can see I just copied and pasted them there they are really really basic styling for our weather application it's going to be down in the description if you feel like typing all the CSS sure go ahead and do it but for most people I know that they they're here to learn PWA so I'm just going to give you all the styles great now that we have that we can focus on bringing the actual functionality and the JSX to our app weather component so the first thing that we are going to do is we are going to create a container called div and we are going to give it a class name of main - container just like that inside of that we're going to have one input we can also extend it into multiple lines because they're going to be a lot of stuff in it so what does every input need to have well first it needs to have a type in this case it's going to be text we can also give it a class name and the class name is going to be equal to search we don't need this comment there then we can give it a place holder which is going to be equal to search dot dot dot and then also we need value let's leave it blank for now and we need an on change handler so on change these are the most important things when it comes to each react input the value needs to be something in the state and the on change needs to be also something coming from the state in this case we're going to be using react use state hook right there at the top of our file we can create a Const and then we are going to dis structure things coming from the used state first we are going to have the query which is just a search term and then we have set query which is a setter method for the state field and we are going to set that to use state and initially it's going to be an empty string now we can change this value to be query and the on change is just going to set the query right there we get event and then we are going to set the query to be equal to event that target that value if you're not sure what happening here I created a great video about event handling and input handling in react so you can check that out I'm also going to leave the link in the description okay so now that we have the input we have to fetch the data after we collect something in there we are going to create a function which is going to be called Kahn's search it's going to be an async function which accepts an event and then in there we're going to check if the e that key is going to be equal to enter basically we are checking if the pressed key is equal to enter then we are not going to just add the Enter key to that we are going to make a search and how do we make a search well right now it's quite easy because we created this API call so we can do cons data is equal to a way fetch water and then we just need to pass the query of our search we have that stored right there let's first console.log the data so we can see what's happening and whether we are receiving the proper data but as you can see this function is not used yet it's declared what his values never read so we need to make use of it there we can add another handler which is going to be called on key press and the on key press we are just going to call the search because if the key that was pressed is equal to enter then we want to do this thing right there which is fetch the data okay we can now save that open the terminal and run it one more time by doing NPM start okay we can see a lot of styling there and that's because we added our own styles and now we should be able to type something like New York and we hope to see some requests right there and we do we get a lot of information about the weather in New York currently we get clouds we get coordinates also the name of the city temperature humidity a lot of the stuff will be only using the things that we actually need currently we're just console logging the data but what do we actually want to do with it well we're going to create a new state field and then in this case is going to be cold weather and set weather at the start is going to be equal to an empty object and then simply we are going to set the weather to be equal to the data that we receive so set weather data now we have access to this weather variable across our whole application and then in there we'll be able to create the JSX structure of our response using the data coming from the API and one last small but important detail in regards this input is that we have to reset it after we actually click enter so in there just below the set whether we're going to have the set query to be equal to an empty string just to reset it that's it this input is taking a lot of space so what we can do is we can just put all of that in one line so it's right there we know what we type in there but it's just good to have it like this so we can actually focus on the card right next to it so in here we are going to first check for whether that main and then if that exists we're going to use the end and operator to show the actual card so let me explain what does this do in here we are using the ampersand operator and the way it works is that if this thing exists then it's going to return this thing which is a react component and if we unfortunately for some reason don't get the weather it's not going to return anything if you want to know more about this thing and advanced JavaScript down in the description is going to be the link to sign up for a free mailing list so you can know when my JavaScript course is going to be released okay right now in here we can specify the div which is going to represent our whole card for the weather so in here we can close this tip and it's going to have a class name of city because it's going to be weather for one city and I just noticed in here I had class instead of class name we need to have class name in react right inside of here we're going to have the H - H - is going to have a class name of city name and then inside of there we're going to have a span element inside of the span we are going to get the whether that name which is just going to be the name of the city just below that we're going to have a super stripped if you never use this element I'm going to show you what it does just in a second and then in there we have weather that says that country just like that okay right now let's search for a town let's say Oslo which is the capital of Norway and as you can see we get nicely styled city and then in the super script which means it's on top of the actual text there we get the country which is Norway in this case okay that works now let's keep adding the info to our application just below the h2 we are going to have a div which is going to have a class name of city temperature so just say the temp is fine in there we're going to have math that round we're going to round the weather that main that temp and right there we are going to have a degree sign which you can do by writing and deg and then semicolon and then in there we are just going to add see as Celsius so if I do that right now and if I go back and if we search for Oslo one more time we should be able to see 18 degrees Celsius which means that works perfectly our last section is going to be yet another dev which is going to have a class name of info it's going to be additional info about the app so right there if you do class name of info in here we're going to have an image the image is going to have a class name of city icon and then just next to that we need to specify the SRC so how are we going to get the SRC of the specific icon for each specific weather to do that we are going to get the images from the open weather API the same thing we use for fetching the data in there I'm going to type the URL it's quite long so I'm going to just give it to you in the description feel free to copy it but in here as you can see we have the base URL and we have some image right there and we are trying to fetch this specific image which is dependent on the request we are making for each city without of the way we also need to provide an alt tag to an image and the alt tag just provides more info to screen readers it's always good to have them on our images and then inside of there we can have the weather that weather zero that description we of course could have the structured the weather but just not to complicate right now we're going to keep it simple and just do it like this right now below the image we also need to provide that same description so I'm just going to do the same thing it's going to be a B tag inside of there it's going to be water that water first element inside of there and then we have the dot description right there okay let's go back and see how it looks let's search for example this time for Toronto if I do this as you can see we get the full card with a city with a state Canada in this case with the current temperature and an icon and description of the current weather it's currently misty and you can see it right there at this point we are fully done at building the react side of this project now we can actually focus on adding all the functionalities the service worker and also bringing this lighthouse report to its full potential we're going to add functionality of seeing something when the page is offline and also we'll add the functionality of installing this application on the web and on mobile devices so let's do that right now the second part of this video is not going to be concerned with the SRC folder we're done with this now we have to focus on the public folder right here in the public folder we of course have the index.html there we have the favicon the logos and manifest what we're going to do right now is we are going to delete everything besides the index.html so we can recreate these things ourselves and learn what's happening there all of the stuff that we don't need is now gone and that shouldn't have altered the look and feel of our application because the main part is written in react and we didn't change that that's in the SRC folder right now comes the main part adding the serviceworker serviceworker is a JavaScript file which runs all the time as soon as you open the page it starts running it keeps running even after you closed the page for that exact reason service workers can help us with a lot of features for example they can send push notifications from your mobile phone they can also show something to the page even if you're offline so right now we are going to register our first service worker we do that right here just below the dev we're going to create a script tag and then inside of there we are going to register our first service worker first we have to check whether the service worker is supported by our current browser and we do that by saying if service worker with a capital W in Navigator so once we do this it's going to check whether this is true and if it is that means that we do have access to the service worker inside of there we are going to add an event listener so window that add event listener we are listening for a load event and then after it fires we're going to call a callback function right there inside of there we're going to call a navigator that service worker that register this is going to enable us to create our own service worker so how do we do that well as we mentioned service worker is just a JavaScript file so inside of there we're just going to point to it that slash service worker let's do it like this without any capital letters if we do that of course we need to go into the public and then create that service worker so we specified service worker is so right now we are going to be using this thing this whole file which we're going to fill in later inside of here we're going to load that specific service worker this thing returns a promise so of course we have that then if that's successful we get a registration and then inside of there we are just going to console.log success and we are also going to show registration that's cold that's simply going to show us the URL on which our service worker was installed and then if we get that catch that means that something went wrong in there we get the error and we are simply going to console.log in their failure and let's console.log the air like this okay so now we are done with the part of loading or registering our service worker let's save the file and see if we get any of these console logs if I do this we need to go back to our application and then in there we'll be playing with some different tabs right there you have this arrow and there you have the application tab sources memory a lot of stuff you can go to the application tab inside of here you'll see that we have access to the manifest which we didn't create yet and to the serviceworker make sure to check this box right there on page reload force the serviceworker to update and activate it we're going to need this for testing purposes because we are going to change our serviceworker a lot so now that that is done let's just delete it so we don't have anything and now if we refresh you should see failure that's good we are getting something let's see why is that happening as you can see in here we missed the dot JSP art we need to point to the specific J's file so if we save this right now and if we go back refresh we're going to get success at localhost 3000 that's great let's also remove this manifest right now because we are not using it for now just so we don't get any errors in the console as you can see we get success which means that our serviceworker is successfully registered inside of here we're going to first create a cache name so this is going to be the name of our cache cache stands for the storage of the browser so if we load something once if you make a request for example if you load the image we don't have to reload the image every time we go online we can just take it from the cache it's faster and more effective so in here let's name our cache for example version 1 just like that then in here we can create a variable called URLs to cache that can be equal to an array where we have an index that HTML and also we have an offline that HTML this is the document we are going to create right after finishing this worker and it's going to represent the page we want to show when the app has no internet connection great right now we need to write events for three different things first is the installation so we're going to install a service let's call it just CW Service Worker the second thing we want to do is listen for requests just like that and the third thing is to actually activate it so activate the service worker just like that now it's going to look like this we say self that add event listener this self thing means the service worker itself in here we get a little warning which says unexpected use of self which is a restricted global so no restricted Global's what we need to do to get rid of that warning is to say Khan's self is going to be equal to this because this in the service worker files actually represents the service worker so that's the way we call it okay event listener is first going to accept a type of the event in this case is going to be an install event and the second thing is the actual error function or the callback function that's going to be executed after this event is cold right there we do get the event as parameter now I'm going to copy this thing three times because we are going to have the same thing for the listening and for the activation as well and in there the only thing that we have to change is going to be the actual type of request so in here we have fetch and in here we have activate great so now we can start with the installation of the service worker in here we're going to open the cache and we're going to add this files right here to the cache how do we do that we first need to call event that wait until so we are waiting until something is done and that something is caches that open so we are opening the caches and we want to name our cache it's going to be cache name which we used just above right year this is going to return the promise so what we can do is we can save that then and then simply create a callback function as the parameter we are receiving the cash of course and in here we can simply return it so let's first do a console log console that log open cash just like that and below we can say return cash that add all and then we add all URLs to cash which is specified above in this case it's just the index.html and the offline that HTML okay now that that is done we can save this file make sure our app is running and we can go back to the browser to see if we do get this console log and as you can see right there if i refresh the file we get first success and then we get open the cash right now we need to go to the application tab and to clear the storage right there so we go clear site beta go back to the console refresh and right now we should be able to see success and open cache now every other time when you refresh it's not going to open the cache it's already there great so now we need to do something with the data that's coming from the cache you can also take a look at what's inside of the cache currently by going to the application cache storage and then in here we have our version 1 storage as you can see we have the index.html and the offline that HTML which we didn't create yet so just like that great now we need to do something with the requests after we listen for them in here we are going to do event that respond with so we want to respond with something when we notice a fetch request and the thing that we are going to respond with is caches that match we first want to match the event that requests the caches that match is also a promise so it's going to return a back then and we can also do something inside of here for each request in the dot then we simply want to return a fetch of that specific request so event that request so whenever there is something to fetch we simply fetch it that's it but what do we want to do if this fetch of course this is a promise again what if it returns a catch so in there we're going to add a catch and of course in here we do get the error so what do we want to do if we cannot fetch some of the resources and bear with me I know this gets confusing we have to respond with then we have dot then and then we have another promise which then we change that then on it's crazy a lot of promises there but we're going to just finish it and then go to this code one more time so in here we want to return caches that match and we want to return the offline dot HTML just like that so in the fetch request we respond with this thing here and what is this thing so we match all the requests this should be request I had a typo there so we match all the requests that our page is receiving for example a request to show the image a request for the API call a request for another image and then for all the requests will simply fetch them again in our case we never want to store the data about the API for example when we search for New York we always want to get new data so we always want to repeat the request for that specific thing and then if it cannot fetch the data that means that there is no internet connection in that case we get to that catch and we simply return the offline dot HTML which is our page for when there is no internet connection I hope it makes just a bit more sense if you have any trouble with something displaying or this not displaying later in the app there's possibly a typo in here I had a lot of typos typing this myself so there's going to be a link to the github repository down below feel free to then copy the code and leave a star if you like and that's possibly going to fix the issue great now we can move on to the third thing which is actually activating the event listener so in there we are often going to have lot of versions of our cash for example sometimes we're going to get this but then the thing is going to get changed and then we don't want to store all of that stuff in the cash so in the activation we are actually going to remove all the previous caches and just keep the new one so we're going to create a variable called const cash whitelist and we're going to make it equal to an empty array then we are simply going to push all the things that we want to keep so cache whitelist that push in this case we always want to keep our cache name that's the cache that we work with we want to keep that now we can call event that wait until the same thing with it if you take a look above right there wait until we wait until we get caches that keys not surprisingly caches that keys also return a promise so we need to chain a dot than on them let's do it in one line here so dot then and as a parameter we receive cash names a plural just like that so what do we want to do with this cache names well we want to return a promise that all and inside of the promise that all we are going to loop to the cache names so cache names that map and for each cache name we are going to make a simple if check if not cache white list that includes cache name then we want to return caches that delete cache name so let me explain what's happening here if the cache white list does not include here's the exclamation mark so if the cache white list does not include the cache name then we want to delete the specific cache name but if it includes the thing that we have in here and the white list then we want to keep it so in our case whenever we update something whenever we change something it's going to keep only the version one which is all that we need so right there it's going to delete all the previous four versions and it's always going to keep the whitelisted version right there as you can see if it doesn't include that specific cash name otherwise this is going to happen for all other cash names it's going to delete them so in this case we are keeping only the specific cash version we need okay this was a crazy journey right there for creating this serviceworker the code uses promises and that bends and we need to write everything inside of this wait until so there's not a lot of possibilities to do this with async await but it is what it is this is it for the serviceworker now we can actually create the offline that HTML file and then in there I'm just going to paste the code for it it's quite simple it's just a simple HTML document with just some head tags and then in there we have some styles and in the body we have just please go online to check the current weather so really really simple I'm also going to leave this in the description so you can copy it as well and if we now save that save this serviceworker and go online let's try to go to the console refresh and let's see what's happening right there nothing really happens we get success which is great and if we go to the application tab we still have this version right there maybe that's from before so let's make sure to go to the clear storage and clear site data now as you can see there is nothing in the cache but if you refresh you should be able to see open cache go back to the application and we have our version 1 we have our caches right there and what does that mean well if you go to the network tab in here you can emulate the app running without the internet connection so in here we can change the online to offline and then refresh the page that's amazing we actually have our page running all flying right now without internet connection so we say please go online and the user can just pick online and simply be there and search for some cities and get the weather information okay let's refresh one more time with the internet connection on and let's try to go to the lighthouse and then run the audit so we can see whether we improved some things of course it's not going to be 100% yet because we don't have the manifest but we are going to add that really soon that's the easiest part the serviceworker was really the hardest part of this whole PWA thing and as you can see of course not everything is correct but the current page responds with a 201 offline that's the biggest part we try to solve with the serviceworker and all of the other things should be sold when we add the manifest so what is manifest well manifest is just a simple JSON file that's it pure JSON in there we specify some more information about our application in there let's do a short name in here you can provide a short name for application in this case is going to be weather app right there we can also give it a normal name so that's gonna be name we can also do weather app bwa for example and make sure that you have this double quotation marks around object keys because this is Jason this is not just a basic JavaScript object okay and then the most important part of this manifest is going to be the icons array in here we can specify the array of icons in our case we are only going to have one so make sure to wrap that in an object in there you can specify the SRC or the path to our image our image is going to be stored on there / images / logo that PNG we're going to add that image right now then we can specify the type of our image the type in this case is going to be image / PNG just below we can also specify these sizes of our logo in this case it's going to be 2024 pixels by 2024 pixels just like that that's it for icons then we need to specify the start URL of our application and it's simply going to be dot means the current one the public one here or later when we build this is going to be slash build okay now we can also say display standalone so display standalone that's just a basic thing to add to a bwa below that also some things which may improve the look the theme color this is going to be for example on android apps when you scroll the actual navigation bar is going to have the theme colors in it so in there we can specify for example a hexadecimal black color so that's just gonna be black and we can also specify the background color which is going to be simply let's do a hexadecimal white so that's gonna be ad ffffff just like that and this is going to be it for a manifest the most important part of this icons here because we need to have the icon for the installation on mobile devices I'm going to provide you with the images you're just going to create a images folder right here in the public and then you're going to paste the images I provide you in the description that's going to be BG jpg and also the logo dot PNG which is going to be a nice logo for our application as you can see right there great now we can go back to the index.html and remember this line which removed that was the point to our manifest in here we're just going to remove this public URL and we are just going to do dot slash manifest that JSON and then there we have this Apple touch icon that stands for the icon on the Apple devices again we're going to point simply to the dot slash images slash and in our case that's gonna be just logo dot PNG so logo dot PNG in the description you can write for example modern PW a weather react application just like that and then in the title you can say weather app just like that and for the favicon we're going to use the same logo we provided there so we don't have the favicon dot ICO we have the dot slash images slash logo dot PNG since it's a PNG and usually the favicon is ICO we just need to say type which is going to be equal to image slash PNG just like that that's going to be it for our head right there we added a lot of stuff we added images logos team colors and the manifest itself if we save that right now we should be able to go back to our application and let's see what happened you can see right there at the top we got our icon we also change the title of the application to the weather app and now if you try doing the lighthouse audit one more time you can click this to clear it let's generate a new report and let's see what's going to happen right now and as you can see we got three of the three on fast and reliable three out of three on installable and PWA optimized six out of seven this one is really really really important does not redirect HTTP traffic to HTTPS it's extremely important for pwace to be HTTPS they need to be secured why for the reason that service workers are extremely powerful as we said they keep running even after you close the application we don't want them to be harmful so that's why we need to be secure by default localhost is not secure you can see it's just HTTP so to get this last checkmark checked we need to publish or deploy our application and we are going to do that using natla file you can go to the Netflix I site log in there using github or any other account and then in there you'll have a lot less applications but you should have something that looks like this want to deploy a new site without connecting to get just drag and drop your site folder here so how do we actually drag and drop the folder while four react applications we cannot just drag and drop the public or DSRC because in the public as you can see we have just the images and the index.html and we don't have the actual code and in DSRC we don't have the actual index.html which we want to deploy so there is a command called npm run build and this generates a built folder which then we can drag-and-drop there that's a fully production already application that bundles all the files from react to be able to run on a basic website right there it's created you can see it right there so feel free to reveal it in finder or just find it in your file explorer on windows and then you can go back to Napa file and just drag and drop the build folder right there once you do that the process is going to be instantaneous you're immediately going to have your app online published for everyone to see of course if you send in the link right now let's see if we can search for something let's do New York and we do get our application it's working now let's go inspect it and if we go to the network tab let's try to bring it offline if we refresh as you can see this currently does not work we are not ready rekted to the real page and that's because when you just click offline right there the browser still knows about some stuff we use before it still knows about this index.html so I'm going to turn off my Wi-Fi for real this time and let's see what's gonna happen right now the Wi-Fi is off and if I click refresh as you can see we do get please go online to check the current weather great I'm going to bring myself back online to get back in the real world and we are going to do one last final lighthouse audit right now let's see if we are back online and great we are let's go to the lighthouse and generate a report and as you can see everything is green all checkmarks are checked and we are fully optimized so what can we do with this deployed application well in the chrome for every PWA you're going to see this little plus icon right there if you click that we can actually install this application on our device doesn't that sound crazy web app can be run on the device so if I click this it's going to install it right now and it brought it to me in a separate window so I'm going to go back to a normal window and then I'm going to drag and drop the app which just installed as you can see here this is a real full-fledged application we can open it in full screen this is not Chrome this is weather app bwa and we can search for Mumbai this time okay 31 degrees pretty hot there and that's amazing our app works and functions I'm going to try to turn off my Wi-Fi one more time and we do get our message amazing a fully functional progressive web application and the last thing that we are going to do is going to be the most amazing one we are going to take our app which we just deployed and we are going to publish it to a real PWA store there you can search for the top progressive web applications as you can see hacker news has won there's the dyno game the most popular PWA and other people are also going to be able to discover your application you can rate applications and write comments there so how do we actually deploy our application well you can go under profile you need to sign in or log in with github first and then there you can click on this plus icon once you do that you can enter all the information about your application then it's going to be reviewed and published in our case that's going to be weather app by j/s mastery then we can add some tags let's say weather react that's enough then we can of course choose the icon and that's going to be the same one which we used in the public folder in the images right there the logo dot PNG we can take that is there and then finally we can post a link to our application once you deployed it to nullify it gave this link so you can take this link and paste it right there finally we need to provide a description so let's say weather application created using react is and open weather API and we can add progressive progressive weather application created using react GIS and open weather API the category is going to be let's see we can leave it as as a tool yeah that's it definitely a tool we can also choose some screenshots so let's go back to our native app and let's just take a screenshot right here of the whole app then we can also search for something so let's search for example for New York now we can take a screenshot of this as well we can also show the mobile version right here if you go under inspect and then just select this toggle device toolbar now it's a mobile version we can also search for something let's make it diverse so this time let's do Vienna and let's take a screenshot of the mobile device just like this finally we can make it work offline and then let's take a screenshot of this as well now we have 4 9 screenshots which we can post right there in the choose screenshot section ok I uploaded all the screenshots and the final thing that they need to do is to check whether it passes the lighthouse PWA check right to make sure it's a progressive web application and we are absolutely sure that it 100% passes all the tests so we can click this without any doubt ok all things are checked the app is installed ball it has a valid iOS icon and it runs offline if I click Submit right there we are now submitting it for the review that's it it's currently pending it's going to be reviewed by the PWA store team and when it is it's going to go to the discover section of the store and other people will be able to find your pwace of course if you publish them here and that's going to be it for this video with it quite a lot we build this app from scratch a react application we managed to create a serviceworker and the manifest at Jason and it passes all the checks that Google lighthouse audit provides we also installed it on our device as you can see it's running natively right there and the same thing is if you go to a link to a mobile device it's also going to prompt you to install it on your mobile device if you liked this video feel free to smash that like and subscribe button and let me know in the comments what video would you like to see next thank you so much for watching [Music]

Channel: JavaScript Mastery

Views: 270,243

Keywords: progressive web app, progressive web apps, pwa, progressive web apps react, progressive web apps react tutorial, progressive web apps react js, pwa react, pwa react tutorial, pwa react app, build and deploy a pwa, build a pwa, build ande deploy a pwa, service worker tutorial, service worker tutorial react, service worker in react js, manifest json react, react offline app, pwa tutorial react, react pwa, react pwa offline, progressive web app react, pwa react js

Id: IaJqMcOMuDM

Length: 51min 56sec (3116 seconds)

Published: Fri May 29 2020

Reddit Comments

[u/poorpredictablebart]

It seems like every year someone talks about PWAs being the future of the web or the next big thing and every year we see them fail to catch on because:

1. 99% of businesses aren’t going to want to build an app that will never be listed in Apple’s App Store. Starbucks and Twitter that are probably the sole exceptions and both of those companies are loaded with huge installed user bases.

2. Despite all the talk about performance and responsiveness, spending 60 seconds with one is more than enough time to make you realize this isn’t as smooth, responsive or familiar as the native apps on your iPhone. They still feel like browsing slightly faster webpages. Because they are.

[u/eflies44]

I like the idea of PWAs because looks like we finally faced the obvious question «Do we really need mobile apps in all these cases when we do develop them?.. ». I often see small tiny apps that main purpose is to present small tiny business - and they will hire/pay for an app, while it is actually perfectly fulfilled by PWA. Doesn’t seem to be a total replacement of mobile apps, but a perfect tool for concrete purposes.

[u/hugesavings]

I've literally never heard of someone installing a PWA. I'm not saying they're trash, but I just haven't seen the adoption.

[u/As-AboveSo-Below]

Shit guys I’m still learning React 😂how do I work better with states than with props, components are fine but just starting Redux too.

[u/Niku-Man]

PWAs is just a buzz word. More jargon for an industry filled with jargon. They're just websites. It's all just websites.