Hey everyone, today we are talking about progressive web apps or PWAs. PWAs are new way of building web applications that offer a native app-like user experience. They are fast, reliable and can be used offline just like a traditional app. PWAs have become increasingly popular in recent years and for good reasons.
With PWAs, you no longer have to worry about slow loading and poor connectivity and you can tap into the device API and you can use a lot of things like push notifications. Even if your app is offline, you can use the push notifications. you can use the bluetooth connectivity you can use a whole lot of other things as well like device sensor gps all that that you can do in browser as well but pws gives you a whole lot of new opportunities one of the most important benefit of pwa is that they can be installed directly from the web that's right no app store required this makes it easier for you your app to discover and acquire new customer overall progressive web apps offer truly a innovative way of building your application that user that deliver a seamless user experience across all the devices so there you have it progressive web apps the future of web application so today in this video we are going to see how we can leverage the power of pws and how we can do it inside nuxt so without wasting time let's get into the video so let's start coding guys so first of all i will open my terminal and then I'll go to my project directory so inside my project directory I would create a new project to create a new project in next you just need to run npx maxi in it then I'm going to name my project next three PWA so i'll press enter and it will initialize the project so as you can see the project has been initialized and it is using the version 3 of the template so i will cd into my project directory and open it in my code editor so i'll just push it here and i'll get rid of this terminal because i'm going to use the integrated terminal so yeah let me just close it quickly so there you have it we have our code editor Let me just arrange it a little bit so that you can see it properly. Then I will also pull up my browser window.
So let me just get the browser window here on the right side so that we can see what we are. building okay so yeah so now i'm going to open the terminal integrated terminal for that you can use if you are using mac then you have to use control and then uh this sign the keys uh beside one so other thing you can do you can just click on terminal and then you can click on this new terminal to open a terminal okay so integrated terminal is now open now what we have to do we have to uh we have to install the dependency for that i'm going to use the command yarn if you are using npm in that case you can use npm npm i or if you're using pnpm then pnpm i since i'm using yarn so i'll be just writing yarn and it will start installing my dependencies once that is is done we will run the application okay so as you can see our dependency has been installed now what we can do we can run the project to run a next project for all you have to do is run yarn dev or in case of npm it is npm run dev our application is running now let's open it up and see localhost 3000 and yeah this is our welcome nux application so we are not going to be changing whatever we have inside this application that's totally up to you you if you are following my channel from the beginning then we have built a lot of nux project so just take one of the next project and i will also be giving a github link to the description so that you can um just always for the reference you can have it okay so this would be our next application this is the demo app and then we are going to be uh adding the pwa module and we are going to make this installable pwa so for that uh i'll just open the panel and then i will go to application then if you go if you see here inside the application of your dev tools you can see if i just open it correctly you can see no manifest detected so to make an application as a pwa you have to do thing you have to register a service worker and you have to have a manifest a manifest file basically tells about your describe about your application what I can introduce what should be the short name what should be the name of the application when user install it what should be the theme color all the information will be stored in this manifest file and also you need a service worker which will prefetch your content uh in and cache it in the browser so we have manifest and we have service worker that we have to do once we create it as a pwa you can see the manifest will be here so uh to just demonstrate how it will look let me just open the default next documentation so that I can show you because they are also a PWA I guess let me just open it up quickly and let's see if it is there okay so they are not PWA's apparently so we will go to white white documentation oh it is not PWA better to give a good example so I will just give my example of my website okay as you can see my website is a PWA and it is breaking because I haven't make it responsive yet okay so as you can see we have the manifest and then you can see these are the icons that the browser and that the device will use to install my app layer to install this PWA and then you can see there is a whole bunch of information about the application like the name of the application the short name the description then we have like theme colors background colors orientation start url then we have the icons we have all these things right so these this is our this is an example of a manifest file so if you are having a pwa then it will have all these informations so if i now take you to the service workers then you can see there is one service worker right so so as of now the service worker just do nothing it just a normal empty service worker what i wanted to do i wanted to just because this is a static website so i i didn't have any features to like a work on offline so what i did i just created a empty service worker which will be uh which will have these cycles so and that is it guys this is how a service worker will look and that's what we have to do built so my website was built on NUX 2.6 so NUX 2.6 has an official library for adding PWA functionality so since NUX 3.1 they didn't update the library yet so we have to find some other way to do it so let's close this one and now let's focus on building the PWA inside our NUX so I found I found a GitHub repository of white PWA. So those of you who don't know about white, white is created, white is actually a build pack tool which is created by even you, the same creator who have created the Vue.js.
So it is of same ecosystem and Nuxt is also behind the scene using a white as a build pack by default. But if you are using webpack, then you can also use the webpack. But the thing is, if you are using using webpack then this plugin is not gonna work with webpack.
So just heads up before starting to code. So this will only work with the white. If you are not configuring webpack then it's okay you don't have to worry about extra configuration.
You just install the app and then we will see how we can add it. So let's go let's see the installation process. So as you can see it's working.
usual i'm going to copy it from here and then in my terminal i will get out of the build and then i will install it plugin is now installed now we have to register it inside nuxt config.ts so once again i'm going to run the application yarn dev and i'm going to minimize it a little bit and i'm going to zoom the code as well so that you can see it properly okay so there you have it Now we have to To add the modules, inside the modules we have to give the white PWA. So it is white-pwa-slash-next. So, this will auto import the modules and all the options for that module. We have added the modules now inside the config file we have to configure our PWA. plugin this particular plugin will give us a new property called pwa inside our define next config so now this will give us the property called pwa inside that we have to create our manifest we have to give our icon paths and all so let's quickly see the documentation and what is there inside this documentation so i'll just quickly open the documentation and let's see what we have what are the properties we have so as you can see there They are saying this will register plugin exposing PWA stuff to your Nuxtree application.
And on top of that, you will get a global property call at $PWA, which you can always tap into. And then you can access the plugin specific options. So that is good. Before doing that, let's do one thing. Let's first initialize our PWA.
And let's see. it in action so what we will do we will write the manifest so we'll have the manifest so in manifest you have to give the name of the application so in this case i'm just going to give like nuts3 Nux3PWA then your app has a short name as well so if your app has a big name then you can just give a short name as well and for the description as well you can just give testing Nux3 PWM something like that okay now if I save it and if I refresh my page you'll see there is nothing in the manifest why is that we have to add a component given by this plugin uh to our app.view all right so the component is white pwa manifest so you have to add this component so this component will hold all the information about the pwa and that will inject to your header so now i'll just save and i will refresh my page again as you can see we have nothing why is that because we have to make it uh because it's the application is in offline mode and in offline mode uh this plugin doesn't uh do that in the offline mode so what we have to do we have to tell this plugin explicitly that it should turn on the debug mode on the offline mode so we'll do just that but But before that, before turning on the dev options, I think it's better to give the workbox or the service or path. So every PWA has a workbox and we have to give a navigation fallback as well.
So we'll give the fallback as the homepage, okay? And then we'll turn on the dev option. So I'll give the dev options and I will enable it. I'll make it true and I'll give the type as module just like that I'll save then I will rerun my application again I am going to refresh my page and you can see we have our PWA configuration app.manifest we have our service worker that is also running so there is the thing guys now the thing is you can say why the installed button is not appearing here because see this manifest and the plug-in that whatever we are doing that needs to be that's need to be compatible with a certain rules that should follow certain rules so what we have to do since we are already getting error the page loaded in incognito window so that's why you will not get will not get the install button okay another thing is you know we did not supply any icons in any format so that is a no-no situation for the browser and the browser will not show the install option until or unless we fulfill all their requirements so we'll do that okay i'll show you how we can add the icons as well so let's open a new browser in the normal browser tab and let's see how it is working i have a normal browser window let's undo that and you can see we are not getting the install button but if you on the contrary if you go to my website jahid.dev right you will get a install button see install app so once you are fulfilling all the requirements of a PWA application you will get this Install window install pop-up if you are in the phone then the phone should also show a pop-up from the bottom That this application work offline Would you like to install it?
The options you will get on the phone as well so Now that is done That is cleared not done actually now. Let's see how we can add those icons as well So what are you? will do I'll again minimize it I will minimize my coding window as well so that I have a little bit space and I can see the dev panel and I'll open the dev window push it right here because we don't need to see what is in the UI it's just a starting page so now let's do the icons as well so for the icons PWA icons we have to have a few version of it so we have to give 144 version we have to give a 192 pixel version we have to give 512 pixel version but all that is not required only the required one is 144 so let's create a icon just for the sake of this video you can you will always will have your own icons obviously you will have the logo so in my case what I'll do I will export the icons from my website because I don't want to create it again okay so you will have your icon right so I'm not worrying about that so let's inspect and let's try to extract those icons so this one this will all be inside the manifest dot Jason so I'll just open it up and I will install one by one so this would be the icon 44 by 44 so I'm going to save it save the image inside my projects folder inside NUX3 PWA and I'll create a icons directory so it would be named as icons inside the icons I'll save it as icon slash 44 by 44 dot PNG and I'll save it then I need the icon of 144 by 144 that is the minimum requirements you have to give this icon so let's download that as well let's save it and i'm going to remove this identifier now let's download the 92 version so i'll just save it quickly then we will have our 512 pixel icon copy let's see here so all our icons are now added to our project now let's see how we can give the icons to the pwa options so just like we have the walkbox manifest so side manifest we have to go inside the manifest and then it will expect array of icons so we'll give it and then inside that we have to give a source okay so should be the icon source and then we have to mention the sizes as well sizes would be 64 x 64 and then we will have that type of the icon as well so inside my public I have icons and the icon sizes so what I will do I will just write the path icons icon dash 64 by 64 PNG just like that I will just copy it and I will paste it multiple time so for this one it would be 144 for this one it would be 192 for this one it would be 512 so let's save it and let's refresh the page and let's refresh the page and you can see we have the icons and just look closely we have the install button as well so guys that is how you can uh make your next website a pwa and your website will be installable so this is just a peak of the iceberg with the help of pwa you can do a lot of thing this video is to just to get you introduced to that technology. If you want to dig deeper, if you want to know more about PWA, how you can use PWA on your leverage, then let me know in the comment. So let's summarize a little bit what we have done in this video.
video so we had a nuxt application and our goal was to create it make it a pwa as in progressive web app so what we did in this video we have installed a package named white pwa slash nuxt so this is the package i'll leave a link in the description i'll also upload this github repository as well so check the description if you are having any problem you know, accessing these, you can message me on Discord. So then what we did, we registered it inside the Nuxt config, so inside Nuxt config, now you will get a option called PWA. Inside the PWA, we have registered our manifest, and I have already explained what is manifest, what is the service worker, how to enable it in dev options, and then we have also added a few icons that would be be shown when you install the app one thing that is missing is the theme color i want you to add the theme color and the background color and play with it and let me know in the comment and the discord as well now the moment of truth can we install this application pwa that we have just made can we install it in our mac system so let's try to click on this install button and then let's click on install and you can see we have our application see it just like your normal application you will have the files you will have all your options and you can find it inside Chrome apps just like you have the task board so task board is a application provided by Google where I manage my tasks just like that you can also create your PWA application in using the max tree so if you are having any question then don't don't hesitate to comment it on in the comment section.
If you want to know more about this PWA, then also you let me know in the comment and you can join the discord in Know The Drill. Like the video, subscribe the channel, and I will meet you in the next video. Till then, keep coding, keep rocking.
Bye bye.