Firebase Messaging -- Polycasts #59

Key Takeaways

[Applause] hey everybody what's up it's Rob Dodson welcome back to the show So today we're going to be continuing our series on polymer and Firebase by using the Firebase messaging element so that allows us to add push notifications to our polymer plus Firebase app so to get started with Firebase messaging follow me over here to my laptop and I've gone to beta. web components. org this is our amazing new web components Catal log and I just went ahead and looked for Firebase messaging that'll take me to the polymer fire repo and once you're here you want to make sure to go over to the sidebar here where it list all the elements that fall under polymer fire and click on Firebase messaging now we can see the doc specific to this element so there's a few things that we need to do to get up and running with Firebase messaging and I often forget these steps so I'm going to try and do them first so I don't forget this time the first one we want to do is go down here to where it says that we need a a web app manifest and we need this GCM sender ID so there is a specific number that it has listed here you know like one3 95 whatever whatever whatever we have to use that exact number in our web app manifest because that is the sender ID for I think Google Cloud messaging service or whatever which is what we have to use to to send push notifications using Firebase so I'm going to go over to visual studio code I've got this project that I've already started I'm going to create a new file called manifest.json and inside of here I'm going to paste just that that one key you might already have a manifest Json for your project you might already have a few other things inside of there that's cool just make sure that you include this one key somewhere in your manifest and then over in my index file I'm just going to write a link tag and the real is going to be manifest and the HF is going to be uh manifest. Json okay just like that the next thing we need to do is we need to get some magical keys from our Firebase project I'm going to go over to my fire Bas console this is my project that I've already set up and I can click on this little gear here go to my project settings and there's a tab right here for Cloud messaging so I'll bump that up a little bit it's a little easier to see okay so there's a couple keys on this page I'm going to just go ahead and take this server key and copy that to my clipboard because I'm going to need that later and I also need this sender ID so this is my Firebase specific sender ID this one is specific to my project so it's it's different from that GCM sender ID that we were just working with so I'm going to copy this one go back to my project and I'm going to find my Firebase app element which is somewhere in here here we go and I believe we need to make sure to add to this one messaging sender D ID and set it to that Firebase specific key that we just copied out of there okay we've got that part set up now we're ready to actually start adding Firebase messaging to our project we're going to get back to the server key a little bit later but now we're actually ready to start dropping some these elements in so I go back to the docs for polymer fire and what's really nice is the sample code here is pretty good so we can just sort of follow it directly so I want to grab this Firebase messaging element right here just copy that code and what I'm going to build is basically like a little toggle switch so can hit the toggle switch It'll ask them for permission to send them notifications they'll say yes it'll take that token that's generated by that permission Grant it'll save that to Firebase and it'll also kind of give us an indicator that we can then go ahead and send them a notific and then we're going to do that using some curl magic to create that element I'm going to in my public directory just make a new file called my- subscription. HTML and I'm going to just start off by importing a few Firebase elements that we need we know that we're going to need so we'll do this from polymer fire we're going to need Firebase off we're going to need Firebase document I need Firebase messaging messaging and one more element that we're going to need is a paper toggle button so I haven't installed that yet but I will in just a second so paper toggle button right switch over to the terminal so we'll do Bow install save polymer elements SLP paper toggle button so I'll go out and fetch it I've already got it installed in my project so should be good to go switching back over to the subscription element that we were writing just going to use a little code snippet here to stub things out so I'll say my subscription cool so in our template we can now just start kind of like copy and pasting some of the code that we saw in the Firebase messaging docs so I'll just drop in the uh Firebase messaging element right here then we go all right so what this is going to do is it's going to create an element that has an ID of messaging we'll we'll use that later to access it in JavaScript it's going to have a token attribute which is just going to expose to the rest of sort of the the elements inside of this that we're building and then when it receives a message it's going to try and call this handle message method which we'll Implement a little bit later the other thing we need to do is just verify that we have a user so I'm going to just drop in a Firebase off element paste this puppy in there cool cool all right so we used this in the past two episodes um we're kind of treating Firebase o almost like a model representing the state of the user and in this case uh we just want to get that user value out of Firebase off so once the user is signed in we can use that value to then write to specific parts of that user's database in this case we're going to use it to save the token that Firebase messaging generates when the user grants it permission so to do that we will drop in a Firebase document paste this puppy in here all right so what we're going to do with this document is Firebase document works very similar to Firebase query which I think we used in the last episode Firebase query you use to write to the Firebase database when you're working with array like data so you know a big collection of things like the to-dos and our to-do list list Firebase document is useful when you want to write to like a very specific object so so we're not pushing you know a bunch of array like data we're just writing like a specific value to some field so in this case we're going to say we want to write to SL users SL user uid so this will be specific to the user that's signed in and we're going to give them this sort of token subproperty we're going to write to that field the data that will fulfill that value is going to come from this uh one-way token binding which will be generated by Firebase message so basically what we're doing is we're saying when the user grants Firebase messaging permission it's going to generate a token and we're going to save that to the database and that's really useful because in the future when you want to send somebody a notification you know you're going to check to see okay is this user um you know have they approved uh you know the permission to send notifications uh yes or no do we have a token if so let's use that to then send them that notification all right I want to set up a little bit of code to actually you know ask the user for permission here and this is where we're going to use that paper toggle button so I just got a little bit that I will paste in here all right so we got a paper toggle button with an ID of subscribe and whenever the user Taps it we're going to call this toggle subscription method and then we're going to figure out sort of you know whether this thing should be checked or not checked based on if the user has already generated a token this is like kind of a quick and dirty way to do things I would actually probably recommend if you're building like a more of a production app you sort of have a a separate property where you're keeping track of whether or not the user is subscribed um but in this case Cas you know since we just want to get something up and running we can use this approach and then underneath where the paper toggle button ask the user to subscribe actually just going to create a couple paragraph tags to log the value of the token and we're going to need that later on when we use Curl to actually send a notification but normally you would just store this in your database and you would work with it server side but in our case we're going to use it so we can we can curl against it okay so I need to implement this toggle subscription method so that the user can do the whole permission off Grant thing so if we go over and we look at the documentation for polymer fire they've actually given us basically all the code that we're going to need to stub out there we're just going to copy this chunk right here and I'll walk you through what's happening after we implement it so we'll say toggle subscription is function and we'll paste that in all right so what is happening here so we're saying all right find this do dollar sign. messaging so again that's polymer's way of referring to an element by its ID so this is referring to our Firebase messaging element right here so we're saying take that element call its request permission method that's going to then ask the user hey is it cool to send you notifications and it's going to return a promise and you know if that promise fulfills then we know that permission was granted if that promise fails for whatever reason then we know that permission was denied this is also a good place for instance if you wanted to you could like differentiate you know the user is subscribed or not subscribed and store sort of a separate value in your database just you know sort of like a flag is subscribed or not you could do that inside of these handlers but in our case we're just going to prompt the user and once they say yes then our Firebase messaging element it will get a token just sort of magically uh that's how its internals work that will fulfill to this Firebase document element so it'll write it to our database and we'll actually be able to go check the database to verify that everything is working as expected the last thing that I want to do here is implement this handle message method so this is going to run whenever we receive a notification from the server so in our case because we're working kind of quick and dirty I'm actually not going to do very much with this what you could normally do is you know display like a toast or some sort of notification like in the desktop site to the user but I'm just going to console log uh that a message was received and we will just log out the uh the arguments which should give us like the sort of like like a data object showing us the content of that notification the cool thing though is if you were on a mobile device like mobile Chrome um this would actually notification as it came in would just show up in the user's system tray automatically you don't even really need to do any code to to make that happen which is pretty awesome the last thing actually that we need to do is we need to create a service worker that can work with Firebase messaging and sort of receive those push notifications even if the user is not currently looking at this application as their active tab so if we go and we look at our documentation it tells us that we should have a Firebase messaging swjs file so we'll create that new file and the contents of that file are linked to from these fcm documentations here we go I've copied this code from earlier but basically what we're doing is we're importing the Firebase app Javascript file we're importing Firebase messaging JavaScript we need both of these little libraries so that our service worker can properly work with Firebase services and then we just call this one method initialize app we give it our message sender ID which if you remember we copied out of our our project console earlier and then we just have this uh messaging property where we're just saying Firebase do messaging that just kind of like kick things off and gets things running I think at this point we might be good to go and and actually ready to test this thing fingers crossed that this works on the first try so I'm going to run Firebase serve and that'll start up a little local project so we'll go over to our project here all right refresh the page cool um let's see I think we're missing something here oh it is helpful if we include the subscription element in the rest of our project so go back to my app make sure that we have imported my subscription my subscription man I'm totally I know I'm not spilling this thing right somewhere but I'm going to I'm going to power on see what see what happens so drop in my subscription element right okay refresh the page yes okay we have a paper toggle button here so the user clicks the check box it asks them hey can I get your permission we say Y and now it's going to give us this uh big elaborate token remember if we go back and we look at the my subscription element when the user receives their token I'm just sort of like writing it to the page so we can use it to curl so I'm going to copy all this text here kind of runs off to the side there so grab all of that there we go get all of that and uh let's see if we look at our Firebase console we can actually see in the database that our user has been established they have a token that has been written to the database for them which is kind of nice and so the last thing I'm going to do is I'm just going to use Curl to simulate sending this user a message now normally um you would probably do this work on your server side uh based on like some user action you know uh but we're just going to do it here from our console just to test that everything works and I've saved already this notification file because there's a fair bit of code that we have to write to make this work and um I'm going to post all this code on GitHub afterwards so you don't have to try and like memorize all this or copy it down by hand um we're going to use Curl and we're going to here I'll close the sideb bar to make this a little bit easier okay so we're going to use Curl we're going to pass a header with our authorization key so remember earlier I grabbed kind of like two keys out of my Firebase console I'll go back and so you can see here so let's see we go to our project settings go to Cloud messaging so there's two keys here there's this really long server key and there was our sender ID so I need this really long server key and I'm going to pass that as my authorization key in this sort of curl header so that is this first part here it's super long super long goes on forever there we go so we need that we have another header for the content type we're just going to say it's application Json and pass it the uh the D flag to tell it we're going to pass it some data and the data that we're sending sorry that this is like a little hard to read but the data that we're sending is an object with a two value and the two value is going to be our user's token so that really really long string here so that helps identify their device if I recall correctly so we got to make sure that we're sending it to the right device so go all the way to the end paste in that token right yep double check that's right yep and then we send them a notification object so this can have a a title field it can you know we'll just say hello world and a body object we'll just say this is a notification and the last piece that we pass is this sort of like address to fcm so we're going to grab all of this we're going to go to our console have a new tab here paste that in run it so we should get something that looks like this where it says you know success one so far so good go back to our project we can see here in our terminal now I will here I'll boost this up so it's really clear that we've got a message received so remember we were console logging our message message has been received and go look at the object look at the message the notification and we can see there is the content for our notification so yeah if you want to tell your user like hey you won some amazing contest you won thousand free inflatable Ducks you can do that uh using that object so that is the basics of setting up notifications using uh polymer fire uh again it's it's it's a fair number of steps but honestly uh compared to doing all this yourself in JavaScript this is a much much much easier approach so I highly recommend everyone try it out if you have any questions about what we did today as always you can leave them for me down in the comments or you can hit me up on a social network of your choosing at # ASP Palmer as always thank you so much for watching and I'll see you next time hey folks what's up it is Rob thank you so much for watching this episode if you'd like to see some more we got some over there in the playlist and as always you can click the little subscribe button to keep getting content every time we push it up to the channel uh again thank you so much for watching