Before Install Prompt & Detecting Installation

[00:00:00]
>> Maximiliano Firtman: Deploying the app. So we have the app, the app is ready, we like it, we need to deploy it. Well, deploying a PWA is just deploying a web app. So you just put it on a server, that's all. And then you need users to get there, okay?

[00:00:12]
But there are a couple of things that we have to do to improve the installation experience. That's called, that way. First, we can detect if the installation API is available. What is that? What's the installation API? Do you remember Squoosh? That when we were at the Squoosh website, we did have an install button within the UI.

[00:00:39]
That's because they're using this API, that unfortunately, it's not available on Safari. I think that today is one of the biggest lack of API issues that we have on Safari, that there is no way to push the user into installing the app from our UI. The user needs to go manually and add and install the app.

[00:01:00]
It's called before install prompt, okay? That's kind of the idea. We'll code this, so I will show you the code directly there, but, talking about the event, it was part of the web manifest spec, but then it was removed because Chrome was the only one implementing it. And for being standard, need to be at least two implementations.

[00:01:21]
Firefox says no, WebKit said no. So only Chromium is there. So then now it's not part of that spec. It's a separate spec on a different place, in an incubator thing. And it's Chromium only, unfortunately. There are some proposals to create a new one for the future. A web app installation API.

[00:01:45]
There are some ideas there, but it's not implemented yet. The event before install prompt will be fired when the current URL passes the PWA criteria in that browser, okay? And also if the PWA is not already installed. It will fire the event before install prompt. When that event is fired is when you see a banner on a mobile device, or when you see a menu and the install button on Chrome, okay?

[00:02:15]
Or when you see and that a website that has a button. When that happens is because the event was fired. So, well here you have the description. So, it can be an info bar or banner, a badge, a desktop menu item, or it allows a developer to provide a custom install button.

[00:02:35]
That means when you see that as a user, it means that the before install event was fired. And you can also implement that. Also, there are always available installation menus items that can be tracked. So, for example, if the user is adding, creating a web app from the menu, from save this site as an app or things like that, or an iOS, if the user is adding it to the home screen.

[00:02:59]
You don't know if the user did that or not, so there is no control, okay? The user is in charge. So for example, add to home screen install site as an app, great shortcut. So, it depends with the browser. You don't have control of those menu items. So also, there is an event that to be honest no one actually uses it because it's Chromium only and yeah, it's on the window app installed.

[00:03:28]
It will be fired when the user has just installed your app, so you know it. That's all, this is typically for analytics. You track it somewhere just for counting the user, okay? All these APIs as I mentioned, are not available on Safari or Firefox on Android, and I'm not seeing any bright future for the next two years, we'll see.

[00:03:55]
But I don't see that's happening, okay? Okay, so how do you create one of this install promotion button, so then we can go and code it. So if you wanna add your install app button, you can also create your own div that appears on top of your page with your own design.

[00:04:13]
Or you wanna create add something to your menu that says, install. So how to implement that? It's kind of weird to be honest. It's based on that event, that's Chromium only and we need to wait for the event to happen. We need to first hide the promotion, I mean, the bottom or something, if the user is not in browser display mode, l mean, if it's in standalone, you're already in the app.

[00:04:39]
Don't show me the button, okay? Make sense? And if you know if the app is installed somehow, or if an alternative app is installed, what is that? For example, you may have an Android app, an iOS app in the stores, so, you don't wanna promote, choose the user the installation of another app for the same thing.

[00:05:02]
You will end up with two icons. Do you have ways to know if an app is installed? Yes, on Android, you have, it's an API known as Get Installed Related Apps, Get Installed Related Apps. You can search for that. If, while no event is fired, the only thing that you can do is hide the promotion or fall back to manual instructions, like go and install it manually.

[00:05:33]
So, I mean, if the event was on fire, and you don't know why, but if the event was on fire, you don't have any control. You cannot do anything. And try to avoid user experience duplications. For example, let the browser render a batch or a banner, and also you are providing a banner.

[00:05:55]
You can prevent default. You can ask the browser, hey, I will take care of this. Don't add me any banner.
>> Maximiliano Firtman: Does it make sense? Just that UX design pattern. So let's go directly and try to implement it.