Creating an Installation Button

[00:00:00]
>> Maximiliano Firtman: So, if you're looking into your HTML, we have already a toolbar here, okay, that says button id Learn. So I can add another button here, so let's add another button and let's call this btnInstall, okay, something like that. And we're going to say span class like we can find an icon, this is using icons, I don't know, like, down.

[00:00:24]
I'm not sure if there is one down, Install, okay? So now we have a button that says Install, let's try here.
>> Maximiliano Firtman: Yeah, well, you can add an icon later, it's not really the important part. So the thing is that, okay, I need now a handler for that, okay?

[00:00:44]
So well we go to JavaScript, so I open app.js,
>> Maximiliano Firtman: And again this is button in a JavaScript. I'm sorry if you are not comfortable with this, but I will just do query selector. Or if you want the old-fashioned getElementById, it's up to you, btnInstall, and I will add an event listener for it or an onClick event handler.

[00:01:10]
Sorry for that.
>> Maximiliano Firtman: I'm going to do something, well, what should I do? Can I request install? I mean, there will be pretty good if we can do something like this, navigator.app.install, something like that, but unfortunately, we are not there yet. So, it's not so simple. Actually, I need to wait for the before install prompt event to be fired.

[00:01:38]
So, okay, so then that means that we need to listen for that event, Window.addEventListener, It's beforeinstallprompt, okay? So we wait for that, okay, so we wait and what? What to do with that? Here comes the tricky part, I mean, it's not difficult, but it's weird. It's odd when you say, hey, yeah.

[00:02:07]
So we need to create a global variable, or a variable that you can use later. I typically call that bip, before install prompt or beepEvent. We started without it, without one, so no, and when we get it, I'm just going to save this object that we received here, you understand why in a sec.

[00:02:31]
So I will take it, first I can call preventDefault, so that will prevent the browser to render any UI. And then I will say bipEvent = event, so I'm saving that for later, when is later? Here, when you click the button, I will check. If I do have it, I will call an event from it, it's called prompt.

[00:02:55]
That triggers the native installation dialogue, just that. And if not, I cannot trigger it, so the only option is make an alert, show in bips saying, hey, well you need to go install it manually, add to the home screen, whatever. So for now, I will say, sorry, do it manually.

[00:03:15]
Okay,of course, give the user better instructions. But it's kind of tricky, right? So we wait for the event to happen, we save that as kind of a token, and then we use that later when the user wants to install the app. So now if I go back and refresh, if I click here, I'm sorry, do it manually, I'm sorry, do it manually, what's going on?

[00:03:39]
The app is already installed, because it's already installed it's not gonna fire the It was one of the requirements. So I need to install the app for testing. So I will open the app, you install the app from here, Uninstall. Also you can see all your apps if you go to about.apps, all the apps appear there.

[00:04:02]
Actually, the Edge version of this is actually better, it's nicer, the Microsoft Edge version. So I need to uninstall the app from here. Okay, uninstall, of course, getting to the app again. And now let's see, now you can see my button is back there, my badge. But now, if I click install here, well, I have the native dialog, magic.

[00:04:32]
We have any question? We should probably put this button somewhere else, in the HTML, right? Maybe what I'm doing wrong is I should close this li and open another li, I think that it's a menu, right? So, okay, now it's a little better, but that's got CSS, okay?

[00:04:57]
You can play with that, but now I can install from here, pretty cool.
>> Student: I was gonna ask about selective CSS for if it's already installed, not showing the Install button.
>> Maximiliano Firtman: That's a good thing, because if I install this, I see the instance, now I don't want that, so let's do that.

[00:05:16]
So we go to CSS, and what I want, let me add this to the bottom, I want to use a media query, okay? The media query, I will write the media query in a sec, will actually take the button Install and they will say display. I mean, I can hide it or show.

[00:05:36]
I can decide which media query to use, but probably I will say display none. So I'm removing it from the visual DOM, remember it's display something. Well, here it's called display-mode in CSS. When display-mode is standalone. So when display-mode standalone, I don't wanna see the button.
>> Maximiliano Firtman: That's how you do that.

[00:06:07]
And it works everywhere, on every platform iOS, Android, desktop it works. Have in mind that you might not be using standalone. Maybe you're using minimal-ui or tab mode. Remember to match this value to your manifest, okay?
>> Student: Is there also a way to, if you already have the app installed, but you're on the web browser, like a regular web browser and it's already installed, just not display, do you know what I mean?

[00:06:42]
Or say open-
>> Maximiliano Firtman: No, well, okay I get it. Well, there are two answers to trigger problem. First, something that we can do is we can start with this button, actually the whole the li can or maybe not the li, because we will see some shift in the UI.

[00:06:58]
I can start hidden and maybe I can show the button only if the event is fire. That's when I'll say it's probably not exactly what you were asking, but I think it will solve the same problem. So now we say when, before install prompt happens, I'm going to take I can take the, I put it on the button, right?

[00:07:20]
I think so, so btnInstall and I will say that hidden = false. So now we can even see that actually-, we are not seeing that actually. So hidden is fine, right? The btnInstall, install everything is fine. I don't have this, I think it may have the service worker or not.

[00:07:49]
Just in case I will clear the whole site data, that's good thing to do every time. Also no, I don't wanna be offline. Come on, we have a working app. Now I'm still seeing the install, so let's see why. I do have hidden, and why I'm seeing if it's hidden, interesting.

[00:08:16]
>> Maximiliano Firtman: Because I think it's a CSS issue, my CSS is replacing that display thing. I can change that, or let me change hidden form that, you got idea? That it's my CSS here is saying that buttons should always be display block. And this is actually replacing the default behavior for hidden buttons, okay?

[00:08:43]
That's what's going on, I should say buttons that are not hidden, Can you say that? This is hidden, how can you say not hidden?
>> Student: Colon not.
>> Maximiliano Firtman: Colon or not, I use this not
>> Maximiliano Firtman: We can do that, it seems little cryptic because it's not hidden, you start thinking not, not, of not I think it's a little dirty.

[00:09:08]
Maybe it's better to work with classes here, okay? Or just here for doing this quickly, I can try work with disable instead of hidden, just for the sake of this sample, so let's see now.
>> Maximiliano Firtman: Now it's disabled, but I should change the UI, right? But now it's disabled and it is going to be enabled after that.

[00:09:31]
But working with probably with CSS, but I didn't answer your question directly, right? Another way that you have is the getInstallRelatedApps that I mentioned before, it's a weird name, I know. getInstalledRelatedApp is an API that will let you know in JavaScript, if an app is already installed. It can be a native app, it can also be a web app.

[00:09:57]
You need to do a couple of things, actually. Check if your website, no, there is a section here that talk about a web app. The this one tell your PWA about itself [LAUGH], that's the section. So, you need to add this to your manifest, so it's kind of an advance thing.

[00:10:17]
So you need to add a related application that points to the same manifest, to itself. When you do that, then from JavaScript, you can check if the PWAs installed or not, and then turn off, disable or do whatever you want with your button. That doesn't work, unfortunately, in Safari.

[00:10:36]
In Safari in fact, there is no way to know that an app is installed, and actually, because you can install more than one instance. So actually, I put that as one you to know.