Introduction to PWA | Replacement of React Native/Flutter? | Beginners Guide to PWA

progressive web apps or pwa is a term that you may or may not be familiar with but in this video i am going to provide you with some details about it and a quick tutorial to get started with it so if you are interested in these kinds of video then hit the like button subscribe to my channel and don't forget to hit the notification bell icon so that you get notified whenever i post a new video on this channel so without wasting any more time let's get started you are planning to create a new app for your next idea but not sure why should you launch it first on the web or mobile web applications can reach anyone anywhere on any device with a single code base people can discover your app on the web pretty easily and can start using it right away on the other hand for mobile apps you need to decide whether you want to go for android or ios for native development or flutter or react native then you need to market the app on their respective app store to get discovered by your potential users also there are limitations on how many apps can be installed on a mobile device as the sizes of the apps are increasing every passing day and normally an average person has 50-70 apps installed on their mobile and uses about 5-10 on daily basis but mobile apps gives users a better user experience and can access all your offerings with just a tap and these apps take advantage of the hardware such as camera local storage bluetooth etc even can work without internet to some extent so here comes progressive web apps which can provide best of both worlds pwas are web apps which has the easier discoverability of the web through a web browser and fits every device it can be installed as a standalone app on any mobile device irrespective of its os and also can be installed as a desktop app on any computer as well with pwa you can get features like push notifications and will never see no connection to the internet error message as you can see while visiting a website through a browser and you can install it on your device so it seems like an installable website which is true but it's even more and there are two fundamental components of it first one is the manifest.json file which contains all the visual information of the app such as app name icon and theme color etc the second one is the service worker which is a javascript file that works with your browser to create a layer between the app and the network this allows things like notification fast loading caching and many more now let's talk about some of the advantages of pwa they are not dependent on any app store you can ship your app without relying on any app store so it removes the time taken for the approval of your app on these marketplaces and along with it you get the benefit of keeping all the amount to yourself as you don't need to pay any commission to this app store on each cell these are lightweight and easier to install pwas are much more lightweight than platform specific apps and they can be installed from websites quickly without worrying about the available space users don't need to go to any app store to install it pwas are built with web technologies you can use any web technology stack to create pwa or simply use html css and javascript because of this pwas are cheaper to build and you have only one code base to maintain and as websites are responsive so the pwa app can work with many different screen sizes pwas are fast and work offline unlike your regular website as i mentioned earlier about the service worker which takes care of the cash and network requests of your pwa so these apps work offline also and they work as fast as traditional apps so they will always feel like an app not a website pws can access native features with browsers becoming more and more capable pwas are able to access most of the native features of the hardware twitter uber spotify are a few big examples of this pwa now let's see a quick tutorial of pwa and i am going to use next js here first create a new nexus app by providing this command in your terminal and give your project a name now after creating the project run it by providing npm run dev command so this is our app which we want to make a pwa app and i have mentioned earlier that we need two fundamental components to create a pwa one is manifest.json and another one is service worker first we are going to create manifest.json file and for it we will go to this online manifest generator tool and provide some basic information about the app name short name description and for display i will choose standalone and let's provide a theme color and background color along with an icon for the app and the resolution for the icon should be 512 by 512 pixels and these are the metadata about the app and browser readthemanifest.json file and get the information about the app now click on generate manifest button to generate the file in the zip file we have different sizes of the icon and the manifest file move these to public directory and change the extension of the manifest file to dot json now we need to let our app know about this file for that i will create a new file in the pages directory called underscore document.js and with this file we can change the overall structure of our app including the head section here in the head section i have added these three lines first i have mentioned the manifest file and then the icon for the apple devices and the theme color of the app now let's install this zero config pwa plugin for next chess by copying the command to our terminal and then go to config file of nexus and remove whatever is present here and then we need the plugin which we have just installed and wrap this to our export this is a higher order component and add these values for the pwa and now build the project by using npm run build command and we can see that a file called sw.js has been created and this is the service worker file which will take care of the offline support and many other types of things about the app now if we run the app again then we will see that there is an extra icon in the address bar and by clicking on this we can install the app to our device as here i have installed this on my mac and we can see it now fails and works like a desktop app similarly if we visit the website from our mobile phones then we can see add to home screen button and by tapping on this we can add the app to our phone and use it as any other app and for the iphone add the app icon image to apple touch icon value so that is a quick guide to progressive web apps now the question is that can pwa replace react native or flatter and the simple answer is no it will never replace this and also pwas are never meant to replace these it's another option to reach your potential customers and based on your requirements you can choose to go for pwa or apps built with react native or flutter or both at the same time as pwa can provide a lighter version of your app and also if you are a startup and wants to test your product on a various platform with minimum effort then going for only pwa route will make sense so it will depend upon your requirement and the situation of the business whether to go with it or not so that's all for today's topic and if you want to know which one you should choose between react native or flutter then check out this video and if you like this discussion then like the video subscribe to my channel and let me know by commenting down below if you have any kind of suggestion for me then also let me know and don't forget to share this tutorial with your friends and colleagues and i will see you guys in my next video in the meantime have a great day good bye

Channel: Pradip Debnath

Views: 3,156

Keywords: introduction to pwa, pwa apps vs native apps, progressive web app tutorial, progressive web apps, progressive web application (pwa), progressive web apps tutorial for beginners, beginners guide to progressive web apps, beginners guide to pwa, pwa with next.js, pwa with react js, pwa with react, advantages of pwa, benefits of progressive web apps, benefits of pwa, progressive web apps intro, pwa vs react native, pwa vs flutter

Id: 5PqLJbqbg7s

Length: 8min 27sec (507 seconds)

Published: Thu Jun 16 2022