Angular Service Worker | Progressive Web Apps Development

hi today we will see how gonna create a progressive web app that is PWA using angular so let's jump into the video hi everyone this is super-earth and you are watching for now heuristic so on this channel you will get to know about the programming languages the framework and all about the algorithm so please consider subscribing and hit the bell icon if you haven't yet I do know in the previous video we have discussed about Service Worker what its lifecycle how to register a service worker how to install it how to activate it how to reach like register your caste how to update your caste in the face so I have discussed all about that but if you haven't watched that video I will suggest please go to that video I will link it there was that because you will be clear all the process of a service worker if you remember I told you that in angular creating a progressive web app that is PW a is pretty easy it's just a line command so I have created a folder that is angular PD Beulah in that will create a project at the ingénue again I will give that as a angular PW a so I'll just start the server like in this serve as you can see it's got completed so we will go to the browser and we'll just hit localhost 4200 and here you can see we got the application and if you remember in the prompt in the previous video I have I have so new like how to do a offline mode for the serviceworker and here it will be remain same so I will hit the offline here and we'll just do that reference and you can see we got no internet access now we'll do the magic magic means just a line so now we'll add our pwk ssin to our angular app and as I told you is just a command so it just will add ng ad at angular /pwa and what it will do is it will add pw for you it will register pw for you my sorry the service worker for you and we'll see what is happening and all if you see here it has created this many files which is all our images like I will show you why it this is for and it has updated our angular JSON I have it our package or take Jason which has updated our module TS and it has updated our index.html before checking those files what is got created what he's got updated what I want to show you is I want to run the application and you will see what all is there if you remember in the previous video we have gone throwing various tape first registered then we install and we activate the Refresh after the fetch we got our data back means I got the data from the cast in the offline mode so for that one thing we have to do here it will just build the application and I will let you know why I just want to show you how is a tease we have created the build and inside this we have our app called angular pwe and if you remember in the last video also we have used HTTP server to host the file because it needs to be hosted from the build and I will let you know why so we'll just to go ahead and write HTTP server and the food will be 8080 and we'll see that okay this is running now we'll go to the application and we run the locality now I will open the file and here you can see with a just a single command and a build our application is activated and running so and you you can see the file lot of things are there but I will show you here not I have not go through all the things but yeah this is optimized and lot of things is happening here so we'll just go to the application to show you ok I have just hit offline now you can see you've got the application back means it means that it's working on the offline mode and if you see here on the right hand side we are getting a icon to open actually I already installed the app with the port 8080 that's why it's not asking me to install it it is asking me to open that app so if I click here then it will say ok Service Worker is the app name because I have created an app with the name Service Worker as a port 8080 so what I will do just to show you I just go ahead and kill the application and I will start the application in port 8000 and we'll go to the browser again we'll just close the tab and I will open the application in the 8000 port now I will see again here if it's coming or not so here now you can see we got a plus icon if you if you just click on that you can see install app that is what called PW a and if I install that app it will install the app and it will open the half here so it's on my second screen I will just bring it to the first green ok so now the app is got installed now it seems like it's a Mac app and you can do lot of things here you can it will work as it is like as a native app as I okay so I just click there so as I as I told you that here you can send notification and you can do the background sync lot of things you can do here and we will see all that in this video series and one more benefit here is suppose you have created your application as pwn and when the user will hit the URL they will get a link to open the app from the from the browser like they can create at click and just they can open the app and one more and the best thing is it will be added to your app screen so I will just try to show you here so I will just drive angular then you can see we caught our angular PW a user don't have to go to the browser and type your URL they that directly get the application on their app screen and for the mobile it will go to the home screen or where the all half its present now we will see what all file has been changed by the installing or adding the angular PWD to our project so first we'll go to the our index.html so what it has done here we have added a no script here means if you jur has disabled the javascript in the browser then this will this will be Papa but it's very rare and we have added our manifest if we go to the manifest here you can see you have had a lot of your icons that icons is this one so if I just go and search so here what you are seeing the icon so that icon will be is the manifest dot one if you go to the asset so here as its referring to the asset so if I go to the asset icon you can see the different size of icon are there for different kind of devices different kind of screens so here you can create your own icon like if you have your logo you can cater own icon and you can put it here so that it will be and if you are saying in the name then change it here as well so that it will be a referee in in the user device will go to the app model so in the app model if you remember we have registered our service worker like I think the service worker door chess that we have registered through from the navigator for which call navigator dot service worker dot register so what you are doing here is the same so it's we are doing the service worker dot register and it's JavaScript file and we are saying it's only for the production end moment why it's products in a moment if you remember that for the security region and it's only supported through HTTPS so it's better to go with the products in a moment and if you if you see here if you check we are not seeing this file anywhere in our project so as the region I have built the project then I demonstrate you about the PWA and the serviceworker and if you build this file will be get created under dist and our application name and this is the file and the serviceworker and lots of things are there what we have did in the previous video is not also a tip of the iceberg is just a casting and some giving the file for alpha line mode but here everything is optimized in a gist what I'm saying is it's it is making with the things pretty accessing creating the file creating your PW file installing and giving an option to the browser to install that to your device this all happening through this file so here as you are register now our application register and I told that the installation the fed's everything is handled inside this I will go to the package Jason so here you can see we have added our service worker so and the service worker dot config data NZ has doubled our config so it's a new file so what it's saying is we have a schema then the index means as you know that angular is a single page application so after the build you have only one HTML file now in the beginning we have a asset group in that asset group you just need to give the name so you have to install mode so install mode is prefetch and if you can see here and down you have a install mode as a legend so install mode prefetch means wash it will fetch to the serviceworker then it will give it to the up browser or to the render UI the Lazy means once the browser requester wants your main threat request then it will download and it will give the benefit of Leiji is it will be faster like if you have a lot of files and some like all may not need to be loaded till it not requested then it's good but the when but the team side of that is suppose before coming to the before fetching all the details if the internet disconnection happened or internet is pretty slow then it may not get the result on the next time if you go with the prefetch then they will download everything to the cast and in that and when you come back again now they can navigate with all the pages and they will have all the assets mainly for these things like as anger I also created mainly for the icons in text or HTML those things on the CSS and the JavaScript file those thing you need to cast because those things are required on the load itself ok so that's why they give going with the prefetch and here if you are using some static files or static URL that you can also give this is for the assets folder like if you can see here and here they have made it as a lazy because as I told you in the asset you are not going to fit you are not going to request all the things on the starting you can go for a periodic way to face the details and in the update mode also like how it will going to update you have both the condition like lazy and prefetch so in the same lazy means it lazy loaded and you know what's lazy loading each and here you are giving the resources a file like which all file need to be added inside it's saying all the files from the asset and all the images and all so we saw how by adding angular PW angular is handling the offline version or by using the serviceworker angle had handling for all the HTML files all the static files that all we are giving it here but think like you are calling a rest call and you want those rest call because they are not changing that much so you aren't those rest call need to be cast ok so what I did here is on the start of the app component or tears I am calling a dummy server so it will just return as a dummy data of some employee and all and on the response I am setting those data to our API data and in the HTML I'm iterating through it and now we'll go to the browser and just go for localhost 8080 net connection so what we'll do we here is understand off my Wi-Fi so that it will not be called to the server so the get calls would not be happen if i refresh you see o'ciock still getting a data we are getting the data here because the browser itself cast the get calls okay so what we'll do is I will hit a hard reload if you just try to refresh it multiple time or if you cough I'll copy and paste it and another page and you will see we are not getting the data anymore because it has not been cast and if I go to the console and you will get that get to a timeout error because we don't that I didn't had the internet connection now I will just switch switch it back on and when I will hit refresh we'll get our data back so now we will see how we're gonna achieve that by guessing the API calls we have so here again you will go to the our config file like that is ng serviceworker config file at the NGS W country file and if you see here we have a set group which each to store the assets like the index dot HTML the icons we have and the manifest file the CSS now we have now we will create a data group data group is to like I told you that fetching the data or like how many I want and how to call me mainly the external service calls so that will just call as a data group and from here you from the video to your code also you from the intelligence you also can get the data and it will be same as ever it will be an array of object so again here we have a name and the name will give as a API call the URL now again a URL it's a URL of string means a list of string array of string so what we'll do here is we'll go to the applications up component or TS and just copy this URL and come back here and I will paste the URL here here you can put multiple URL or as well like your number two here number three or you can put like dot star also so here that means whatever come after v1 that the thing will be cast so I will go with the single URL for for our case okay so again after that and we have a cast on fake-ass config is to configure these or cast as a if you remember in the previous video I told you that we are going to come maintain when I went to access the service worker or went to access the API calls this is the contest config so here you you can configure like when do like wait for 10 second if I am not getting the data then get it from the service worker so that what going to implement here so we can give a max size or max size or max age I will go with the max age so max age is the maximum age of the cast so here you can give as a one day two day one hour two hours am second okay so I'll go to an hour then you can put any value like from a day also so if you need twelve day then just convert it to D or if you need six hours s convert to six hour minute to M so like I will go with the twelve hour after that we have a max size and the Mac side is how many URLs means how many requests you want to cast like suppose we have here only one request suppose I give ten requests okay and if you give like this so it will gas that till ten requests not the ten results means suppose in a suppose from employee employees you are getting at 28 employees kind of it will store those 28 employees but what I am trying to say it's the size here is a number of URL you are calling not the number of results so after that if you just hover here we you get a strategy and a timeout so if I will go for the strategy strategy is two times its one is freshness and performance okay and from the name of a performance you can guess it's a performance oriented so where if the performance is good that means it is going to fetch from the gas okay so to explain I just add the timeout as well give as a ten-second okay so if you give the strategy as a performance then you can ask me about how it will decide that always get from the cast so it wasn't going to never going to get from the server yeah it will but what how it will decide is it will check the cache max-age if the max-age is ever to allow our in our case that will fetch from the server but till that point it will fetch from the cache because you have told this worker so we look at that I need the performance so fetching from the cache each more efficient than fetching from the tower but if you go for the for the freshness what freshness will do is freshness this check the time out you have means first here in this time out suppose you are given a 10 second or will go for the 5 second so suppose you are saying that suppose you are calling this method ok calling this API call it will wait for 5 second if we are not getting a response from the server then it will go ahead and hit gasps and get the data so I will try to repeat it again so what the serviceworker will do is it will heat the server if the server is not able to get the response so suppose we are not able to get the response from the server within this timeout second then it will go to the cache and felt the result so whatever weather will be there so this is what your cast configures and how you're gonna call now we will see the result what it affecting our data and its build and have started the server also now we'll go to the browser and just try to refresh for multiple time to make sure the serviceworker it's affected some time it's not loading in the same tab we just try to reload it again and you can ask me okay so but this user is not going to do if you are if you will update something and that we will going to see in the next video of how to handle the update scenario for a for live user that is a package called SW update in angular that we are going to use in the next video so please subscribe and hit the bell icon for that now we'll go to the I'll open the console we'll go to the application and here I will as previous I will just turn off the Wi-Fi and I'll just try to heart reload here now see we got lost the data okay now if you replace it back again you will get the data from the cache but if you check in the previous scenario if I have where we haven't cast the API call and when I deleted when I switch off the Wi-Fi and I had reload it haven't load anything now what I will do it oh so you will just copy it I will just closed the bra disturb and I'll just you open it again now you can see you are getting all the data and it is cast now you can ask me okay so but you have given a 5 second timeout here that means the call should wait 5 seconds then it should get a response that I will show you here right now each it is not waiting to the call because it is getting you like the internet connection like the timeout error from the server before I will go to the network tab and if i refresh it again you will see that we are calling the employee for to the network and that's fail and we are also calling this is coming from the service worker and if you go to the our work at RJ's if I go to the response and here you can see we are getting all the data for what we have configured them and in the real scenario that means when you have the internet connection then this call is going to happen but it will fetch the data from the server into the opt-in service worker and one more thing I want to show you with that where we can see this icon like a setting or a flower kind of icon that eats from the service worker so what I will do is I will just turn on the Wi-Fi now then what we'll do we'll just refresh the server now here you can see that we got the response and this response is came to the service worker so that it will update for the tasks for the next time when we when you will get the data to the client or to the when the service our concentrator to the rendering thread okay so this is what we are getting to the service worker and this is what is already present in our data suppose you will get some new data here then whenever you press it again you will get the updated data here agile so that's it for today guys today we saw how you can use the back is angular PWA to and we can act it to our existing project and it will solve our or it will do our 80 to 90 percent job storing the HTML files showing the JavaScript files tolling showing or our component all our services and we don't need to configure anything about that except from if you are if you want to store some API calls or if you want to save some static files then also you can give the static files here also like the URLs and you can provide the like the fonts we need not to be chained like the Google font and in the next video we're going to see the SW update n which is used for for example suppose this employee tab suppose in the first call like in the previous call you've got 30 employee now in the next call you've got 80 employee and that will be get stored in the service worker in this case it will not be visible here till you do a reference again because as I told you fast it will come to the service worker like this flower icon here then in the next call it will this employee call it's from the from the service worker soft so the previous quality of the service worker and in the next call it will get from the service worker but how the user will know that they have to depress it again or how you will know that you need to refresh the user session again so that whitter will get the updated data that is we'll going to say in the next video hit the like button if you like in the video till now and if you're liking my work and you want to support me you can support me on the patreon I'll keep the link in the description below and don't forget to subscribe to the channel and hit the bell I can so that you will not not miss the SW update video and please share this video my friends family colleague and please give some fellow will come out in the comment section below we're going to meet in the next video or til that they have paper bye

Channel: Fun Of Heuristic

Views: 12,682

Keywords: Angular, programming, offline browser, offline page, run application in offline mode, push notifications, service worker lifecycle, service worker explained, register a service worker, pwa, progressive web apps, background sync service worker, service worker chrome, service worker offline page, web development, service workers, web apps, progressive web app, mobile web, angular service worker, service worker in angular, angular pwa, pwa mobile app, service worker

Id: oQCJFIeGA6w

Length: 25min 46sec (1546 seconds)

Published: Sun Apr 26 2020