Progressive Web App Support

[00:00:00]
>> Maximiliano Firtman: Cool, so a state of the platform, before actually seeing examples of how they look like. First, every browser supports PWA, because it's just the web, right, which is kind of, yeah, I mean, it's a right answer, but probably not the answer you are looking for, okay? Because sometimes when we are talking about the PWA platform, we are talking about installation at least, okay?

[00:00:26]
And yeah, because this is the web and it can be used in the browser, if you have a browser, it will render your web app. Maybe it's not installable, so let's try to talk about installability. So I'm keeping a list, and I'm updating a list in my website, firt.dev/notes/pwa.

[00:00:43]
This is kind of the only place that it's available on the web these days to know where a PWA is installable, okay, with details. And on Android, for example, it's currently available on all web browsers. All the main web browsers or the first ten, of course, on Android you have ten web browsers that no one is using, but Chrome, Edge, Firefox, Opera, Vivaldi, Brave.

[00:01:12]
So most of the most common, Dolphin, Android web browsers, they support PWA installation because most of them are chromium based, and chromium supports PWA installation. But Firefox also support PWA installations on Android. Okay, so that's pretty simple. So if you are in a PWA on Android, you can install it, and it will convert into an Android app, and we'll see that process later.

[00:01:38]
On iOS and iPadOS, it's on Safari, so if you're in Safari, you can install a PWA. What happens with other browsers? Well, that has been changed in the past, let's say that you can install PWAs from other browsers with a twist, so let's try to understand that twist.

[00:02:01]
First, we need to know where we are, because now we have two different iOS. We have the European Union iOS, and the rest of the world iOS, at least while we're shooting this video. So in the rest of the world, actually, right now, even in EU countries, it's just the same.

[00:02:22]
So does anyone have iPhone here, let's see. Okay, are you using Chrome?
>> Student 1: I usually just use Safari, since that's the only engine that they allow at this time.
>> Maximiliano Firtman: Safari is the only engine that they allow at this time. So Chrome on iOS, Firefox on iOS, Edge on iOS, it's just Safari with different scheme.

[00:02:42]
I'm simplifying the definition, but it's kind of that, so it's not really Chrome, it's not really Firefox. Now, in EU countries, Chrome could create a real Chrome, they didn't do that yet, and I'm not sure they will do that. But now they are allowed in EU countries only to use their own engine, okay, browsers, they are allowed to that only in EU countries.

[00:03:08]
But anyway, it doesn't matter if it's a real other browser in EU countries or like a simulation, as we have right now in the rest of the world. You can install PWAs, but only following Apple rules. And the installed PWA in the system will use always WebKit, Safari as the engine.

[00:03:29]
So even if Chrome creates a chromium version for iOS in EU countries, and you install a PWA in EU countries, it will use Safari, at least as of today, okay, that's the twist. HarmonyOS, that's a Huawei operating system. Well, mostly targeting Chinese devices, also they have some use base in China, other Southeast Asia countries, also some Latin American countries, mostly South America.

[00:04:03]
The native browser has its own main browser and you can install PWAs from there, and they become an install app there as well. And Meta Horizon OS, I'm not sure if you know what that OS is for. Actually, it's a new name for the operating system that right now it's the operating system behind the Meta Quest 3, the VR headset or the mixed reality headset.

[00:04:30]
And new headsets will appear in the future using also the Meta Horizon operating system, it supports PWAs. And in this case the only difference is that the installation is not through the browser, but through the Meta Store. So you publish your PWA on a web server and then you need to go and fill a form saying I have a PWA that I wanna publish for this uses.

[00:04:52]
And it will go through quality assurance because VR can make you sick. So it's not so simple as let anyone install apps without reviewing the app. Okay, because it has to do with health, okay, mental health and so on. So that's why physical health, so that's why they are forcing going through the store, but you can do then 2D or VR PWAs for Meta.

[00:05:21]
So what about the desktop? On macOS, you can install PWAs from Safari, Chrome, and Edge, so most of the browsers. Not here and not other browser, for example, Brave it's not supported. Linux, Chrome and Edge, ChromeOS, it has only Chrome, and you can install Firefox as well, but it's not common.

[00:05:44]
And Windows, actually this is pretty cool in terms of the amount of Windows that we have. Chrome, Edge on Windows 7, 8, 10, and 11. From Windows 7, you can install PWAs, if you're using Chrome or Edge as browsers. There is one big missing here in this slide, I'm sure if you can spot which one is missing, and it's a big name, and it's not Safari.

[00:06:15]
>> Student 2: Brave,
>> Maximiliano Firtman: Brave, no, even Firefox. I mean, Brave is also there, but I think that Firefox is bigger. Firefox for desktop is not implementing web apps. They used to have it with some kind of an experiment, and they say internally that we're not going to push this, so right now they are behind the rest of the browsers, even Safari.

[00:06:43]
>> Maximiliano Firtman: And I know some users that they were Firefox users that they stopped using Firefox because the lack of web app installations.
>> Maximiliano Firtman: So for example, this is how Trivago is a PWA, so this is Windows. So you can install Trivago from there so you install it and then you have a full Windows application.

[00:07:06]
I'm showing you a video of Windows because I'm on a Mac, so I will show you a video on Windows. And after it was installed, it's in the start menu, this is Windows 10, so it appears like any other in the start menu or start screen, appears like any other app in the system.

[00:07:21]
Okay, so that's how it looks like on windows. I have the Starbucks PWA as well, so you can order coffee from your desktop, that's another PWA in windows. Tinder, I know someone told me about Tinder, I don't know what Tinder is for, but it's a PWA as well, and it appears in the alt tab as any other web app.

[00:07:43]
Okay, this is Chromebooks, ChromeOS by a part of the same experience. I'm opening here several PWA, and you can see they have their own window. So once you open them, they are at the dock, and once you open them, again, Starbucks, they look like an app. I mean, from a user perspective, the user doesn't know it's a PWA.

[00:08:03]
And the user shouldn't know actually, it's just an app, it's a Starbucks app, okay, you want a coffee. I don't care if it's web app native, okay, it's just an app. So it's kind of the same thing here and I have just a screenshot here because just to prove, I'm not sure if you recognize the start logo there at the bottom, that's Windows 7.

[00:08:24]
The same Starbucks application installed on Windows 7. And probably you're thinking, well, who is using Windows 7 these days? Lot of companies, lot of banks. And if you're doing enterprise applications, PWA is a great platform, why? I'm not sure if you have experience doing app for banks, for example, or for large companies with old terminals.

[00:08:50]
Deploying a desktop application is really painful for security purposes, you cannot just send them an executable and they install it. They don't have installation permissions, they don't have anything, so it's actually very difficult to deploy apps on those devices. But you know what, if they have Chrome on Windows 7 or Edge on Windows 7, they can install PWAs without any special permission.

[00:09:17]
You send them a URL by email, go there, they enter the URL, and the users can install it from the browser, and they will get an app experience on Windows 7 without any other. They don't need to call the team, the technical team, to install the app, it has happened, it has worked because this is important.

[00:09:38]
The PWA, even if it's an app, a native app, as Steve Jobs was saying, it's secure because it's still working under the web browser umbrella, it's using the same security as the browser. So if it's secure to browse to that website, it will be secure to use it from its own window.

[00:09:58]
>> Student 3: Oscar in the chat says, WhatsApp is one of the best PWA.
>> Maximiliano Firtman: Yeah, WhatsApp is also a PWA, and sometimes they create it also a native client, the native client inside is actually using a web view. So it's kind of a hybrid, they're using a hybrid approach, but yeah, there are a lot of really good PWAs, and the best PWAs that I've seen are actually corporate PWAs.

[00:10:25]
There is a big market of corporate applications, I mean, application for desktop, for users, that it's actually pretty cool. Of course, they are not well known because it's just for their employees, but that's actually really good target. Before that they were doing .net applications or things like that.

[00:10:46]
Then they can be multi-platform because they work on Mac, on Linux, on Chromebooks, on tablets as well, so it works everywhere from the same code base.