Michael Dowden 5:44
There we go. Very basic, very simple, I can upload a file, I am going to show you how to do the notifications with the PWA. And can even run a search. So if I type in my test email address, for example, it’s going to take a second and it is going to come back with a list of all the messages that I have sent. It does take just a second, because we’re dealing with a cold start situation on the server lists. Oops, nope, maybe we’re dealing with more than that.
The other thing we’re going to do for PWA, this isn’t mandatory to make it a PWA. It’s just a really nice thing to do, which is to prompt the user to install the application if it’s not already installed. So this is the event you’re going to subscribe to in order to do that. When you’re prompted for download, you can use for Angular use the Platform Module, there’s going to be different options and different frameworks, what we’re looking for, for Android or iOS, we have to do things just a little bit differently. So inside of Android, you have to prevent event bubbling. And then you’re going to open a prompt to allow them to click Add to Homescreen. In iOS, we have to check to make sure we’re not already a PWA. As a separate step, we have to do that ourselves on iOS, that’s super important. And when we open the prompts component, we do need to timeout for just a little bit in case we’re just first running the serviceWorker for the first time, because it can take a little bit of time to do that. Um, I’m going to actually just jump right in and show you this really quickly. And then we’ll move on to the last step, actually. Yeah, let’s go do that. So I am in the project, I’m going to go into the angular part of the project, actually. So I’ve got Angular, and then I’ve got my Firebase functions all inside of this Firebase project. I’m going to
I’m running an Angular 13 right now. So I’m going to go ahead and add that yes, I would like to proceed.
And I’m using the angular command line, because that does a lot of extra work for me, or just to add this package using something like NPM, it would add the package, but it wouldn’t do the additional configuration steps that I kind of needed to do. So now that that’s done, I have a few things. I have a web manifest, for example, that didn’t previously exist, I have this angular ServiceWorker config file that will give me some abilities to do some work. In order to test the PWA though, I cannot be running the angular build. I have to run the I’m going to do a build. And then I’m going to run it inside of the Firebase server, the local server because that is capable of supporting HTTPS, which is required to test a PWA. So wait just a second for that to build. And then we’ll actually demonstrate the PWA.
There we go. And so now we are right here inside of this chat room. I’m gonna reload this page. It’s not 4200 anymore. It’s 5000 Because I am that is the port for the virus server. So that looks Good, let’s go ahead and go to lighthouse. And with any luck, Lighthouse will give us some good feedback on what this looks like. Lighthouse is really useful to just kind of get a quick idea of where things are on your PWA is that sort of thing
does take a couple seconds sometimes to run on.
So again, if you do have questions, please don’t hesitate to post those in the chat. And we’ll get to those here in just a minute.
Feel like that’s taking a little longer than it should, but it did actually work. Okay, cool. So PWA, installable, 101, PWA PWA, optimized six of seven. So we’re doing it looking pretty good right there. So just that one thing, and PWA is mostly working. So the only issue we don’t have a valid Apple touch icon. So we’ll have to fix that. And then it will be in really good shape. So I’m happy with that. To add the apple touch icon is pretty straightforward. I literally have the icon already in the repo. So all I need to do is add this link. And so if I look at and here. These are the icons that Angular created for me. And Alright, so what I’m going to do is I’m going to delete this. And rename this. Make sure change that such as icons. And now all of these assets icons are going to go to the icons that I already created, which are my nice fire icons. So I’ve fixed that problem. At this point, I’m not going to bother rerunning it. But that’s how you do that. It is important to make sure in here we want to have a theme color set. I’m going to change that theme color just a bit to kind of make it match my situation. And then I can come out here and reload. Close the dev tools. And now if we go to the Chrome menu, you’ll see this installed fire side Angular shows up, which is cool. That allows me to I could literally install it on my Windows desktop, no problem on my Linux desktop. I can also go to Application secured application. And I can see that there’s a ServiceWorker running right now. That’s what it looks like on mobile. So that’s pretty good shape. We now have PWA running. So the last step, the last thing we want to do is add push notifications using Firebase Cloud Messaging. Again, feel free to scan the QR code, this is going to take you to information about Firebase Cloud Messaging. Even if you’re not using Firebase for anything else, a lot of projects will use Firebase Cloud Messaging in order to add push notifications to an application. This works within the web. You can also use Firebase Cloud Messaging from native applications, or even something like Ionic, four for hybrid applications. You can send information you can target messaging to single groups of devices. You want to subscribe device, this is probably the trickiest part. That’s the thing that has to happen on the device that wants the notifications, each device has to subscribe separately for push notifications. You want to generally show the notifications in app when the app is loaded. And so that’s what we’re going to do. You want to show the notifications on the device using the device notification system when the app is not loaded. And then anytime the appropriate data changes, you need to send notifications to everybody that has subscribed. So this can get pretty complex. For this chat application. We’ve kept it fairly simple, just to show the basics of how to do the work. So the first thing you have to do is add the AngularFire messaging module. This is if we’re doing this in Angular, you have to enable the messaging API in the Google Cloud Console. That is going to be super important. If you don’t have the API enabled, it won’t work. Then you have to choose the type of subscription or notify case you’re doing. We are doing topic notifications for this project, it’s the easiest thing to do, it won’t work for all use cases, you also need to store the device tokens for all registered devices. In our case, we have an array of device tokens inside of the user record in our FireStore database, that seems to work pretty well. You can come up with any scheme you want, but you do have to store those somewhere in a centralized location that you have access to, at the time you’re trying to send messages. Notifications can include an image, they can include a link, sometimes that’s really useful to be able to do that, it should definitely include the text message, the order of delivery of multiple messages not guaranteed. So you can’t send three messages and expect them to arrive on the user’s device and the order in which you send them that doesn’t work that way. And we, we are not currently showing how to remove stale tokens. In other words, after a period of time, you need to expire the user’s device registration, they need to re up that that registration. We’re not showing how to deal with that here. But it is an important thing to consider in a real implementation. And since the topic is really, really fantastic, but you do generally need to build in some sort of exception, because otherwise, if he if you’re broadcasting user centric events, the chat application is a perfect example of this, I don’t need to receive a notification for a message that I posted. Right, so we gotta watch that provide exceptions to that. So let’s jump right in to the last stage, which is adding this so the first thing I wanted to show you actually is to how to enable the API. I have that open here. So here is the Google Cloud Console. For this Firebase Cloud Messaging API. You’ll see right now it’s enabled. If it was not enabled, there would be a button here for you to enable this service, I can click Disable API right here, to turn it off. That’s, of course, not what I want to do. So let’s clear some of this out of the way. And
I believe package json already has. Messaging. Yep, there it is. Cool. So I’m going to turn this back on. Now it’s added.
I need to add a button to enable and disable notifications. I have a bunch of to do comments. To make this easier to find all places we need to do this. So one of the things we need to do is add this subscription. This is for in app notifications while the app is running. I’m using the Angular Fire messaging to subscribe to messages. And I’m using a snack bar to display the notification. Not much to it. But that is an important step. And I’m doing the subscription inside of the app. So this is running the whole time the app is running. Anytime a message shows up while the app is running, we’re gonna get this. I’ve already added the messaging module. I have not disabled these the Enable notification disabled notification buttons are there. It’s important to look at how those work. So the chat room. Component, yes. If user notification token, we want to get the token and subscribe. This is going to add a subscription to that token. enable notifications. So when they click that enable notifications button, this is the thing that’s going to register my device token. Again, this request token is part of Angular Fire messaging. This is one of the things you get along for the ride. If I want to disable notifications, I kind of do the same thing in reverse. I’m going to delete the token from AngularFire messaging. I’m also you’ll note going to record the token in the database when I enable and I’m going to remove the token from the database when I disable super important stuff. Okay, got that that that? Perfect. We have this convenient PWA service that does a lot of work for us. I forgot to do this earlier. But this is the prompt to install is not related to FCM. I just forgot to show you this earlier. That is the code that allows me to prompt to install the application notification function. So this is the code that runs in a Cloud Function behind the scenes to do the real work of sending and posting notifications. So a few things going on here. I am subscribing to user updates. This changes when the user subscribes or unsubscribes. So in this case, if they’ve enabled, if they’re adding a token, it means they’ve enabled notifications. And I’m going to subscribe that user to our topic, the topic name in this case is just chats. If they remove the token from the database, then I need to unsubscribe them. And this does the work of that. The other thing that I need to do is when chats are created, I need to send the notification. So when a chat is created, I use the messaging feature of the Admin SDK to send a message to our topic. And the title is new chat message, the person it’s from, and the body of the notification is the message they sent. And because I’m using topics, this is really simple, I’m just broadcast into the topic, anybody that has subscribed to that topic will receive that notification. And that is everything all the way set up. I’m not going to run it locally because of time. I’m going to run it out here. So if I enable notifications, right now, can somebody that’s watching, please send me a message. And I will also pull this up, I have a test. account as well.
There it is sending a message. Thanks, Brian. There it goes. You see I got the in app notification right there. Because FCM is now working. If I disable this, I won’t get those message notifications anymore. As seen right there, no notification for this one. Nope, I didn’t get prompted for it because I had disabled notifications. So that’s the proof that it works. Firebase Cloud Messaging. So thank you very much for sticking around for that really quickly, you feel free to play around out there. Really quick overview, a few things that Firebase has the command line interface, you can create your projects with this manage your projects, you can import and export user accounts. And even manipulate the database for script support allows you to do a lot of scripting, a lot of local management, I use this a lot. We talked a little bit about Firebase Storage, but it didn’t show you a lot about how it works. There is metadata on all the images or files that get uploaded, you can use it for any kinds of files, images, get some additional features, but not even like PDF files, or documents or text files, whatever anything can be out there. You have hosting the hosting service is extremely fast, it’s really easy to use, pushing something out to hosting this one command is just Firebase deploy. And it pushes all the stuff out and runs it in the wild. And you have quite a lot of configuration capabilities, including redirects, and rewrites and security headers, that sort of thing. You also have deployment history. So you can easily roll back with one click within the web console. And of course, we have Cloud Functions. So I didn’t really show this. So I’m going to show you just a couple things really quickly went in this notification function. This is a serverless function. So it would get built and pushed out to Firebase Cloud Functions. And that allows us to do things like these triggers right on update, when it’s something changes in the, the database, or when something’s created in the database, I can watch those events, I can subscribe to a wide range of other events as well. One of the the actual functions that we have out here is an emoji function. So anytime a chat is created, it will replace lol with a laughing emoji. And it’s funny, sometimes people trigger that long before I actually get to show it. There we go. Nice. Exactly. It takes because it’s running as a serverless function. It actually makes the post with the text, and then the function runs and then it replaces it with the emoji after the fact. That’s the way it’s set up just because it highlights how functions really work. So that’s a fun one. But they can be HTTPS endpoints for API’s. You can have them scheduled like running on a cron job. It’d be different platform triggers, like when you upload images or when you change things in the database. So when somebody logs in, those are all types of triggers you can use. You can even do direct API calls to your functions. So a lot of great stuff there. Hi, thank you so much for hanging out with me. I will go through any questions in the chats now I’m happy to answer as much as I possibly can. This is me, if you’d like to set up a meeting with me to discuss more about serverless architecture, Firebase or mentorship or anything like that, I’m more than happy to talk to you. So thank you very much for hanging out with me today.
Brian Rinaldi 50:20
That was great. I’m, I was I was mentioned in the chat that like, I am one of these interesting people like interested in weird for a developer who hasn’t messed with Firebase at all. In all the years, I remember, there was a point when like, particularly that that real time fire fire that database that you mentioned earlier, that was kind of the classic. You know, that it seemed like every web app and mobile app was using Firebase. So yeah, this was this was awesome. I mean, there’s, you know, it’s kind of, I’m really impressed with how easy it is to just do all that stuff. And all with one, one SDK, right. So very cool. So, folks, if you have any questions, please post them in the chat, or in the Ask a Question module. I’ve got some of my own, actually. Okay. So one of the things I noticed is like, Okay, you were doing everything in Firebase here, right? I’m assuming that is pretty. Like, if I, let’s say I have an app running on Netlify, or somewhere else, like I can mix and match these pieces. With my apps, like I don’t have to use the hosting to be able to easily do is there are there any drawbacks to that? I mean, or is it just work more or less the same?
Michael Dowden 51:45
Not particularly. So I so far have never worked on a project that had push notifications that did not use FCM. And that’s actually pretty common across the industry, they’ve just done such a fantastic job of making that easy. Firebase Cloud Messaging is really become kind of an industry standard, a lot of ways for push notifications. So it’s, again, that’s a really common when to mix and match. It’s, I feel like, off maybe the hardest one to mix and match. But even that, it totally works. Like it’s not really a problem to pull in just the off component. If you felt like using that instead of something like I don’t know, odd zero or Okta, hosting, I’ve seen a lot of places do use just the hosting and nothing else. Totally an option. There’s nothing wrong with mixing and matching. It really kind of depends what you want. The thing that I like to point out is you totally can do everything in Firebase. In fact, I often do. But even then, it’s not uncommon for me to have three or four different Firebase projects that all reference the same database. And from that standpoint, it’s no different than if you had your project deployed somewhere else entirely, to a completely different third party platform. And we’re calling Firebase, it’s not particularly harder. One of the things that you do get with Firebase is they actually have some some shortcuts. So if you’re deployed to their environment, they will, they can do auto configuration for you. Because then they know, hey, you’re on our hosting environment, we know what project you’re wanting to run on. We’re just going to set you up with this project automatically. You lose some of those benefits, but that’s the only real drawback. It’s not that hard.
Brian Rinaldi 53:35
Okay, okay. That makes sense. And, and the, the hosting itself is, like, really get into the, is it like node based hosting, or is it static? Like, you know,
Michael Dowden 53:48
it’s it’s not static. It’s static hosting. So the hosting service is only for static files. So but that’s kind of a bit of a misnomer. So the default hosting all static files is superduper. fast it is CDN backed. You’d be hard pressed to find a faster static file hosting service anywhere. It’s on par with with Netlify and with other things. What sorry.
So despite the fact that I completely put my phone on Do Not Disturb it decided to disturb me anyway. So I apologize for that. Metaphor. And now, I can’t even turn it off. So the answer is that super fast, but you can still deploy node based things. What it does is it will run the node on the serverless cloud function displays a Cloud Function, it’ll run that way. So for example, if you have angular or react, or something like that, Angular Universal is a perfect example you want in Angular Universal, you want To do SSR server side rendering, and it will, it will do that automatically. It’s actually a feature of Firebase deploy. So when you do the deploy, it magically bundles that up as a Cloud Function deploys it as a Cloud Function, and then it has access to the node service rendering, there’s some additional configuration you have to do, but it’s available as an option.
Brian Rinaldi 55:24
Okay? Okay, that’s so, so similar to like your nullifies, or your oversells. Or, or those were, like, detects what the framework is, and in WordPress, and will, will bundle that up for you. Okay,
Michael Dowden 55:37
the downsides of that approach. And Firebase is that is running in a Cloud Function, which means that it’s not a dedicated, it’s not the same as dedicated server, right, it’s going to spin it up on demand, which means there is the risk of cold starts and things like that, you can with Firebase, give a minimum instance of one, which means it always keeps one cloud function running, to avoid getting hammered with those types of issues. When you’re trying to run the service. So it’s important to be aware of that, you probably if you’re going to use a Cloud Function to run node j. S, for a website or whatever, you really want to have that minimum instance of one so that you don’t get hammered on low traffic sites.
Brian Rinaldi 56:26
Okay. Okay. That makes sense. So, Tony, as I’m trying to, so I think he’s trying to kind of understand lock in here. But I’m assuming, obviously, you can, you can drop these at a point like kind of mix and match as we talked about earlier, you’re not locked into the platform?
Michael Dowden 56:51
Nope, not at all. Well, in fact, if you use the real time database, one of the reasons I love it, because it’s a JSON data store, you can export the entire database, either by going through the web console and clicking a button, or using the command line interface and just download the whole thing as JSON. Also, the databases have built in API’s, like rest API’s that you can use. And so long as you follow the security rules that you’ve written, you can export the data that way or interface with the data that way. So there’s no, there’s no real lock in from how you choose to build your your applications, but also in terms of data ownership.
Brian Rinaldi 57:33
Right. Okay. That’s great. And and I guess my last question here will be, you know, we didn’t discuss the pricing, I’m assuming all of these are, like, have a free tier of some sort?
Michael Dowden 57:47
Yes, yes, yes, yes, Firebase has a free tier. It’s pretty generous. The caveat is that on many of the Cloud Functions, so any cloud function that uses HTTPS, or accesses the outside world in some way, there’s a lot of different restrictions on cloud functions that require you to move to move to a paid tier. Now, the good news is that even within the paid tier, you get a free amount of activity every month, it’s not because you moved to pay tier, you suddenly start paying for everything, you still get access to a certain amount of bandwidth every month, a certain amount of storage every month for free. So just because you’ve added your credit card, doesn’t mean it’s going to start costing you money. In fact, it usually doesn’t. I run Firebase on. I don’t even know at this point a dozen production applications and websites at least. And I think my total monthly bill is about 30 bucks. Oh, wow. Like, it’s not tons of traffic, but it’s 1000s of visitors a month like 1000s and 1000s. You’ve got to be pretty big traffic before it starts costing you much. And it part of it has to do with how much data you’re pushing around. Like how efficiently you’ve built your system, like are you hammering the database, way more times, then you need to prove page load, that sort of thing. There are things you can do to make it expensive. But if you’re if you’re a little bit careful with your data, use an optimization then it’s it’s really cheap.
Brian Rinaldi 59:26
Excellent. Oh, that’s awesome. Okay. So I think that’s all the questions I’ve got. I don’t see any other audience questions. So the pool will kind of ended there. But that was That was fantastic. I definitely want check it out. You know, yeah, you made it look so easy.
Michael Dowden 59:46
It’s a lot to pack into a short period of time. And yeah, I had written some of the boilerplate code already. But the framework parts of the code are so simple, that you really can build the whole application in 45 minutes, so
Brian Rinaldi 1:00:00
Yeah, yeah, I mean, just even the the piece of like, how much time I used to spend on authentication and the way we plugged in authentication there. Our the File Upload was just like a one line from the SDK. So yeah, that’s That’s awesome. So thanks so much, Michael. Appreciate it for coming and presenting to us today. And thank you all for attending this. Hopefully you got as much out of this as as I did. Keep in mind, we’ve got some great events that I talked about earlier. Coming up. We’ve got uptime FM with Becca, we’ve got dev relish with Cassidy and we’ve got a presentation with Austin Gill on edge functions all coming up. I’ve got some more I’m going to be announcing soon. So just keep an eye out for that as well. And I’ll see you all again soon. Bye.