 Hey, buddy, 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.webcomponents.org. This is our amazing new web components catalog. And I just went ahead and looked for Firebase Messaging. I'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 I list all of the elements that fall under Polymer Fire, and click on Firebase Messaging. Now we can see the docs 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 web app manifest. And we need this GCM sender ID. So there is a specific number that it has listed here, like 10395, 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 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 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 rel is going to be manifest. And the href is going to be manifest.json. 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 Firebase 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. OK, so there's a couple keys on this page. I'm going to just go ahead and take the 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 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-id and set it to that Firebase specific key that we just copied out of there. OK, 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 of these elements in. So I'll go back to the docs for PolymerFire. 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 I'm going to 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 notification. 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 up by importing a few Firebase elements that we need. We know that we're going to need. So we'll do this from PolymerFire. We're going to need Firebase off. We're going to need Firebase document. I need Firebase 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. Switch over to the terminal. So we'll do bower install save Polymer elements slash 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 copying and pasting some of the code that we saw in the Firebase Messaging docs. So I'll just drop in the Firebase Messaging element right here. There 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 use that later to access it in JavaScript. It's going to have a token attribute, which it's just going to expose to the rest of the elements inside of this thing 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 Auth element. Paste this puppy in there. Cool, cool. All right. So we used this in the past two episodes. We're kind of treating Firebase Auth almost like a model representing the state of the user. And in this case, we just want to get that user value out of Firebase Auth. 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 the 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 a big collection of things, like the to-dos and our to-do list. Firebase document is useful when you want to write to a very specific object. So we're not pushing a bunch of array-like data. We're just writing a specific value to some field. So in this case, we're going to say, we want to write to slash users slash user UID. So this will be specific to the user that's signed in. And we're going to give them the sort of token sub-property. We're going to write to that field. The data that will fulfill that value is going to come from this one-way token binding, which will be generated by Firebase Messaging. 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're going to check to see, OK, is this user, have they approved the permission to send notifications? 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 ask the user for permission here. And this is where we're going to use that paper toggle button. So I've just got a little bit that will paste in here. All right. So we've 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 whether this thing should be checked or not checked based on if the user has already generated a token. This is kind of a quick and dirty way to do things. I would actually probably recommend if you're building more of a production app, you sort of have a separate property where you're keeping track of whether or not the user is subscribed. But in this case, since we just want to get something up and running, we can use this approach. And then underneath where the paper toggle button asks the user to subscribe, I'm actually just going to create a couple of 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 curl against it. OK, so I need to implement this toggle subscription method so that the user can do the whole permission auth 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 dot dollar sign dot 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 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 differentiate the user is subscribed or not subscribed and store a separate value in your database, just 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. 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 display a toast or some sort of notification in the desktop site to the user. But I'm just going to console log that a message was received. And we will just log out the arguments, which should give us 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, this would actually, this 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 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 receive those push notifications, even if the user is not currently looking at this application as their active tap. 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 project console earlier. And then we just have this Messaging property, where we're just saying Firebase dot 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 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. Let's see. I think we're missing something here. So 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 spelling this thing right somewhere, but I'm going to power on, see what happens. So we'll drop in my subscription element, right? OK, refresh the page. Yes. OK, 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, yah-ha. And that's going to give us this 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 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 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, you would probably do this work on your server side based on some user action, you know? 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 I'm going to post all this code on GitHub afterwards so you don't have to try and memorize all this or copy it down by hand. But we're going to use curl. And we're going to, here, I'll close this sidebar to make this a little bit easier. OK, 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, get a 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. I'm going to pass the D flag to tell it we're going to pass it some data. And the data that we're sending, sorry, this is a little hard to read, but the data that we're sending is an object with a to value. And the to value is going to be our user's token. So that's really, really long string here. So that helps identify their device, if I recall correctly. So we've 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 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. You 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 and 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 1,000 free inflatable ducks, you can do that using that object. So that is the basics of setting up notifications using Polymer Fire. Again, it's a fair number of steps, but honestly, 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 hashtag Ask Polymer. 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. Again, thank you so much for watching.