Web Hack Wednesday

Web Notification API

Web Notification API
5 (100%) 1 vote
(Video Transcript)
Hello, welcome to Web Hack Wednesday, I’m Martin Beeby.

>> And I’m Martin Kearn.

>> And today we’re gonna be talking about Web notifications.

>> Excellent! What’s a Web notification?

>> Well, you know what a notification’s on your phone? Or in Windows. When an application’s got things to tell you, it will notify you via the action center or notification center or something like that.

>> Okay, yeah.

>> Well it’s basically adding that capability into a website. So, if something happens on a website, you get notified about it.

>> Kind of like on Facebook, if you’re on Facebook websites, sometimes you get notified-

>> Yeah, actually on the Facebook website, if you’ve got nothing, they usually do this thing where they’ll make a sound.

>> Yeah.

>> And try to get your attention that something’s happened on the web page.

>> Yeah.

>> Well, this is a way of getting into the system kind of notifications.

>> Okay.

>> Sort of way.

>> Cool, okay.

>> So it’s quite straight forward to determine that. So, let’s go to my computer and we’ll have a look what I’ve got. So I’m building my website in ASP.NET Core right? That is my personal website but it doesn’t need to be in ASP.NET Core at all. This is all JavaScript and HTML. [CROSSTALK]

>> Okay right.

>> All I’m effectively doing is I’m gonna be adding a script tag to my webpage. And the way that this Razorview thing works anything is that these scripts were all just placed at the very bottom of my page. Although that I’m adding into my file here, they’re top of my page, when it actually comes to compile a page down, it will actually put them in the bottom, where they are. Which is important based upon the this program code you’re writing, it needs to be the bottom. So I’m not doing any-

>> I mean, that’s general good practice with JavaScript anyways-

>> It is but I could’ve added a wrap around to say I’m document ready and keep this code, which I don’t do. When comes ready, execute this code, what I’m doing it is doing it at the end where I know pretty much guarantee that the DOM will have loaded because it will have got to that JavaScript.

>> So okay.

>> If you’re trying this and the code’s not working, that’s because you’ve got it in your head and.

>> Okay.

>> Okay so, let’s detect whether or not we support what we call the notification API. So, this is the API which is gonna allow us to do this notification.

>> This is a JavaScript API.

>> It’s a JavaScript API, the first portion is available in all major browsers. It’s in Chrome, it’s in Edge, it’s in Opera, it’s in Firefox, it’s in them all.

>> Okay.

>> And basically, any browser which supports the capability of notifications will have a notification object, what we call the Window Object in JavaScript.

>> Okay, yeah.

>> So the way that you sort of feature detect, whether or not this is here or not, we can just say look at the window object and is Notification in the window object?

>> I see, yeah.

>> And so what I’m doing here in the code is just saying I’ve basically got two elements. Doing this in a really, really simple way basically. I’ve got a button.

>> Is this so that I could understand it? It’s actually for me.

>> Yeah, a little bit, yeah. No. [LAUGH]

>> Cheers mate.

>> Keep it really straightforward. But obviously, just an API you could call it. You could bind it to whatever. You could use this in React or Angular. But for this purpose, we’ve just got two elements. A p tag, which is, I’ve conveniently given the id of information. And this is gonna get some user information about what’s going on.

>> Yep.

>> And a button.

>> What have you called that?

>> It’s called button.

>> Brilliant.

>> It’s got an id called button.

>> Descriptive.

>> It doesn’t really need it, but I feel calmer when it’s got an id.

>> Yeah.

>> So that I could just follow-

>> And also, you’ve got to be fair about these things. I mean HTML elements have feelings. Well if you’re gonna give the p tag an ID, then you should give the button one as well.

>> We’ll give it proper description of what it is. Maybe it can be called send notification, I’ll just call it button.

>> No, button’s fine, I’m happy with that.

>> First things first, what I’m gonna do is if Notification isn’t in the window, that means that it’s not supported.

>> I think your mic’s gone.

>> Did it [INAUDIBLE]?

>> Okay, turn it off. [INAUDIBLE]

>> Cool. Everybody okay now?


>> Is yours red?

>> Yours is red as well.

>> It’s red, yeah.

>> So it’s running out of battery. [CROSSTALK] another battery for you as well.

>> Am I back on?

>> We are both cooking on gas. So, we go to my page. Okay, we’re still recording?


>> Which one, just this one’s fine. So, if you go to my website, this is just a website. This is written in ASP.NET Core. But, that’s really unimportant at the moment. It’s all just JavaScript and HTML I’m really gonna be using here. But there’s is some stuff you’ll see on the screen here. This is my actual blog. So there will be stuff on here that you might not recognize or might not see. So, I’ve just got a script section in my Razorview where I’m gonna start writing some JavaScript. And this will get placed at the bottom of the document where it compiles the actual thing. So, the last thing for the closing quality.

>> Right, tag.

>> And what I’ve added to my document is a p tag, which is called information, it’s got an ID of information.

>> Good, okay.

>> Keep it simple, and a button with an ID of button.

>> That’s good.

>> Yeah.

>> I was wondering why you might have called the button. That’s a good descriptive name for it.

>> It’s the only button on the webpage. Now I wanted to determine whether or not this browser is capable of supporting a thing called the Web Notification API. So-

>> So, this is a JavaScript API.

>> It is a JavaScript API. It’s in browsers.

>> Okay.

>> It’s in mobile browsers, it’s in desktop browsers.

>> Yeah.

>> It’s supported by all the major browser manufacturers.

>> Yep.

>> And so we’re gonna just determine whether it exists. And all we’ve got to do is look for a browser that supports notifications is going to have an object called notifications on the window object.

>> Okay, yeah.

>> So, if I just place a code in here. It looks for a notification in windows and if it doesn’t exist, if there’s no notification on the window object then document.getElementById information change innerText to web notifcation is not supported and it disables the button. So, if someone comes to this page and they are using a browser which doesn’t support notifications, you can give them a little message saying it’s not supported and disable the button.

>> Okay.

>> And else obviously is supported.

>> Yep.

>> It’s gonna go and change it and say good news, web notifications is supported in your browser.

>> Very polite, isn’t it?

>> It is very, yeah. [LAUGH] It’s very polite. So, I know it’s either supported or not supported at this stage. And so we can start thinking about, all right, well, now I want to go and wire up my button, okay.

>> Okay.

>> So, I’m just gonna say document.getElementById and give it the ID of my button which was.

>> Button.

>> Button, conveniently.

>> Yeah.

>> And then .addEventListener and, Click.

>> This is just a standard event handler for a click event on a button.

>> A click event on a button, yeah. Which so happens to be called button, right?

>> Yeah.

>> So, I’ve got this now anonymous function which doesn’t really do anything. So now, someone’s gonna be able to click that button and something’s gonna happen. But what do I need it to do? Well, I need it to go and start calling this object, this notifications object. So, if I say notification, that’s my object on the window, so I guess that’s shorthand for window.notification, but that will work nonetheless. Notification. requestPermission.

>> Okay.

>> Requesting permission is an API, and all I need to do is, when I call that function, it’s gonna ask the user to allow notifications. Or the first time it’s gonna request it and then subsequently it will either, Know that it’s already got permission and execute the code or whatnot. But this is gonna invoke the UI, potential UI, to ask the user, do I wanna allow notifications?

>> Right, okay.

>> Because the user’s always got a say whether they want to allow a website to notify.

>> Yeah, it’s like when the websites using microphone, that kind of thing, webcams, it’s the same kind of thing as, yeah.

>> So, again it’s the same sort of thing. We give an anonymous function in there. So, this function is going to be called once this is resolved. And there’s a object which will come in here and I’m gonna call that permission, permission, then we call it permission and so this will contain the object, which is whether or not they said yes or no to that thing.

>> Okay, yeah.

>> It could be three states, it can be either default, default granted, or denied.

>> Okay.

>> So let’s go and see what we’re gonna be doing now. So now I’ve got these three states, so in JavaScript, I’ve got three states, I might wanna add a switch. So, I’m going to put a switch on that permission statement, and will say permission, Will spell the same, doesn’t matter if I spell it right, just as I spell it the same way. And we can say case, if permission is granted like that. Then I’m going to formatting. This doesn’t have that one there. So, in the case of it being granted. Excuse my-

>> You need a node.

>> I need one of those. My syntax is not great there. So, I need to get an icon. So, this is basically anywhere on an Internet object which is gonna represent the icon which shows up with the notification. Now it doesn’t support SVGs, I found which is pretty annoying.

>> We’re gonna have a conversation about SVGs-

>> Yeah.

>> In the feature obviously.

>> We’ll discuss it. I use a PNG for this, because we need an alpha channel it, because you don’t necessarily know what UI’s going to show up on.

>> Yeah.

>> So, it’s a good idea to just use a transparent background.

>> Yeah, okay.

>> And I’ve got an icon which located on my website which I’m gonna use for the purposes of this, which is http://thebeebs.co.uk/images/beebs.- png.

>> Okay.

>> And that is the icon file we’re gonna be using. And then we wanna set up a notification. notification = new Notification. new Notification.

>> Okay.

>> And this accepts a number of parameters. Now the first thing is gonna be the title which shows in the title.

>> Okay, yeah.

>> So, we’re going to say something like hiya. Because, again, we’re polite, but we try to keep it informal.

>> Yeah, an informal tone.

>> Yeah, exactly.

>> Your tone of voice.

>> And then I construct a payload. This payload can contain some other kind of bits and pieces, there’s other options, but the one two properties that I’m gonna include-

>> It’s quite a grand term, really, considering what you’re about to type in there.

>> What do you mean, what’s the grand term?

>> Just, payload seems like it’s-

>> That’s the correct terminology-

>> I know it is, it just didn’t seem appropriate for this demo but yeah okay.

>> Web Hack Wednesday. Okay got that now and so now I just need to pass in the icon as well. Icon colon and then that goes into the icon file that I’ve got up there, which is string basically, the reference to that string. So, that should be good, I’ve got my, is that resolved properly? Did I miss out a colon or something there? Web Hack Wednesday, that should be a comma, right. Oop, let me just check. That passed good, for some reason my IntelliSense is quite slow. So, we’ve got a notification now. So now what I need to do is that thing which I’ve just constructed, that notification, that will fire instantly. And some UI is gonna come up on screen. Now if someone clicks on that, I need to do something on my page. So, what I’m gonna say is just take that notification object and say onClick that, onClick of that object, I wanna execute a code.

>> Okay.

>> And you can do anything in JavaScript at this point. You could open a window or whatever. And what you will find, at least in the implementation on Edge, is that when someone clicks on that, it will refocus back to that web page that initiated it.

>> Yeah, okay.

>> So, you’re gonna get that benefit of it going back to that web page.

>> So this was so far, even if it’s a web page opening a different tab.

>> Yeah, or not even the web pages, maybe the browsers closed, not closed in this instance, but it’s minimized. It’s gonna maximize and goes to the correct tab and everything, all that sort of stuff. So, I’m gonna just say document.getElementById. I’m gonna go into that, what’d I call that, information?

>> Yeah, I think you did, yeah.

>> Information.innerText. And we’re just gonna put that as You clicked the notification, like this. Oops, yeah, that’s all I need to do. And so now, we should have a granted, the case is granted over case is denied. I’m also gonna add in a break there.

>> Okay, yeah.

>> Obviously you don’t want it to carry on through. And then I’ll add a new case in there. And sort of granted it would be denied. And-

>> You could adopt quite a disgruntled kind of voice for this one.

>> [LAUGH] Okay, if you want me to. Suit yourself then, you can say something like that. If you don’t want my notifications.

>> Fine, if you don’t want my notifications-

>> Fine-

>> Yeah.

>> You don’t want-

>> You don’t know what you’re missing out on.

>> [LAUGH] Don’t, I’ll do it in capitals and misspelling with no apostrophe.

>> Yeah.


>> Yeah. [LAUGH]

>> And this gives you an impression that someone denies, spell document right. document.getElementById(“Informatio- n”).innerText is fine.

>> It needs a-

>> I keep on missing the switch statement.

>> You need a break as well. Don’t forget.

>> There’s nothing which it could possibly go to, but that’s good. So, now we have what we think should work.

>> Yes. I think that should work.

>> So, I’m gonna to go into IIS Express which is my web server.

>> Say again.

>> My IIS Express.

>> Very good.

>> And it’s gonna load up local host.

>> Should do, okay.

>> I’m gonna go to the page which was a notification.

>> I’m excited about this.

>> Are you really?

>> Yeah.

>> And then, it says look we’ve got this bit. Good news Web Notification supporting your browser. Send a notification and see the notification showing up as we’d expect. And then over in our action center at the right you can see it as well. It’s the history of all the times I clicked it. It says, Hiya, hello from Web Hack Wednesday.

>> And obviously you’re using Windows here but this would display based on whatever the device is. So, what would happen if I was on an iPhone?

>> The web browser decides how the notification system looks like.

>> Right, that’s very cool.

>> It is and it isn’t, in some ways. I’ll show you the implementation in Google of the same thing. I see.

>> Hello from Web Hack Wednesday. Which is kind of good. But you’ll note that isn’t the system UI.

>> No, that’s the browser.

>> Yeah.

>> That’s a browser sort of capability, which is fine, and it does the same job. By the way, [INAUDIBLE].

>> And they’re both [INAUDIBLE] this is just slash notification.

>> Yeah.

>> I’m gonna try on my iPhone, just to see, I’m just intrigued. It’s going to [INAUDIBLE] file.

>> Go back, go back.

>> thebeebs.co.uk, it’s in my Favorites.

>> Slash notification.

>> Slash notification. Okay.

>> That one that. Okay, send the notification.

>> Web notification is not supported it says there.

>> We should probably cut that out. [LAUGH] It’s supported on Android.

>> Okay.

>> It’s supported on Android. Now, the kind of the next thing about this, so, we’ve got a, we’re web notification.

>> Yep.

>> Which it shows something in screen, shows some UI.

>> Yeah.

>> Which is great. But obviously, the browser has to be open for this to work.

>> Yes.

>> There is a next step, which we’ll look at on another show, which is, we start using the thing called the push API.

>> Okay.

>> The way that the push API works is that you can from your server send a push API down to the browser.

>> Right.

>> And the way this works in Chrome at the moment is that if the browser’s not open, there is a service worker which can listen to that notification come in.

>> Okay.

>> And the service worker can initialize a notification.

>> Right, wow.

>> So, what you get in that scenario, in that workflow is the user hasn’t got the browser open at all and you’re able to send a notification all the way down, and get the person to open their browser if they’re interested in that notification as well.

>> Wow, that’s really cool.

>> So, at the moment we’ve shown stages, like a very basic simple notification.

>> Yeah.

>> But the future of these notifications is being able to service send these, and send it to users who don’t have their browser open, or don’t have their-

>> Which is getting very close to what apps do.

>> Precisely, and I think some of these capabilities like notifications are making websites more app like.

>> Yeah, and resulting in happy users.

>> And on that bombshell, we’ll leave you for Web Hack Wednesday this week. And we’ll see you next Wednesday for another Web Hack topic.


Read the video

Martin and Martin look at the Web Notification API to send notifications to your users via your browser.

Leave a Comment

Your email address will not be published. Required fields are marked *

1Code.Blog - Your #1 Code Blog