Transcript from the "Install Button" Lesson
[00:00:00]
>> But before finishing the app, I want to enhance a little bit the installation experience. So the first thing that I'm going to do now is to uninstall the app here in Android. Codepad, I'm going to uninstall the app and let's see again, how the installation experience looks like.
[00:00:25] If I refresh the page now, I need to go to the menu and hit install, or sometimes I'm going to see a little snippet at the bottom. But maybe I would like to have another button in my toolbar that says Install that will trigger automatically that installation behavior so let's do that.
[00:00:49] Going back to VS code in my HTML, so we need to add another button here, it will be a third button. So I'm going to copy this and we should clone this. And this is going to be bottom install. And for the icon, I can use one that is called download that looks like an arrow to install an app, and also what I need is to disable this button when we are in standalone mode.
[00:01:21] So for that I will need an ID or a way to access this line, so we can disable the whole item. So this is going to be item installed and then in CSS, in our media query for a standalone, I'm going to say that for that item install, I want display none.
[00:01:45] Which means we don't want that button when we are using the app from the icon in the home screen, or in the dock or in the start menu, because it's already installed, okay? Make sense? So remember that if you're using minimal UI or full screen, you also need to update the list here.
[00:02:04] Or you can use a comma in media queries to have more than one, this is how you do an or operator in media queries. So you can say standalone or minimal UI, and then you're not going to see that button. The next step is to add the JavaScript code.
[00:02:24] So we go to app JS and we need to have another, Even handler for Python installed. But in this case, unfortunately, we don't have an a straightforward API. It's a little tricky, the API, it's called BeforeInstallPrompt and it's not an API, it's an event. If we Google BeforeInstallPrompt, we are not going to see any reference from the W3C.
[00:03:07] It's on MDN but this is because today is not part of any standard and only Chrome and Edge or Chromium based browsers are supporting this event. And they are committed to support that in the future as well. So this is not available in Safari or Firefox. So what we need to do, we need to listen for that event over the window option.
[00:03:35] It's called beforeinstallprompt. And what we typically do here is we call preventDefault. In this case, it will prevent the browser to render the dialog on the screen inviting the user to install the app because we will have our own UI for that. And what we need to do is to store the event object that we receive for later usage.
[00:04:04] So for example, we can create the variable here, global, or in this case in the scope of a function that we typically call this deep event. We start as null, And we save the event that we receive as an argument as bip event. Bip stands for beforeinstallprompt, that's the name of the event.
[00:04:28] Now when you click install, we need to check if that bip event is actually there, and if it's there, we're going to call the method prompt. What happens if it's not there? It can be many things, it can be an incompatible browser or maybe your PWA is not passing the criteria.
[00:04:57] Or maybe the user has already installed the PWA because if you already have the PWA, it doesn't make any sense to invite you to install it again. If that happens here, I will mark this as a TODO. We need to show the user information on how to install the app.
[00:05:20] For now we can make an alert saying, to install the app look for Add to Homescreen or install in your browser's menu. Because in that case, there is no way to trigger the native installation dialog so the user needs to go and install that manually. Let's try this on desktop.
[00:05:49] So here I am in Chrome, and now you can see at the bottom, in the toolbar, we have the Install button. If I click on that button, you can see that the native installation dialog is triggered. Let's try the same on Android. So on Android, I have the Install button at the bottom.
[00:06:07] If I click there, you can see it's also triggering the native dialog. But before finishing this part, I want to show you how you can even enhance this Android installation experience more. Going back to be VS code, I will open the web app manifest and I'm going to show you two properties that you can set that will enhance the installation dialogue experience on Android.
[00:06:40] And potentially other browsers in the future and potentially other platforms in the future. If you set a description and it's just a text explaining what your app is about like this app lets you add nodes while you're coding. And if you add another property called screenshots, with at least one screenshot following the same object type as in icons.
[00:07:09] So we need a source, a size, and a type. So what I need is on a screenshot. If you have one or more screenshots of your app, you will see how different the experience is. So first let's take a screenshot, for example using the iOS simulator, I can take on a screenshot from here like that.
[00:07:34] And that will be good enough. On my desktop, now I have this screenshot, I will just rename that as screenshot png. And I'm going to put that in my icon folder, I can add another folder for this. Like that. So, then I can now go, and use here the right URL.
[00:07:59] And for the sizes, VS code can help us. At the bottom, it says 11702532. That's all. Now let's go back to Android and see what's different. So I have just refreshed twice to actually get the latest content. If I hit Install, you can see a completely different dialog with my description.
[00:08:33] The screenshot and if you have more than one, you have a horizontal scroll bar and an install button that looks much better than the original add to home screen little imitation banner that we see. So if you wanna get this enhanced experience, you need at least one screenshot.
[00:08:54] If you have more, it's better, and you need the description. And now if I Install is the same process, it's going to mint an APK on the server. What happens if we try to click Install in Safari, what we'll see is an alert, okay, that you should change with a different instruction within your HTML and you know how to do that.
[00:09:17] That's because beforeinstallprompt event, it's actually never fire in Safari. And the same would happen in Firefox, or in desktop if you have already installed the app. And that's how you enhance the experience and you push or invite your users to install the app without a manual interaction with the manuals.