Convert Next.js 14+ App to PWA (Progressive web app) | What is PWA and its Benefits

hi guys welcome back to another video on nextjs 14 in this video I'm going to be talking about very important topic called pwa Progressive App so I'll show you how we can convert our nextjs projects that is built using App directory into Progressive web app before start building and creating a new next j4 project let me give you an overview what is pwa how we can test if the web app is converted into the progressive web app and I will be showing you what are the different benefits of conver in our web app into pwa so this is the next gs14 project I've not changed anything in terms of the UI but I've already converted this app into pwa you can see that it's running currently in my local host on Local Host 3000 and I will show you how we can test it if it is actually pwa or not first of all I'm going to go and inspect this page and I'm going to open up this Lighthouse and uh I can select any of these so Progressive web app means pwa so I have checked it and I'm going to click on analyze page load so it's going to analyze it in terms of pwa because this is the only option I've selected and now it is showing the tick mark tick mark means that this app is converted into the pwa and I'm going to show you that how we can configure our next js14 project into pwa another thing that I want to show you that when we convert over app into pwa we see this icon in the address bar if I click on this icon you will see that it will ask me to install the app so this is one of the biggest benefit of pwa is that we can convert over web application into a native app in any operating system whether it's Mac OS Windows Linux or even on mobile devices on IOS and Android so when I clicked on the install it actually converted my web app into a native app in my Mac operating system on the desktop so you can see that it is behaving like an application it is not working on the browser and if there are any routes within my application it will work like as it is as it was working on the browser with some extra benefits which I will show you in a bit okay so if I show you the Bottom bar you can see that it is showing the app in the bottom bar as well if I close this application and I go down and I can search this application which I have converted so I can write the pwa you can see that this app is already installed in my system I can click on it it will be opened again and I can work with it I can click on it I can navigate from one page to another page now let me dock it so I'm going to click on keeping dock I can close it and I'm going to open it up again so you can see that even if my browser is not opened I have not opened the web app on my my browser still I'm able to use the whole application as my native application in my desktop and we can convert it as I've said on the Android devices and iPhone devices and other desktop operating systems as well so let me give you an overview on my iPhone device that when we open up any web application on browser on iPhone I've opened up Netflix which is the pwa web app there is a share icon at the bottom if I click on it you will see that there will be a add to home screen button if scroll down a bit if I click on add to home screen an icon will be added on the home screen on my phone so when I click on this icon it will be opened up as an application like just like a native application it will not be opened up on the browser so there is a difference some people get confused that this add to home screen button is also visible on non pwa web application as well on mobile devices but when you will add a non pwa app on your home screen of your iPhone or Android phone it will be opened up back in the browser it will not be opened up like a native application it will just be a bookmark to the browser okay so this is the main difference and you might have little bit different button text for your Android devices so now let's start off by creating a new NEX js14 project I've opened up vs code and I have the latest version of node and npm installed in my system so I'm going to write npx create next app at latest okay so I'll hit enter and uh it's going to ask me the name of my project so I'm going to write next pwa all right I'm going to go with the typescript es L Tailwind Source directory app and alas so it's going to take some time and download the different dependencies so a new next js14 project have been created these are the files it has created let me go inside in the terminal so I'm going to go write CD next pwa and first of all I'm going to run this project without converting it into the pwa so you can see that it's currently running on Local Host 3000 let's go into the browser I'm still opening up that previous application I'm going to refresh this Local Host column 3,000 again okay so it's going to refresh it you can see that currently on the address bar there is no icon for installing an app on my operating system because this is not a pwa and if I go to the inspect and try to analyze it again with the lighthouse by selecting the progressive web app so here you can see that it is not showing the tick icon and there are a lot of errors that it is showing which we are going to fix and convert this new next js14 project into pwa and if you are new to my channel you can see that I have a playlist nextjs 13 tutorial app directory and I have a playlist on nextjs 14 and I've created almost 41 videos on app directory and you can learn pretty much every topic that you will need to become a good nextjs developer using App directory it contains Project based tutorials as well Performance Based authentication authorization based so I would request you guys to subscribe my channel it will really encourage me to make more videos for you guys so let's get started first of all I'll be installing an npm package so let's go onto the browser so this is the npm package it is quite useful and wellmaintained and if we see its documentation it provides all of these features and if we click on this link and we will be navigated to this page and we can click on the next pwa so these are the instructions I'll be following most of the instructions some are not required so I would request you guys to watch this video till the end so first of all I will be installing it like this so I will be only installing this package npmi so let's go into the terminal of vs code and place this command so it's going to get installed over here within this dependencies object all right so once it's getting installed we have to open up the next. config.js I will be copy pasting this code and uh there are few more things that I would like to add inside it these are some configuration options that we can add so let's go into the vs code you can see that here it is installed and we are good to go let's open up the next do config.js okay so below this let's come down and I'm going to paste this line with pwa and first of all I'm going to if I were to write anything inside the next config currently there's an empty object but uh in uh in big application we have to wrap it I'm going to wrap this whole next config with the variable that I have created above the with pwa okay I'm going to close it it like this all right so now we have set this one configuration destination public and public is the folder which we have created so it means that all the service workers service workers is a concept it is a very big concept you can learn it on your own that enables pwa for your web application and this package automatically creates all the required files of the service workers within this destination folder currently it's the public we can change it obviously okay okay but it's not recommended to change it okay there are few more options that I'm going to add if we go to the configuration these are all the different options but I'm going to be using some of the options which I find useful okay so let's go and uh below this destination first of all I'm going to add cache on front and nav so I'm going to enable it after this I'm going to add aggressive form nav caching and I'm going to enable it as as well after it I'm going to reload on online true okay so these are the different configuration you can read out the description of each of these options and uh these are very useful okay so now this reloads mean you will be able to understand these options when I will be explaining you the benefits of pwa by the end of this video okay so now I'm going to write s w which stands for service worker I hope so so s SW Minify yes it's going to Minify this now I need to give it a configuration option uh I think it's the disable let me see yeah it's the disable so we have to like disable any environment but currently I want to enable pwa on all the environments whether it's the deployment uh development staging or the production so I can write the disable false okay false means that don't disable it anywhere in any environment and if we want to disable it on development only we could write it over here if we want to disable it for production we could replace development with the production okay so we have added this one last thing I would like to add is workbox options and inside it I will be adding the dis able Dev logs equals to true all right so let's save it and in this file I think we are pretty much done with it and uh again go through all of these hopefully you will find some useful stuff based upon your requirements you might have built a big application in nextjs and you have converted pwa and these options will be very beneficial for you but for me I've not changed anything in nextjs uh so these options are pretty much much fine for me okay so here first of all I'm going to go and uh I'm going to create a new file and that is called manifest manifest file includes the values the attributes of the PW application the name when we convert our web app into mobile application or any operating system it has a name it has a description and most importantly it has icons it has a theme color that icon that shows up when we convert it into the home screen okay so here I'm going to create a new file within the public directory and I'm going to name it manifest.json okay if I go to the docs get started if I go down below I don't need to add anything like this you don't need it uh also don't use it okay uh if you are using the old versions of nextjs uh then you would need these but in latest version app directory you don't need that this is the manifest.json so I'm going to copy paste um the structure from here in fact what I'm going to do is I've already set up the Manifest file uh in my notes so I'm going to copy paste that all right so this is the Manifest file it contains an ID you can write anything to it we can write any name when we will be converting web app into the mobile app it will have a name it will have a short name it will have a description you can modify it obviously and these are the icons and these are the parts of the icons that I will just be adding within the public directory okay and um these are the different sizes there are few more sizes for these icons that um uh can be beneficial but these are recommended sizes 512 make sure when you add the images the icons the splash screen icons the mobile home screen icon for the converted PW app U those resolution should match with these sizes okay so I'm going to add the different images for the same name which I have added so this is not this is just the icon I have downloaded from the Google okay so I have added these images you can see that for the different sizes I have added these images it's in the PNG so this is the Manifest file this uh that I have added all right so we have the theme color when I converted my application into pwa you saw there's a blue color at the top bar that shows this we can obviously change the theme color background color start URL is the base URL uh we want to enable pwa for the Standalone and the portrait orientation all right so yeah so after this one last thing we need to do is I'm going to open up this file the layout file if you have an understanding on the nextjs app directory you know that this layout. TSX file actually runs for all the routes all right so here I'm going to add the manifest file within the meta all right so here first of all I'm going to bring here and I'm going to write the Manifest colon Das manifest.json all right and uh we don't need to import that because it will be automatically added and uh find out this file because uh this is how it works now if I run the project guys keep checking the public folder on the left side so I'm going to run npm run Dev so it's going to run on Local Host 3,000 and still it's processing something and on the left side you will see that it has created different service worker files server worker. JS and if this npm package was not available we will have to write all of these configurations over s all right so this is the map service workers for the development workbox okay so this is the whole code that it has generated and in the terminal this is something I want to explain you that um it has compiled for Server statically successfully for the pwa you can see that it has shown PW within the parenthesis in the terminal and it has successfully figured out the file path for the S W.J uh for the scope and this point is very important don't get confused because it says that caching and preachings are disabled for the most part it's because we are in the development mode and in development mode the caching and some of the features of pwa should be disabled because if we come across any kind of bug or error in our application we should be able to debug that and because of caching it becomes hard to debug that problem that's why it is recommended to disable caching during development for debugging any kind of bug that's why here it is automatically disabled all right when we will be publishing our pwa to any hosting service provider then it will be automatically enabled the caching and the preaching um even if uh the internet connection is not available I'll be explaining you these kinds of benefits uh by the end of this video So currently this project is running I'm going to open up this browser currently you will see there is no icon on the address bar I'm going to refresh this page and let's see that if this icon appears or not and uh let's try to hard refresh it so here you can see it has showing the icon for installing over app in my desktop system as a native app before installing it I want to explain you one thing you might be facing an error during this process it might be because that uh you have already built any pwa website or you have already converted any nextjs app into the pwa what you need to do is you need to change the ID over here previously it was one I've just changed it to two Okay so and on the browser since it was already running and nextjs automatically caches things so you need to hard refresh three four times so that it can start showing this icon to install the application it will not happen first time when you will be creating and converting into the pwa and uh because it was already already running so you might need to hard refresh again and again uh maybe three four times for it to show up over here okay so I click on it and I'm going to click on the install so it has actually closed the tab from the Chrome browser and it has opened up the app which is installed for this application which we have converted and in the bottom you can see that it is showing this icon as well and we can change the icon from the Manifest file we can change the title from the Manifest file and we can change the description and these icons as well all right and uh you can also try this out on your mobile devices as well okay by converting into the public URL opening up into the browser or deploying it on your hosting okay so let's open it up the Local Host 3000 again one thing here you can see that it's not showing that install icon because it has detected that this app is already installed in our system okay I'm going to go and click on the inspect and opening up this uh Lighthouse and I'm going to test this out analyze page load and uh it should now show The Tick icon on the pwa because we have converted it all right so it is showing this plus icon and it's not showing tick icon there is one small thing which is missing so I'm going to go into the documentation go up and this is one thing which I would like to add here so I'm going to go and open up this layout file and below this metad data I'm going to paste it let's import the viewport from the next it has been imported and I'm going to change the theme color and uh by copying the theme color from here and I'm going to paste the color over here all right so I'm going to paste it and I'm going to rerun the project now all right so it's going to update these service worker files and uh now I'm going to open up this thing and I'm going to hard refresh uh three four times uh because it might have cached few things all right so I have hard refreshed now I'm going to open it up and analyze the page again now it should show The Tick icon and that error that it was showing should be fixed now all right so this error is fixed now theme color is added and it's showing the take icon and we have fixed and converted our next js14 application into the pwa it's time to learn about the benefits of pwa so let's talk about that now so there there are a lot of benefits of pwa but what I'm going to show you are the major ones so the first one is the improved user experience so pwa are designed to feel like a native apps I I've just shown you they can be added to the home screen and just like the native apps they can send the push notifications and can work offline as well just like the native app they cached the previous data first time you open up the app on the internet connection and it caches the data and next time when there is no internet connection it will update the UI from the cached version and it will be automatically update as soon as the network comes back so this leads to a more engaging and seamless user experience next one is I've already explain you the offline accessibility that pwa can be accessed offline and low Network conditions like this happens because of the service workers that I've just shown you that caches the important resources all right and the third one is the performance boost so PW often load faster than the traditional web apps especially after the first visit as resources are stored in the cachier this improved performance can lead to higher user engagement and retention the next one is the cost effective that we can convert the web app into the mobile app and developing a pwa can be more cost effective than building the native applications itself for multiple platforms like iOS Android and uh we need to hire multiple developers so it is cost effective a single pwa can work across all platform reducing the development and the maintenance cost the next one is the auto update uh means that uh it user don't need to open up the store of the iOS or Android and update their application as soon as the URL on the browser gets updated when we deploy the new verion on the uh desktop browser then the native mobile app which is installed the PW app on the mobile devices would be automatically updated with the updated UI or the functionality that is added in the application and uh the last one is the search engine optimized as the pwa are still the web applications even if they are converted into the pwa and install it on the mobile devices they are indexable by search engine still which can lead to a better visibility and organic traffic all right guys do subscribe my channel I'll be creating more videos on next gs14 thank you so much for watching guys like this video and comment below if you have any question if you have learned something new if you have suggestions for me to create more videos for you guys thank you so much for watching see you in the next video

Channel: Programming with Umair

Views: 13,412

Keywords: pwa, progressive web apps, progressive web app, next.js pwa, convert next.js 14 into pwa, what is pwa, benefits of pwa, pwa performance in next.js, how to test pwa next.js app, pros and cons of pwa, next.js app directory into pwa, next.js 14 tutorial, learn next.js 14

Id: ixvaNz_XVkg

Length: 22min 45sec (1365 seconds)

Published: Mon Nov 27 2023