Banners, App Badges, & Shortcuts

[00:00:00]
>> Regarding PWAs, this is one of the last, I think, APIs of our list of 36 APIs that we are covering today, Get Installed Related Apps. So with this API, you can know if an app is installed or not a native app, for that you will need the package ID.

[00:00:25]
A native app typically has an app package ID that defines the primary key of that app within the app store. So if you have the primary key and you do something, I will explain in a minute what that is, you can know if the app is installed or not.

[00:00:44]
And that also works with PWAs. So for example, on the Google Play Store, you can say that you want that app, com.myapp.pwa. If that's the ID, you're expressing that. How does Google know that you're the owner of that app? Because that API is targeting the owner of the app.

[00:01:08]
You need to make a handshake between the native app and your website. I'm not sure if you have ever played with a .well known folder in your website. It's currently a standard, .well-known. In that folder, you can put JSON files and for different situations. And in this case if you follow all the manual that you have to actually use this API, you will get how to take some kind of assign file from the app into your website, because the browser needs to know that you are the owner of that app.

[00:01:51]
Forget about that. The idea is that if you do that, then from JavaScript, you can detect if the app is installed or not. And probably you're thinking, why do I wanna know that? Well, maybe because you wanna offer a button saying, hey, do you wanna continue in the app or in the PWA?

[00:02:09]
And if not, you may wanna provide an installation invitation. But if it's already installed, you don't wanna invite the user to install the app because it's already installed. Okay, makes sense? It's a very niche situation, but when you have a native app or a PWA, and you wanna prefer that over the website in the browser, then you need to use this API, getInstalledRelatedApps.

[00:02:38]
This API is not available in iOS. On iOS, we have something known as a Smart App Banner. It's a meta tag that you can add also with your package ID that probably, for those of you that are iPhone users, you have seen this little banner at the top of Safari that says that the current website has also an app.

[00:03:00]
And you can open the app or you can even install the app if you don't have it. You can also use the second version of that one that has an argument. And this is for deep linking. So instead of opening the app in the homescreen, I can open the app directly in one particular element.

[00:03:19]
For example, if I'm on an Instagram Real, on Safari, in the browser, then I can open the Instagram native app, and it should open the same reel in a native app. And for that instant wrap in the HTML has to have that app argument. And lately, you can also use these for an app clip.

[00:03:45]
There, I'm not sure if it was a success, actually. An app clip is that kind of small app that you don't need to install, you can use it directly without installation on iOS. I don't think the idea worked, but anyway, you can connect your app clip with Safari.

[00:04:10]
Badging, app badging. This is really cool, and really simple. What is badging? It will let us alert the user that there is new content or pending task in our app. This is for installed PWAs only. On Android, worked with Chrome and Edge, on Windows, also Chrome and Edge, the same on macOS.

[00:04:33]
And now it also works recently from iOS 16.4. On iOS and iPadOS, only when installed PWAs. With one asterisk, you can change the badge only after a push notification. And then, well, at this point, you might be thinking, what's a badge? Well, it's a number that you see in the icon.

[00:04:55]
These are the badge. For example, the badges on iOS is this 15 number that you have there. This is on Windows, on MacOS. On Android, there are some versions, some launchers that also have the number such as the Samsung launcher. But by default, Android only includes a dot, not a real number, to express that is something new.

[00:05:19]
So with this API then, you can do this with your PWA as well. So you can put a number on the icon, so it actually really act like a native app. The API is pretty simple, you just say navigator.setAppBadge with a number or clearAppBadge to remove it, that's all.

[00:05:43]
And showing the number is not guaranteed, for example, in Android maybe it's just a dot. Typically, if you set that at zero, it's clear it. And that platforms are typically using the best effort scenario. So you don't know if it would work or not, you try. We already said that an Android is a notification dot instead.

[00:06:07]
And also if you have a very large number, typically you will see something like 99 plus, okay? So that's app badging. Something around that, because it came in the same moment, it's App Shortcuts. App Shortcuts is only for installed PWAs as well, and it's desktop and Android only.

[00:06:31]
The idea is to create menu items that will appear on icons launcher contextual menu. When you right-click, or when you long press on Android, an icon, you'll see a menu. Each menu item will open a new navigation in the PWA but to a different URL. And menu items are statically per app, so you can define three, four, five, and you cannot change them dynamically.

[00:06:59]
So you need to change the PWA actually, to change them. What they are? This. On the left you see Android. On the right you see MacOS. So you right-click on the icon, and then you can have option A, B and C. And each option can trigger your PWA but loading in a different URL and then using routing or different HTML.

[00:07:21]
So if it's a multi page application, you will render different content. Make sense, does it make sense? This is how it looks like, it's another entry in that web app manifest that we mentioned before. It's another thing that we have to integrate with the operating system.