Build your First Angular PWA from Scratch (Angular 6 PWA Tutorial)

hey everyone Gary Simon of course at Rossa today we're gonna need to cover the topic of PWA s and angular so a PWA stands for a progressive web app and allows you to do a bunch of great things and it basically it's an extra layer that you add on top of your existing apps it's not a new way to build apps but it just enhances them and so it makes them work in offline mode you can also cache responses from api's and that way when a user does go offline it will still have something to show them I'm gonna show you exactly how to do that and also it can be installed as an app on a user's home screen on their their phone whether it be an iOS or Android without having them have to download it or install it manually through an app store alright so this is the very ugly it's a dupit example I'm going to show you this is all coming from a public API that returns really stupid Chuck Norris jokes I got sick of using in a typical public API but we can see here in the application tab I'm here in the dev console if I choose to take the browser offline and then refresh we'll see that the site doesn't break normally we'd have this this gray 404 page of some sort or your browsers offline or there's no interconnect connection with that little here in chrome it has that little game you could play with the dinosaur but this is actually working and by the way you can access the same PWA from Chuck PWA corsetry comm and by the way they need to be on an SSL in order for them to work these PWA s and it's also very helpful and make your life a lot easier if it's on either a subdomain or domain itself all right so we can see again I can refresh this it's still going to take the last cache result and then if I turn it back on line it's going to resume returning I'm public API is here all right so I we could also see in the manifest section that we have other stuff that's associated with the PWA like a theme color background color and also icons that would be used as the actual app icons and I'll show you all about that stuff I'm talking a little bit too much but for today's question have you or are you planning on building a PWA maybe watch the video first and then answer in the comment section and I'll provide you with my own thoughts about the topic as well make sure you subscribe and let's get started alright so as always make sure that you have the angular command line interface installed just type in ng - V and that would give you this output up right here and you can see I'm used to 6.0 0.8 and what we'll do is use it to create a new project so ng will say new I'll call this jokes and I if you're creating a brand new angular project here with the CLI with the intention that for sure it's going to be a PA double PWA then you can add the service service service server Service Worker sorry I just woke up flag to the end of it and it will automatically add the PWA functionality we're not going to do that though because I just wanted to make a quick demonstration we'll add it after with the ng add command alright so just gonna hit enter there and let that run through all right and then we're going to CD into that folder and I just because I know I'm going to be working with an API endpoint I'm going to create a service file real quick so we're gonna ng g4 generate s for a service and then we're just going to call it data of course this isn't specific at all to the PWA stuff so now let's go ahead and we'll open up our our code editor so for me this is Visual Studio code I'll upgrade later and I here we go so right now this does not have PWA functionality so what that means is is if I go back here and I'm not gonna make any changes use this it's gonna be the default angular template that's the CLI generates if I if I run ng build for production I I'm gonna let this run through real quick alright and we'll see that after that command I if we hop back into our code editor we have our distribution folder with our jokes file right here jokes folder right here alright so if we then hop into our chokes folder and we run HTTP server and this is an NPM package they can allow you to really quickly create a server - oh we'll just open this up things are caching right now we'll see that if I hit ctrl shift I and we go to our application tab up here if you don't see it just there's a little pull down menu I let me just show you real quickly right here just make sure you go to application and you'll see it there I will see there's no Service Worker means this is not a PWA if we simulate offline usage and refresh we'll see there is no internet connection and you can start playing that fun little game anyhow I so let's go ahead and add the PWA functionality to this so we'll do this with the command here let me go back I will do this with ng add an angular /pwa and notice it's I created all these different files right here it also updated several different files and I'm not going to go over exactly what's happening there but if we go back here to our our code editor we'll see that I we have just a couple files like our manifest a JSON file when it comes to PW A's this is where you're going to control the name that will show up on a user's smartphone if they add it to the home screen the also the theme color which will change a bar that goes across the top for for the the actual app we have a background color as well we also have our icons right here so I'm not going to you know adjust these icons at all but you can see it starts at 512 by 512 and there are generators out there I'm not sure what the name is offhand but there's several of them that if you just provide a single in there web-based if you provide a single icon that's based on 512 by 512 it'll spit out other sizes for you so you don't have to sit there you know recreating these by hand yourself and of course these are all stored in the ass folder icons and there you go that's how you customize your icons of your PWA also we also we have our ng SW config JSON file this is really in my opinion the heart of what the PWA is and this is where you're able to control a variety of different things associated with your PWA but most importantly we're going to be using this to a cache our API endpoints but out of the box just after adding the ng add command I will see how it will change our behavior so if I go back to our code editor we go to our we rerun the ng build oh yeah there we go for production command alright and I CD into our dist jokes folder and run HTTP server and we'll open it alright we will now see if we go to control shift I and our application I'm gonna make sure we refresh this and we'll now see we have this NGS W worker JS file and this is a service worker here we are now a PW a so now if I choose offline and refresh it's still going to work it's not going to give us that error page so first and foremost without making any adjustments then we could see a potential use case for this with a static website it's going to load I pretty much anything that's static that's a part of your your angular app now if you I tried to introduce an API then you have to take additional steps in order for that to work now I will say this one thing that is a massive pain or was a massive pain for me when I first started experimenting with angular in pwace and pwace in general it doesn't matter if it's angular or not it's the fact that these service workers are cached and it makes development really difficult and tricky if you're trying to make updates alright so there's something that we're going to use and we're gonna integrate it I'm that what's going to make our life a lot easier and less confusing when you're dealing with these updates when you have an app that you're updating that is a PWA alright so for let me just demonstrate real quickly welcome to app let's just make a real quick change here so I'm gonna go back here and we're going to run we're gonna hop into our app component HTML I'm just gonna change to do a comma welcome alright that way we know we made an update of some sort so we'll go back here and we'll rerun our ng build prod and LCD into our distant jokes folder there and then HTTP server oh now we should see you would expect the comma here but we don't see the updated version of the app even though we rebuild it and we're sitting here hitting refresh so one of the things that we can do to help remedy this issue is we can use SW update as it's called and SW update is something that's provided from the angular service or Service Worker library and it'll allow us to determine if there's an update that needs to be pushed for the service worker in the app itself I've so I'll show you how to do that real quickly so we're gonna hop into our app component here let me make things a little bit larger control + control + alright I say control B to give it that sidebar so we're going to import I SW update just like that oops it's technically SW update camelcase from the angular Service Worker library alright and then inside of here I will go ahead and we're going to pass in a constructor if I could spell and then we're gonna put updates as SW updates create an instance of it alright and then I iced up you update rather sorry and then inside of there will say updates dot available so if nothing is available we're gonna subscribe an event and well I real quickly will create a property up here a boolean so we'll say update boolean equals false so by default we're gonna make it false and then if there is an update will say this to update equals true and then in our app component HTML will say we'll just put a span and we'll say ng if it's only going to show if it update is true there is an update for your app or service or whatever so we'll save that I make sure this is saved and then you know the drill I'm gonna close out of here and then we will do the same rebuild process here so all right ng build prod whereas my HTTP server o command Jesus there we go all right so as we could see it actually did update this already so we're not going to see a that little message show up all right so what we can do are actually maybe we yeah so what we could do is I'm gonna go and make one final update here to this and I'm gonna change this to an exclamation point cause I really want to demonstrate this point as much as I possibly can I so sorry this is a little bit redundant okay so now we know I we're working with a version that should have the up we just saw it I refreshed and it went away really quickly but it that message showed up and then I refreshed right after it and we got the new app right here I wish I would not have done that because that was really quick but that message did show up for a split second and what's also something you could also do and this comes from the official angular documentation is you can also automatically refresh or reload the browser if there is an update so for instance what we can do is we can go back here and our app component and we could just comment this out and we could say updates dot activate upon alright then we're going to duck document location reload just simple JavaScript for reloading the browser and um this way if there is an update it's just going to refresh and that will grab the new serviceworker and the instance of the app alright so now what we're gonna do is demonstrate you know how would you catch an API call so first let's create a service file oh wait we already did that go back here we have our data service ts file so we're just going to grab real quickly a public API endpoint and this will allow us to return a joke from some stupid Chuck Norris jokes API I'm so sick of using the standard typical ones like type type I codes I they're public API I just wanted to do something different so we're gonna use the HTTP client here from angular common HTTP alright and then we're gonna create an instance of it alright and then we're gonna create a method here give me jokes and then we're going to return this Thai HTTP GET and then I'm going to paste in this public API endpoint HTTP s API Chuck Norris IO jokes and random okay that'll just return one one one one object essentially with a really stupid joke alright so we'll save this we'll go to our app module file and we have to update that real quickly to include both the HTTP client module in our data service that we created so I'm just gonna both those here all right and so I our HTTP client module goes here in the imports array and our data service goes here I'm gonna copy this right here so we're going to go back to our app component and of course none of this is specific to PWA stuff this is just fetching you know results from an API whether that be your own API and your own server or a public API like this one and then I will also real quickly create an instance of our data service so private data data service all right and then on ng on an it and that's when the app loads we'll just call this data dot give me jokes and we'll subscribe the result too and we'll say this dot joke equals the result so up here we'll say I the joke is any so we'll save we'll go back to our HTML we'll get rid of this stuff and I'm just gonna put in h1 just for now that says jokes and then I'm gonna get rid of everything else and then I'm in our app component HTML we'll say we'll put it in a paragraph element and it will only show it if the joke property exists or received it from the API and then joke dot value values one of the properties that's returned within the object and that's that contains the actual joke value all right so if we save this yeah I think everything should be working that's about pretty much all the code that we're gonna do for this part so let's go ahead and we'll go back here let me make sure I close this Alvin running errors into errors I want to have it open alright so obviously by default we can now see that we don't have yeah this is still the old version of the app where it says there's an update for your app if i refresh it there we go we have our jokes and we have a really stupid Chuck Norris joke and so here's the thing though even though we're at a PWA and we we simulate going offline and going offline just by checking off this check box isn't enough because you can see if we refresh sometimes it will actually return the API still and if that's one of the cases with you then you actually have to go if you're on Windows for instance you have to turn off the network adapter to really shut off the the the Internet and in that what's strange is when I was preparing this that's what I had to do I when I was going before this but if a refresh we can see it's not working so how do we get that working well we have to have pop into our ng SW file right down here that we we checked out ng SW config file and we have to do a couple things so first before I get to how we cache the API endpoint I wanted to show real quickly let's say for instance I wanted to use my favorite font the montserrat font or whatever so we can go into our index.html all right and then we'll import that font I'm going to copy it off the side of my screen here alright and this is the location it's just it's just coming from this address right here and it's a font called Montserrat and then control be real quickly I let me just create a real quick rule set for this stuff we're gonna just hop into styles.css and I'm just going to have to roll sets I'm gonna set the height at 100% minus the 40 M patting them adding to the top and bottom as well as left and right and then just real simple stuff right here nothing nothing to get hung up on here real quickly let me hop into our eye let's see our CSS file make sure yeah and our app file let's go to our CSS yeah nothing there okay good now we'll go back to our ng SW config file and so one of the things that you have to add manually if you want to store fonts for offline use we have to add an entry for that and we add that entry under resources the object and after the files we're going to put in our own that says URLs plural and it's an array that accepts different i urls here based on resources that you want to be cached and so this here is what we would use to make sure that any fonts that we've included in the app will be cached by the serviceworker and will work if there's a the app is offline so we'll save that but we're not done yet we also have to come out here at the same level of where index in asset groups is at in the object so we'll put a comma and we're going to put in data groups this is where your API endpoints will be stored for caching all right so it accepts an array of objects so we're just gonna have one endpoint that's one object here and our first name our first property is name alright so we can give just any type of relevant name based on the IP API that we want to say so I'm gonna name this jokes API next will be URL so this is a an array that accepts different URL endpoints that you want for us we just have that single one that's defined in our data service file and we're gonna put it right there and then it has options in the form of what's called cache config and this is an object that accepts a property of strategy right and we're gonna make freshness so I with some strategy that's a caching strategy freshness we'll check this at the API endpoints first or the network first and then it will fall back to the serviceworker cache or you can also choose what is the other value offhand I want to make sure I get this right the other vent out okay its first performance you could you make this performance as well and that will work in the opposite direction where it's checking of cache first and then falling back to the network freshness is pretty much what you will want to use most of the time and then we're gonna have a max size all right max size here and I will demonstrate these momentarily or provide an explanation and then timeout all right all right so what's happening here essentially with these values is I for Mac size this is the number of responses that are going to be cached that you're telling the serviceworker to cache and this isn't really not this isn't necessarily the number of individual responses that are returned from the endpoint timeout here at the bottom is this is using in conjunction with the strategy freshness value up here all right and it's the same units as max age so these can be defined as I like for instance 15 minutes 1 hour 5 days etc we had ours set at 1 hour all right and then max age of course here is how long the cached response is valid all right so we'll save this and now let's go back through the process of rebuilding and then launching our server again and that was my bad because I have an HR it should have just been 1h sorry about that all right okay so if I could sure lift I here we can see we're currently on line so if we refresh this it's going to return a stupid joke every time so now if we go back and we turn off line and we refresh this I believe what we're we're working on currently is the old version of the the API so one second here there we go took a little bit time for it to update and refresh to get the new result here so now if we go back to offline we'll see it's still going to work and this time when we refresh it it's going to show the last cached result and of course if your API returns you know an array of objects it would it would have all of those as well so in this case simply because this API endpoint returns one object that's all it's going to to take is that the very last one so then we when we take I we turn things back on online it's going to I start resuming I getting all these stupid jokes here so again we refresh this is the last cat last cached result and that is the one that will always show up now all right so hopefully you found that useful and helpful and make sure to answer today's question now that you know a bit about pwace and how awesome they are are you or have you already built a PWA alright let me know comments and I'll see you [Music] [Music]

Channel: DesignCourse

Views: 129,503

Rating: 4.9059248 out of 5

Keywords: angular pwa, angular pwa tutorial, angular 6 pwa, angular 6 pwa tutorial, pwa, progressive web apps, progressive web app, angular pwa example, angular 6 tutorial, angular 6, progressive web app tutorial, pwa tutorial, swupdate, angular swupdate, angular pwa course, angular pwa cache, web app manifest, angular pwa manifest, pwa manifest, ngsw, service worker, service worker tutorial, angular service worker

Id: othhfZ0mGjU

Length: 26min 21sec (1581 seconds)

Published: Tue Jul 24 2018

Reddit Comments

[u/thebrightmonkey]

Super cool tutorial, worth a watch :-)