How to Force Update Ionic Apps

what's up simonides and welcome back to a new quick win today we're talking about an interesting topic that a lot of you asked about in the past and that is how to force update your ionic application when the user already has installed the application one thing upfront there's no 100 sure way to implement this because the user can basically download your application once with a connection then completely go into airplane for the rest of his or her life and you got no chance to update that application unless you implement some sort of self-destroying mechanism but today we will implement a cool feature that you can run whenever your application starts to check for a json file on a server and we will also implement different scenarios to completely lock your application in a maintenance mode or to display different messages based on the update if it's a major or minor version change if you want to follow along the code check out the link below for all ionic academy members and if you're not yet a member make sure to check it out ionicacademy.com my school to help you with everything ionic so without further ado let's dive into today's tutorial to get started with our quick win we just need to install a few packages we actually start with a blank application and we won't really i think we will never touch the html in this quick win but we need one additional service which you can easily reuse in your own application to check for updates then since we started a capacitor application which currently doesn't have the ionic native core package installed that totally makes sense we need to install ionic native core since we want to use cordova plugins within our capacitor application especially we want to use the cordova plug-in app version from which we can get the current version of the installed application and we will also install the ionic native package to access the package more easily on top of that we also install the cordova plug-in in-app browser simply because the capacitor plug-in which i will open in a new window for you didn't totally work for me so there's a native market plug-in for capacitor that should actually uh open either the play store or the ios app store um but for ios um it didn't really work for me um so we actually also need that one which makes it three plugins this one to get our app version to make a little comparison uh second one as a fallback for ios and this one uh the capacitor plug-in to open the native market which hopefully in the future is the only one so you don't need that one anyway once you've done all of this you can move to the app module in which we now need to inject a few things especially we need to inject the http client module so this one goes to the array of imports to make our http request to a file hosted hosted let me bring this to the site on digitalocean i just added two files here we will take a look at them in a second and then we got the app version in a browser plug-in which is usually go to the array of providers not with a dot okay three times that's the new record simon app version and in-app browser there we go now uh we got everything for the two cordova plugins but we also need to apply a slightly uh small change to our main activity and you can find this in android app source main your package name and then main activity to use the capacitor native market plugin with capacitor 3 uh hopefully this isn't necessary anymore perhaps when you go through this quick win you don't have to do this but for now uh you just need to add the import line and the add statement here in the init we can close this we can close the app up module and focus now on our update service so i added a few things let's take a look at them i added the two links to the json files i hosted i injected everything that we might need and we will go through the functions in detail of course i also generated this app update interface here based on our json files so i added two files they have kind of the same structure in general the most important part is is the app enabled true or false that is the first important criteria for example you run some sort of maintenance on your server in that case you don't want any user to use the application um this happens to all the time to games i play they have regular down times of like maybe half an hour or something like this and then you could have something like this enabled false and then a message why the application is not enabled uh we can see this here we got an enabled bool and a message optional property now in case your app is running just normally but you release the new version you can come up with a different json like this where you specify the current version of course you mainly need to update this json file when you release a new version enabled in this case is true the app is fine but you want to supply some messages for example if there's a different in major versions so if someone has version zero point whatever and your latest version is 1.5.0 then the major message should be displayed and there should only be a download button um then if the user has like version 1.2 and the latest is 1.5 you might want to hint your users that there is a new version with cool new things so in that case the miner message will be used uh there's a new update would you like to get it but users should have the ability to just close this since this is not a critical update in the above case with a major key you could really block the whole application and now we will build our logic around this so first of all within our service here uh we're gonna add our check for update function or implement the check for update function in which we will uh use the http client make a get request ah let's use let's use the maintenance example first and then we subscribe we get a result which is now of the type info and we can use our interface app update so this one's pretty easy if info dot enabled or actually if it's not enabled in that case uh we just want to show an alert so this dot present alert a header message is something from info message i don't know title and the message most likely info message dot message the button text also from info message dot button and allow close is set to false and that's also fine in this case since we don't want our users to close that um modal we don't need a return we just have an else block in here anyway and they won't have anything afterwards so we can just implement the present alert now inside the present alert um basically we just want to present an alert it's not that hard so const alert await this dot alert controller create but we need to make this a bit more dynamic so we got the header uh we got the message and for the buttons we might come up with something because they're different cases uh we need to use the button text we need to check if uh close is allowed or not uh which can be used for this case as well uh what's it called a low something like a low backdrop backdrop dismiss exactly backdrop dismiss is only allowed if you're allowed to close the model make sense because otherwise you just want to prevent your users in the maintenance case from using the app and tapping the background to close the modal the alert doesn't really make any sense then you call alert.present once you're done okay now we just need to create the buttons and we can check if the button text is unequal to an empty string it might happen that we don't have any specific button text so this will just be one additional button also we can check if close is allowed in that case we want to simply push the standard close button so buttons push text whatever you want you could also specify fallback text you could anyway make those jsons exactly to your needs just figure out what will happen when your application updates what you want to do in the application and this one have the role cancel so that will be a pretty easy button if uh close is the load uh we just have that close button in here and if we've specified a button text we also want to push a button with the text guess what button text but in that case we also want to have a special handle because button text will always be set so okay it will be actually set in here as well that could be a little problem so let's not pass the button in the case of the maintenance update and just use those two fields then button text will be empty so we don't have any kind of button for the maintenance case but in all the other cases we want to display the download button actually i could have removed that button right here well anyway um so the handler uh okay yeah i think i have to add any in here to make you happy okay so the handler in that case should open our native app store entry and therefore we're going to implement it just like we're used to in the ion alert handler was clicked and then we will call a function to open the app store entry okay look open me we're gonna do this later so for now we got everything in place i think we can actually check out our application let's maybe add a little lock here result from the api so we can lock out a bit more information and then hopefully do you want to reload am i actually running in reload oh we're not really calling check for update yet yeah um i think the app component is a great place this is the first component in your application um so right in here when the platform is ready we should wait for this because we're once again using cordova plugins so i just want to make sure that those plugins are initialized correctly so let's add the private update service in here update service and when the platform is ready we will just call update service check for update we could also only inject it inject it and then do everything from the constructor but i think having this line to really check for an update is a good idea okay we get a result for our maintenance and we see the alert app maintenance we're currently improving your app we don't have any buttons and the backdrop can't close this model so users can only close the application and come back at a later point and hope that the application then works now let's use our update example instead in that case um the application isn't uh immediately blocked here so the application is enabled which means we uh will also show an alert but we need to find out uh about the major or the minor differences so first of all we now need to get the version number of our application which we can do we should use a weight in here and if we use a weight we also need to add as in here for uh our subscribe block await the this dot app version uh i think get version number so get version number returns the word number who would have thought uh from our application which we can see for example in xcode or we could maybe do this from our editor it should be an app app oh i think inside the info p list is there something like a version somewhere uh my eyes i don't see anything product name bundle identifier actually maybe it's not in there it's in a different file but there's definitely a file on ios as well it's usually an app info p list but i don't see it perhaps you see it current project version might be something like this so perhaps because i control this from xcode it's not in there but usually this is the version not the build number but the version for android you can actually find it inside the build gradle file so here for example i specified the 1.2 for the word name so that means we get back a version number which is like 1.2.0 something like this and now we need to split that string so we can compare the different sections first of all we want to check if there's a difference inside the major version and then inside the minor version i don't think uh checking for the patch version and displaying an alert is really necessary in most cases so let's say const splitted version equals version number dot split and we want to split by the dot and then we also want to get uh the version from the server which is interesting because that's inside the json file hosted here so you can manually update this once your application is released and we will call this server version equals um this should now be in the result from our http call info dot current and we're gonna split that string as well and there we go now we have two um interesting parts let's just lock out one of them um let's say this is the splitted and this is the server version if we now check our application we will see exactly yeah that we don't have cordova um yeah so we can't get our word number great great but perhaps we can at least see the server version splitted so that is our splitter version now we just need to compare this one to the one from our app which on a device will of course work it just doesn't work inside the browser because it's a cordova plug-in so please don't try to do this all right that's actually a quite easy check so if server version at the position zero is greater than splitted version at the position zero it means um our server version the server major version right here is one and our application has zero so we're gonna display um the major alert in the other case else if server version one bigger than splitted version one we're gonna display another alert but this time it's just a hint since only the miner wasn't changed we can once again copy the present alert here we're going to use message what's it called major message.title and major message dot message and i think we will also use um major oh sorry uh info dot major message dot button that was the third parameter and allow close is by default false so we can keep it like that because in case of a major version change we completely want to lock the application and only allow download in this case we can replace everything in here with miner so miner message miner title miner button name and in that case we will also allow closing the application okay great um we got everything inside the app component um so now it's time to check this on the device you can run it um with the updated or maintenance example but we actually forgot one thing the most important part and that's guiding the user to the app store entry okay um as i said before the problem is that the capacitor plug-in isn't completely working so therefore we have the good old this platform is check in here so if the platform is android uh we can use the native market plug-in i added the import already at the top um this is also uh most likely different in capacitor three if you check this video out in like a few months from now um the native market plug-in won't be imported or destructed from the plugins object but should be imported from their own package just a quick hint here to make sure the lifetime of this video is longer than one week okay in that case uh for the native market why is there no code completion but from what i've seen of the plugin i think it is called open store listing right so open store listing and to the open store listing we just pass the app id great um i will use one app id from my applications which is com def tactic dot instagram companion it's actually one of the last applications i still have live and now for ios we need the different approach uh once again in the future you might just need this line to target both android and ios in that case we will use the in-app browser and create this one with a string that i will bring in so this one is um an app link to the app store and you just need to find out the id of your application if you reuse um what's it called by now ios connect apple connect itunes connect i think or something like this wherever you can find your id of your application you just need to exchange it in here and of course use the right bundle id for android as well uh as a second parameter i think we need to add blank in here perhaps it's not even necessary hundred percent but that's the way for ios which works super easy so now you can run ionic build capacitor platform add ios android whatever and sync and then let's see this on a device all right so i started the application and as you can see inside xcode i got the version 1.2 inside our json file we specified the current to be 1.5 which means there's a difference inside the minor version so we are allowed to close that dialog but we are also allowed to directly click download to open the app store with our application now let's try and change the version to something like 1.8 and run this on a device again in that case there's a difference with a major version which means we actually see the result in here now as well are not super interesting um but that means the application should be blocked right away in the beginning when opening since a major change indicates our current application where is my app that we want to only allow download we can't press the background so i'm really trying to we can only click download and we can't close this window now and once again with download i'm back inside the app store for android it's completely the same and we would be back now one catch is there as you can just see i went back from the app store to our application and the application is unlocked that of course shouldn't happen so what you could do on top of that mechanism to prevent any action like this is to implement a handler to the platform resume event and in there perform basically the same perhaps just called check for update in the app resume as well and then also if the user simply resumes the application uh the same procedure and dialogue stuff would be triggered all right and that's it for today i hope you enjoyed this quick win on how to guide your users to update the application to block the application um there's also a full package called men up ionic men up you can search it on github that implements kind of the same mechanism but i just wanted to keep it simple it can really work like this for most applications where you just make a call to a json file and compare the versions to your app version and then it's enough to implement a force update mechanism or to guide your users to an update in case of a minor version change or to block it in case of maintenance once again if you want to see the full code check out link below the video and if you're not yet a member make sure to check it out ionicacademy.com and also if you enjoyed the video make sure to hit the like and subscribe button to get notified about the upcoming videos and i will catch you next week like always so happy coding cyber [Music]

Channel: Simon Grimm

Views: 9,526

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial

Id: NJwBNWwNlTk

Length: 22min 32sec (1352 seconds)

Published: Tue Mar 16 2021