Updates and Notifications with the Angular Service Worker

hi my name is Steven fluid and this is demos of angular today we're going to take a look at a very simple and your application an angular application is scaffold it out with the CLI command ng new - service worker what this does is it takes a basic application and adds in service worker capabilities we'll take a look at the different caching options how we register the service worker only in production mode and then we'll take a look at some of the additional capabilities provided by the angular service worker the your service worker is really nice in the way that it gives you access to update events that are coming from the service worker so you can understand and respond to changes in the service of her life cycle as well as looking at how we can do push notifications using our service worker under the hood let's get started alright to get started what we're gonna do is we're gonna jump into the terminal here and I'm going to create a brand new angular application using the angular CLI and I'm going to use a special flag called - - service - worker and so this will create a normal and your application just like we'd expect so we'll be able to wait for that in the background here and then what's trying to open up vs code alongside it so if we take a look at the project structure that the seal is scaffolded out we're gonna see a normal files that we'd expect source folder app folder and then there's give me two things I want to point out we've got an NG SW config file here where we have all of these service worker config and then if we jump into the app folder we will also see our app module has this nice Service Worker module already imported for us so the service worker configuration is where we're going to set all of the config how do we want to cache our files and our app module is where we're actually going to be enabling the service worker but only for production mode that's actually very important because it breaks developer experience as we'll see in a couple minutes the service worker can fake has kind of two parts it's got asset groups and it's got data groups asset groups are for managing how you handle all the files in your application and data groups are free how you handle remote data so let's go ahead and energy serve this and make sure that this application is working out of the box and it is so we here have a standard annular seal application but because it was built with service worker in that service worker flag as soon as we do a - - prod build we'll end up seeing the service worker if you're looking for more information with the specific configuration and you'll Rio has a really great guide that breaks down all the options you can do so you look at the asset groups and whether you want to be prefetching it as part of the install or lazily when it's required it's definitely capable of that and then the data groups you can actually do a much higher degree of control over what your caching when your caching do you want to be networked first and be as fresh as possible or you want to be performance first and be as performant as possible so all those things end up in your NGS w config dot JSON file so now to interact with our service worker we're going to use a constructor here and we're gonna use the dependency injection system to get access to SW update which is the status of the update process from source worker and we're going to use SW push both from the angular service worker package as to be pushes what gives us access to push notifications so if I look at the update I've got a couple options here for the one we care about is available and I'm going to subscribe to that and then we'll be taking whatever update it's given to us this is only going to be emitted once there's an update available to our service worker so after it's been detected installed by the browser and then available to our application to apply so normally a user would have to unload the service worker and then reload their application to see it but we want to give the user the option to kind of trigger this automatically and so I want to give these things in a nice way beyond just what's available in console that long so I'm going to install angular material and the cdk so we can have a nice snack bar to present all this to the user all right while the ECL is installing that in the background I'm going to go ahead and start adding in our imports so there's two things we're going to need we're gonna need to import the snackbar module from the at angular slash material package so it's matte snackbar module with a capital S and a capital B so don't make the same mistake I'm making right now so stack capital s capital B and even if it's if it's installed this will work and then we're going to go ahead and add that so now I need to install the Stiles into my application so I'll just add that to the Stiles that CSS ID was copied and pasted this out of the getting started guide now I'll inject the snack bar service by into our constructor and that will give me the option to call things like snack bar dot open which is the main command we'll just test this with a simple hello world so as soon as our application opens we should see a snack bar but if you don't add one of the dependencies of the angular material project is that you need to install animations and so let me show you what happens when you try this without animations you'll get is a runtime error that says hey you need to import either the no off animations module or actually supply in the browser animations module so if we take a look at the console once this loads here we're gonna get a blank page and when we pop open the dev tools and take a look at the console we get this nice helpful error that says please include browser animations module so we're gonna go back up and we're going to add that to our imports list and then I'm going to import that from platform browser slash animations and once we have that rng serve should kick in here the application should recompile and we should see a nice snack bar pop up there we have it at the bottom hello world from a snack bar so just that single old snack bar that open command has done this for us so let's go ahead and move this up into our update available command and we'll update the message to say something a little bit better and then we're also going to give it a second parameter so by default it's kind of a one-way information delivery mechanism but one of things that we can do is we can allow the user to refresh from the snack bar so we'll tell them that an update is available and we'll give them the option to hit the refresh button directly on our snack bar here so we'll give them a reload option and then we're gonna save out the snack bar that we're opening and then we're gonna call the on action method to get an observable of actions that users taken on it and we will listen to that list and so when we call this will do window dot location a reload which should then apply our service worker updates so that the user can both see when a new update is available and then let the user act on that and make sure that they are seeing the freshest data that they want to be seeing the next thing we're doing is we're going to be using that push service they SW push service and we're gonna listen to the messages observable and we're gonna subscribe to that whenever a message comes in we're gonna console.log this and then because we already have the snack bar service we can do something nice like we will just call snack bar dot open and pass that same message out and in general these messages are going to take the form of Jason and so I'm going to Jason stringify this so that we have a message that we can read directly in the browser without having to worry about the kind of underlying data there and then the last piece that we need to do is to make push notifications work is we need to actually register for push and so again this is on the push or has to be pushed service we're going to call request subscription and that takes a options object with a server public key remember which takes a string so we'll just call that key for now and then we have to go get that key and then when we have a subscription successfully registered what we want to do is we want to get this out of the push subscription object that we're going to get back and then we I'm gonna dump that out to the console so normally you'd be propagating this back to your server because the keys that you're gonna get in the end point you're gonna get from the push notification registration is what the server needs to send you push notifications but I'll just be manually copying and pasting this from my client application into a tool we're going to use I found it very very tough to figure out how to figure out these keys at first but fortunately today I'm going to be telling you one way to generate these keys successfully there's a really nice github repository called web push libs this is when I highly recommend if you're getting started with this and there's a CLI that we can use if you don't want to build out a full server right now so I'm gonna go ahead and use yarn to globally install the web push CLI and then from this there's two commands that we can run the first is to generate keys and the second is to send notifications so we're gonna copy that we're going to run this command that's going to generate both a public and a private key for us and this gives us our public key and our private key and I'm gonna need the public key right now because I'm gonna save that into the push registration and then we're gonna need both of those keys in a second and so one of the most complex parts about doing push notifications is that you actually need to run a relatively complex command if you want to be sending those push notifications and so the next thing about this library is that it has a big long command that you can send and so we're going to copy and paste that we're going to fill in each of the variables that we need we don't actually need that last one alright so let's copy this paste this into the terminal and let's start filling out the fields that we know so we know our private key so we'll just put that in quotes oops copy and paste the wrong thing let's try again probably the hardest part of this process is topping and pasting alright so we've got the private key now let's go ahead and replace the public key again just write from above and these keys are in what's called vapid format I won't get into vapid but it's basically the standard that push notifications are used across browsers vapid subject is the kind of context of our push notification so we're gonna put our localhost:8080 TL we can ignore it coding so we're gonna use the default one payload so you can send whatever you want but the angular serviceworker is expecting jason and so we'll just send a very simple JSON object here so we'll say test hello world make sure we finish the quote there and then for browser key and off I'll just blank these out for now but we're gonna need to get these from the browser these these end up coming back as part of the registration of our request so let's jump it on the browser our build should be done now so we'll serve that up with Python again again any server will work use whatever you prefer we'll hit refresh it's not gonna work because it's still using the old serviceworker so well you can go to the application we can unregister this and we'll just get the latest version that is now registering correctly and so because we emptied our dumped out all this data as is jason and we can just copy and paste it so into our little command here we've got the endpoint and it's all properly quoted already by chrome and then we're gonna copy this P 2 5 6 D H that's the key that we're gonna be using and then finally we will copy the auth section into the auth part of our command and if we hit enter this should send our push notification via the cloud to our web application and if we look at the console and our snack bar at the bottom R Jason came in perfectly so that observable emitted a new value the pushed out messages observable and we got that out in a way that we can act on it but there's another half of push notifications which is what if we want to show a notification to the user and so we support the full notification API and it's going to depend entirely on whatever you want to send to the browser and so what we'll do is we'll just create a very very simple push notification that's gonna pop up on the user's system and so there's just a couple of fields that we'll need to do this successfully and so I'll open up this push notification will modify the payload we'll add a notification key to it and then I'm gonna paste in title this is a test body and then just body and so these are two parameters that are standard as part of the push notification API and you're not actually gonna see them in our application because I have two monitors and my push notifications are happening on the other monitor so I apologize about that but at this point we've now successfully sent a push notification so we have this kind of server interaction with our web application you can send as many of those as you want you can automate this either buying via the web push libs or any sort of command line you want you can send rich notifications and you can make sure that the user is always up to date with the latest version of your application via the serviceworker so these are some of the most powerful API is that exists is part of building pwace and as part of adding service workers to your annular application and the angular service worker is doing a lot of the heavy lifting for you in terms of figuring out what the subscription should look like figuring out how to manage and send communications from the client to the server or from the client to the service worker and back and so now you are pretty much an expert in doing service workers with angular I hope you enjoyed this video see you again in the next one

Channel: Digital Fluency

Views: 29,364

Keywords: how to, demo, angular, web development, service worker, pwa, javascript, push notifications, notifications, updates, tutorial, advanced, software engineering, live coding, learn to code

Id: eoaE0M_DRFI

Length: 14min 45sec (885 seconds)

Published: Wed Apr 11 2018