Next js 14+ Tutorial - Prompt User to Install PWA on Desktop Conditionally

hi guys welcome back to another video on next js14 in this video I'm going to show you how we can convert over web app into pwa and prompt user to install a web application into a pwa in the previous video I've already shown you that what is pwa what are the benefits of pwa if you check out my playlist on xjs 14 tutorials you can see that this is the last video I created convert NEX js14 plus project into Progressive web app what is pwa what are the benefits of pwa it is almost 22 minutes video you can check that out if you don't know what is pwa so in this video I'm going to be using the same project in which I converted nextjs app into pwa but in this video I got few messages from some of my viewers that we want to be able to prompt user to convert this web app and install it as a desktop application so let me quickly show you when we refresh or open up any web app we can actually install install it by clicking on this link any of which is not pwa we will not be seeing this icon on the browser so here you can see that I can click on the install so you can see that it has converted that web app into a desktop application and if I show you all my apps in my Mac let me scroll to the right and this is the last application you can see that this is the random logo I have used and this is the title I set just for elaboration okay and even if I don't open up my app on the browser I can still click on it and it will be open up as an application just like other apps installed in my Mac and uh I don't need to have a specific Mac OS it can be done on Windows Linux or even on mobile browsers as well I have shown you in the previous video all right so let's start converting over existing NEX js14 pwa project so that we can prompt user if it is not already converted into the desktop app then user should be click on any button on the model and should be able to convert this web app on the browser and next time should be able to open up the same app as a desktop application okay so this is the project there is nothing UI stuff added inside it it's just the simple NEX js14 project I have not updated any UI in it because this is not the purpose and if I open up this public folder you can see that these are all the files I showed you were created in the previous video when I converted this project U into a pwa all right so first of all what I'm going to do is I'm going to create a new component for the model model is going to have a title uh maybe the description and the button to install the app and then the cancel button okay so first of all I'm going to open up this Source folder and uh let's create a components folder and I'm going to create a new component name inside it so let's say that the PW model. TSX all right so this is going to have a model so I'm going to use that snippet and uh this is going to have some kind of UI so first of all I'm going to be using the Tailwind CSS because it is already configured so this is the diff the main diff so let's try to add some class name to it so fixed inser zero X items Center and the justify Center and then I will be giving it the Z index because this model needs to be at the top of everything on my page so let's give it zindex of 50 all right so let's go inside and create another div and this div again is going to have a class name and I'm going to give it a background white color I can give it uh any width let's say 94 and then let's give it some kind of padding inside it so rounded LG okay so Shadow LG all right so this has been done inside this da first of all I will be having a title class name so let's give it text to large font semi bold [Music] mb2 text black all right so this is going to have the install the app you can give it any title So Below this let's give it some description as well click the button below to install the app on your device it can be any device like mobile browsers or any operating system okay and we we can also give it some class as well so let's give it some classes so P class name text SM mb4 text black okay so let's quickly go ahead and open up this page. TSX and I'm going to be importing this component just to see whether it's visible on the page or not so here um let's try to add it over here at the bottom of this jsx so within this div I'm going to be having the pwa model all right so let's go and see yes this is the model showing up uh above everything on this page and it is on the center of this page obviously uh we you can use any library to show up the models but this is not the purpose of this video I'm just quickly creating this model and adding some styling on it and and below this P let's add another div and inside this div I will be creating a new button and the class name so let's give it uh background blue 500 hover blue 600 and uh text white PX4 rounded MD and and uh let's give it some margin to the right side of two okay so install pwa is the text on this button and also we can give it the on click event handler which we will be passing it from that page component where uh it is using this particular component so let's give it a name for now install which does not exist right now so let's try to add uh the params which I'll be passing from the parent component first of all so here I'll be passing if we need to show the model or not this will be a Boolean value so let's pass from parent component to this one uh and give it a name show so we'll be giving it on close if user wants to cancel that model and don't want to install it for now uh this is a typescript file so let's try to give it any for now okay and U this is install and below this button let's try to add this button now and give it a class name and background gray 300 and I'll be giving it hover background gray 400 okay so let's give it text Gray 700 Ping On The xais of four Ping On the y- axis of two and the rounded mg all right so let's close it like this okay so within this button let's give it some text like close Okay and let's also give it the on click event which is being passed from the parent component so on close which is being passed so let's try to save this file and go you can see that it's showing this button like this it's looking good so maybe we can actually increase the height of this button uh in fact let's try to give it some class to it and I'm going to give it Flex okay now the button height has been automatically increased because I've have given the flex all right so now uh what I'm going to do is below this div I'm going to add another div this is going to be a complete hover or you can say a complete overlay to everything else other than this model so in inser zero and then background gray 900 opacity can be I will be giving it an 80 or you can say a 90 uh what happened okay so opacity is going to be 80 over here and minus Z minus 10 okay and finally I will be giving it the value and the variable value which I'll be creating above so blue background or a blur [Music] background okay so this has been created and I'll be completing it like this there seems an error I need to close it with the double quotes all right and uh I think this this blur background variable needs to be created uh now before that it to work so const blur background equals to and first I will be checking if uh the model is showing up then I will be giving it a value backdrop blur okay otherwise I will not be giving it any class okay so it's not a blue background it is the blur background so let's save it and uh here it's actually not showing up here let's try to debug this so we have this div uh actually we don't need to wrap it within the double codes all right so now uh final thing we need to do is we need to add this condition like the show okay if we want this model to be showing up then uh this show Boolean variable can handle this okay all right so let's go let's try to refresh it's not currently visible the reason may be that uh this show is not being passed from that parent component so that's pretty much it we need to do in this file let's go to the page. TSX file and let's try to pass the show variable first of all and see if it starts appearing yes you can see that it has started appearing and everything else has an opacity of 80 uh at the back and it's working fine and it these buttons will not do anything because I need to pass its references from the parent component so we can actually pass it on close equals to and this function is not yet created in this file so handle close model and then we can have the in on install uh this is what I think I added um in that so handle install click okay so you can see that on close and on install these are the names I have given to these so let's try to fix these error first of all by creating these empty functions uh and this will be the on handle on close and handle on so I will be creating the handle uh install Click by creating this Arrow function and then handle uh what is that it's handle close model okay all right so the error should be gone now yes error is gone uh and now what I'm need to do is uh what it's showing so there is a function it has to be the client component yes I need to convert it into the client component because there are some click events all right so this is where our main functionality is going to get started so first of all all I will be creating couple of States inside it so first of all I need to manage if model is showing or not show install model and set show install model equals to use State and this is going to be a Boolean by default model will not be visible okay so let's try to import it from the react and uh next variable is going to to be um let's say is available or you can see that it's uh going to be a prompt and set prompt and then the use State um it it is going to be an event that can have a lot of properties so I'll not be creating any interface for this uh so I have just given the type any to it okay so in the terminal there is no error this these are just warning because I'm not using using these variable these are just the linter errors all right so then I will also be needing the use effect hook so I will be adding the use effect hook with this syntax and uh let's try to add empty dependency array because I want it to be um running only once when this component is going to gets mounted okay so inside this user effect I'm going to add an event handler okay so window. add event listener and there are a lot of event listeners and these event listeners can change uh browser to browser and the event listener which I'm going to be using here is definitely going to work on the Chrome but you need to check the docks and the some U documentation on the Mozilla Firefox or on the Safari what are the different alternatives for that so uh some browsers restrict you to not to use its apis maybe to not to programmatically open up any model okay so this video is specifically for Chrome but the logic and the structure of the code can be same if you find an alternative for the let's say the Android mobile um um uh Opera browser okay then that can have a different kind of event listener for that but here I will be using a before install prompt okay this is an event listener and I will be creating a new event listener function inside it so handle before install prompt uh this is the function which I have yet to create so let's try to create that first of all within this use effect so I will be creating the handle before install all uh it's going to be yes U and then it is going to take an event of type any all right and uh it can have a default uh props it can have a default uh popup model so this is how I can prevent it by setting it and then I can actually write the set prompt with this event which is being passed with this event handler okay and you can see that this prompt is going to contain uh this event reference all right and after this I'm going to check if the application is already installed in my operating system as a desktop application or not means if the application which is running on the browser is already converted um into PW desktop app this is where I'm checking it so I can check it by writing the window do match media and then I can write the display mod stand alone and then I can write uh something like uh matches okay and if it is going to this means that if the application is running uh is is not stand on in my uh desktop then it this condition will get true if the app is not converted into the pwa and not installed as a desktop app so then I will be showing it set show install model equals to true as a state variable over here by default it was false and this use effect is going to get uh running automatically when component it's going to gets mounted and when this is going to gets true then uh we are going to pass this variable over here by by adding this this show property and when it is going to gets true this is going to get true and everything is going to get visible all right so for now let's go at the top and uh we are going to copy this one let's try to add it over here and let's try to refresh this page and uh I'm going to go to the browser and let's try to refresh and here you can see that it's not already showing the model the reason is that uh our app is already converted into pwa as a desktop app so let's try to delete that pwa app first of all so I'm going to search that out yes it's already installed and I'm going to click on here uninstall this one okay okay so this is uninstalled and you can see that when I uninstalled it it has triggered and detected that uh we have not converted this web app into uh and install it uh in our operating system okay and uh yeah we are going good for now and uh quickly uh to avoid any memory leak and it can cause few problems when we have different pages on on our app so it's always a good practice to add some clean function and uh we can write a cleanup function by writing the return statement within use effect and we can simply write uh this line again let me copy this within this return and uh here we can um actually remove event listener everything else is going to be same all right it will not do anything but if in in few cases it can can cause problems so just to avoid that I've added this condition next thing we need to do is we need to write some code to close this model and to install the app in this uh um in our app so this is not going to install it in fact clicking on this install pwa is going to open up this model automatically okay so let's try to do that um let's go at the top first of all in this close model I'm going to set this one um set show model equals to false this is what I'm going to do quickly so this is going to close that model so let's click on close yes it's closed let's try to refresh the page and again it has detected that uh it is not installed in our desktop so let's try to go ahead and uh this function everything else we need to write in this handle install click now we have to first of all check if the prompt exist or not this variable you can see that we have actually modified and updated the value of it over here and if event exists inside it then we want to proceed uh quickly just to avoid any unknown issues after this we are going to write the prompt dot prompt okay this is a function built-in function exist within the event of this handle before install prompt event handler um this event have a built-in function called prompt this is what I have called over here all right so let's try to see if we are able to prompt that model or Not by clicking on this install button let's try to click on it and yes it has actually used the API and click by clicking on this in cancel and the install button and if I click on install we can actually install it uh in our system and we can also detect if user pressed cancel or pressed install if we want to perform some more logic in our application let me show you how we can do that so I can write the prompt. user Choice do then and then this is going to give us the choice result we can write any name for this variable okay so this Choice result uh we can actually detect if Choice result do outcome equals to accepted okay then we can simply log this out you might have a different uh logic so accepted means that user have installed it or we can actually write console. log or the cancelled I'm going to show you if it works by opening up my inspect window the console window Okay so after this uh we can simply uh set the Set uh prompt to null okay so once user have clicked on the cancel or the install button uh we want to remove uh that event from the these State variables U it's up to you if you want to do that so and also we want to hide that model as well okay so set show model equals to false all right all so when we will be refreshing it it will again be showing up because uh this component is going to be mounted again but you can store the value of it in the local storage uh to avoid showing uh uh that model to the user next time when user cancel something okay so let's try to save this file now let's go over here let's try to refresh this page yes click on the install um there seems an error so use Choice uh let's see see this is not used choice this is user Choice actually okay let's try to refresh let's try to click on install and there is no error now uh let's click on it again let's try to inspect it first of all let's click on the console window and you can see that it is showing the cancelled let's close it let's refresh it let's click on install and click on the cancel and you can see that it is showing cancelled means that we are successfully able to log this statement now let's try to install the application let's click on the install again let's try to click on the install this is going to close the uh the this browser window as well so let's click on install and here you can see that it has converted that web app and install it in my desktop in my Mac system and it is converted now let's open up that same application in the browser again which it closed so let's open up Local Host 3000 and let's try to refresh it you can see that it has detected that it is already already installed and it is not showing that model all right so that's pretty much it for this video it uh got a bit longer but I wanted to show you each and every step by creating the UI and stuff like that and adding some event listener it might not work on the Safari but um if you want to enable it and uh might have found the different event handler uh you can add different conditions like the if this is true then you can have like Um this can have window do iOS installed something like that you can keep on adding the conditions over here and it will start working on the other browsers as well all right so thank you so much for watching guys don't forget to subscribe my channel see you in the next video and I'll be creating more videos on NEX gs14 and I'm planning to create Project based videos as well comment below if you have any suggestions if you want me to create any techn techology uh based videos or a Project based videos I'll be looking forward to your comments see you guys in the next videos

Channel: Programming with Umair

Views: 1,758

Keywords: pwa, prompt to install pwa, next.js 14 pwa convertion, how to detect pwa installed, progressive web app next.js 14, detect pwa installation, how to install pwa on ios, how to install pwa on android, how to install pwa on desktop, what is pwa, what are the benefits of pwa, how to prompt user to install pwa, next.js 14 tutorial, next.js 14 server actions

Id: 9AOf_uPMVpM

Length: 26min 6sec (1566 seconds)

Published: Thu Nov 30 2023