SwUpdate in Angular | Check for update in Angular PWA | Progressive Web Apps Development

hi this video is about the SW update from Service Worker model and the work of SW update each it will give option to the developer to you so that you can check if there is any update in the server so that you will update the service worker or you can notify a user and you can do according to the requirement and we're going to see that so let's jump into the video hi everyone this is super-earth and you are watching front of heuristics so on this channel you will get to know about the programming languages the framework and all about the algorithms so please consider subscribing and hit the bell icon if you haven't yet in the previous video we saw how you can use or how you can add the angular particular to our existing application and we saw a lot about the registration of the service worker and how all happens so and this video is the extension of that so here we'll use a service from service worker module that is HW update and if you don't know what a service worker each and how you can add that to our angular application so I will highly suggest you please go ahead and watch that video then come back to here so that it will make much sense so I will add that in the card so please what's that one so coming to the video so here what we are going to do is we're going to check as double update and by using some properties of HW update you can notify your user that there is some update in your app so please do that so we were going to see that now I will just remove the fun of heuristic exclamation mark so you can check here the issuance of marks are there and I will just save it so what we'll do is we need to kill the server and and if you haven't watched the previous video then or you don't know how it worked then you may ask okay why he's not running the and disturb so I suggest you please watch that video first so the Lord of things will be clear here the application is built now and I have started the server from the dist folder and now we'll go to the server and we'll check ok it haven't changed so you have to wait for certain amount of time and then you depressed then it the trigger will happen now you can see it just went away with some certain references and this will be clear by implementing the HW update as I told you as W update each from the serviceworker module so here I will create a method that will call from the character or the enjoyment it's it's fine wherever you call of the declined but before that we have to inject the SW update service to our component and if you see here it eats from serviceworker okay so I'm going to use this one so we'll go here and we'll check here that the update means the stable update is enabled or not that means your serviceworker is enabled or not if that is enabled or we can do like this also if this is not enabled then we'll just add a console log message here that not enabled and we'll return from here the SW update has three property that is is a novel which we have already used and one it is activated means activated and available okay available at the name safe means updates are available and activated means update were available and it's already activated and it's pushed in the serviceworker means the changes have been done so first I will use the available one and so we'll go to the disturb update and not available means it saying that whenever that update is available notify me and it's the return type is a observable if you hover over here it's observable of update available event so what we will do we will just subscribe that one and we'll catch we'll try to catch the event and we will log some value so to lock so what we are logging here is we are logging the current event and the available event so whatever even we have now and whatever event it's updated event present in the server and that will see now I am calling this method from the constructor so that it will be initialized all the observable will be active to listening to the server we will add this code to our server means to our serviceworker first so I will just kill the server here and we'll build the application again so that it will be registered here so meanwhile I I will try to explain you that this current event and available event will give it give us a understanding of how angular service update means service worker update at the HW operate is working or how how the service worker is detecting their each update and I will show you that when once the build is done I will go to the dist folder then I will start the server so here what we'll do is just to refresh the pace or that our service worker will be get registered and we'll get the value here now this code is get registered in our service worker to get any update is available we have to change some value so so far for here to did what I will do is I will write a comma and we'll save this file and again we need to start the server as the build is finished so we'll start the server now we'll go to the application and I will try to refresh the page just keep your eye on the console that some in some time we'll get a console log and that is about okay we got a console log here here you can see we are getting the this is a current has which is running on and this is the new house which is present okay so the service worker is checking this has us and it's determining okay there are some new files now I need to update now if you hit refresh you will get the data now we don't have to difference multiple times to get the data if you remember in the previous we have to a difference multiple time so because we are not knowing when the service worker is updating the result and I already told you we have three methods one it's available one is activate and another one each is enabled so we'll do the activity one and the activated event is also kind of work like saying that what it will just notify you is the what the hash value previously and what is the activator means the updated has value here it and how it will trigger is once the service operates updated and you will get once the thing is activated you will get this console log and SW update has two primary methods that is check for update and activate update so the check for update is to check in the update that and that will see little later here we'll use the activate update and we will call the activate update method inside the available because part we will check ok the updates are available and when we got the average are available then we'll call the activate update so what we are doing here is we are asking the user that there is update in the app please confirm for that and if you just say yes then we are calling the activate update and it will return a promise of type void so we are just reloading the page so here you can do lot of things you need to call a server or you need to reload the page or according to the requirement you can do it so most probably you have to reload the page because you got some static files to update so I will save this file here and we'll just go to the server again we have to build the application twice to make it affected because first this code need to be loaded to the serviceworker then we'll get the pop-up again so I'll just run it so I will load this code to the our browser then I will resume the video so that we can see the changes and the pop-up so I have reloaded the browser and the serviceworker is updated with the with our updated core so we go and change here the so what I will do I will just add some version here so we'll just go with a v2 and again we will do the same like Wicklow will kill the server then you have to build it again the application is built now I have started a server now we go to the our browser refresh and we're going to see a pop up sooner or later and we can update okay now you see and just keep an eye on the console here that we are getting we haven't got yet the activate what to say the activate activate log because it's not activated yet it's now it's paused here means the execution is stopped here once I will press ok it has changed and got refreshed to show you I will just log here some value so we'll change something here I will just saying this to v3 and we'll sleep the weather here and I have to build the application again to to to check the changes the application is built and we'll start the server now I will go to the browser and try to hit refresh and we'll see the log in a bit and now you can see that we are we got the message called activated and here we are getting this is for the available data and this is for the activated data and if you if you compare and if you will check here we are getting the same data same has in the both the logs so what I did wrong is in the previous I have written current here so what I meant to say it's our this current is the previous for the activator result and the available is the current for the activator result so that does the region both the hashes are same here I'll just hit the control chairs so that whenever there will be change we can activate our updates and we'll reload the screen so that it will be visible to the user or either can use the updated app so if you remember I told you that aw update has two method one we used it's activate update and one is check for update and the check for update is like checking for updates oh so you can call it in a certain interval so how did you do it we'll keep on calling to the service worker to the server okay that is any update and you don't need to call the SW update and if you don't have that many changes in application any out when about the user will open and the app or the browser so I have shown you by the browser and if I go to the app here you can see that we are getting the updated result and this will work same as it as it work in the browser here you will also going to get the pop up if the user is opening that means you don't need to call as double update if you don't have that many changes in a day I guess so if the user disclosing this app and opening it again that means it again will going to check for updates and it will it can activate the update by reloading the page and before using check for updates is something you need to keep in mind that not just start calling the check for update in the start of the application so what it will do is it will prevent your serviceworker to be registered in the browser so for safety reason serviceworker will register only if the if the if your application is stable and that you also can check through each stable method from the application reference I will just create another method that is check update as I told you you don't need this check for update that often but it's better to know so what we'll check here each again we need to inject the application reference here so we'll go ahead and do that so application reference and this application reference we'll use here so as I told you in the application reference we have a method or a property called each it's stable again it's an observable of boolean type so you will get either true or a false so what I will do and subscribe to that and we'll check here if it's stable so after we check that it's it is stable means that your application is stable then we'll do this I am giving here 20 seconds but it's better to give a 6000 means a 6 hour or eight hour time gap so that it is not that frequently called to the server in that interval we are calling check for update and it will check the update so what the check for update will do is when it got got result then it will activate the available update so it will notify the available that ok the updates are available and insert in our core we will go and activate update and we'll try to reload the page and that will see now so what I will do is I will just save the page and we need to register this code to our browser so what I will do I will just build the code and I will try to refresh the page or it will auto auto refresh the page by checking the available update then after that I will come back here and I will show you what to do but for that I will skip the video till that point I have refreshed the browser now you can see here that we are getting the interval calls from you that means this hour this block of code is already registered now we can check for any update so what I will do I will change some code here and you can see this is keep on every 20 seconds calling so what I will just go here and just make is a jv5 and will kill the kin the server and will build the application again and we will see that we previously protect we are refreshing the page but in this case will not do anything and for that sake what I will do which I will open the our angular PW app here so it will be pretty clear here that that it will work on the app as well we'll wait till the build is got finished now then I think it's about to finish so I will just start the server again so I will go to the file then we'll start the server now if you if you go to the browser here just check without anything in case it's not a browser it's our app which intends a browser we got a problem without addressing and it was open in background so when I will hit refresh then you will got your response as we find so and if you change something again and just rebuild you the user need not need to refresh the page or you don't need not need to close and open the browser to get the updated change and that's what the help of check for update and one more thing is the intervals should be like here I have given for eight hour so it will be called in eight hours so you can make it three you can make it six or make it nine according to you but don't hit on every 20 second that I just use to show you in this video because we can do it eight hour to record the video so that's it for today guys today we saw how you can use HW update to notify the user or to refresh the page by checking the availability of update by activating the update and inside that you can activate the object forcefully by reloading the page and also we saw that how I can check for update with certain intervals so that we don't user also don't need to reload the page or you don't know need to close the browser or reopen again or you don't need to close the app or you open again for the case of PWA and the next video will be about the push notification so that will be pretty exciting so please hit the like button if you like in the video till now and please subscribe to the channel and hit the bell icon so that you will not miss the push notification video and if you're lucky my work and want to support me you can support when the patreon I'll give the link in the description below and please give some valuable comment in the comment section below and producer this video my girlfriend's family colleagues so that everybody can use that wo brain or everybody can use the serviceworker and it's a very powerful API and we're going to meet in the next video till that stay happy bye bye

Channel: Fun Of Heuristic

Views: 8,062

Keywords: Angular, offline page, run application in offline mode, push notifications, service worker explained, pwa, background sync service worker, service worker chrome, web development, service workers, progressive web app, angular service worker, service worker in angular, angular pwa, pwa mobile app, update pwa app, Service worker communication, check for update in pwa, swupdate angular, swupdate tutorial, pwa application, pwa app tutorial, pwa app builder

Id: TI3s1--45h0

Length: 17min 47sec (1067 seconds)

Published: Sun May 03 2020