Real-World PWA Examples

[00:00:00]
>> Maximiliano Firtman: So we've seen Windows and Chromebooks. Let's now see macOS live because that's the iOS that I have here. I'm in the browser, so I will start with Chrome first. So this is Chrome. I'm opening this app, squoosh.app that is actually an open-source project that is actually pretty cool if you're a web developer.

[00:00:22]
It lets you drop an image here and you can pick one of the examples you have, and it will convert that image into different format and compress the image. So it's an image compressor, so you can convert, for example, from the new formats, WebP, AVIF, QOI, and here you can see well, it's compressing the file.

[00:00:45]
And one of the cool things about this app is that it's client-side, it's not uploading your file to the cloud. Everything is happening in JavaScript. They have their own decoders in WebAssembly, so it's fast, it's pretty cool. But well, it's a web app, so it works in the browser.

[00:01:05]
So the cool part is that you can Install this, okay? So how do you know? So when you open the app, first, the app itself it's inviting me to Install it, okay? That doesn't happen on every PWA. But also, if you don't have that installation from the app itself, by the way, by the end of today we will see how to do that.

[00:01:27]
We will do that in our project. We have this icon in Chrome that I'm sure if you realize it was there, okay? That in the omnibox, that's the name of the search bar, you have this icon that actually, when it says Install Squoosh when you click the icon.

[00:01:44]
We have a nice installation dialog saying, hey, do you wanna Install this app? For compress and compare images with different codecs, I have some screenshots, and I can Install the app. Another way to Install the app, if you don't wanna use the button, by the way, that button, it's an HTML button, is triggering the native dialogue.

[00:02:07]
In the menu, in current Chrome, you need to go to Save and Share, and in Save and Share, you have Install Squoosh
>> Maximiliano Firtman: Section or menu item that also triggers the same dialogue, okay? So well, if I Install the app, now I have an app on my Mac, it's Squoosh.

[00:02:33]
You can see at the title bar, the name of the app is Squoosh, okay? It has its own title bar, its theme with the color of the app, it appears in the Alt tab with its own icon. I can close the app and open the app again just by typing the name.

[00:02:54]
So it appears in a spotlight. It appears in the Launchpad on the Mac. There is a menu here because this is based on Chrome because this is important. This is not packaging your code in a ZIP file with its own rendering engine. It's still loading the URL from the server, and it's still using the browser engine.

[00:03:15]
So, for example, on Chrome, you have the Extensions section. You can enable or disable Extensions. You have also the way to increase and decrease the font size from here, and also you have a menu. But it's not a full browser menu, but you have some information such as, you can get the SSL certificate because now we don't have the URL bar.

[00:03:37]
So all that information is here, including settings for permissions and so on, okay? And you're gonna still use the app as in the browser. Also, you can go to the File and create a New Window so you can have more than one instance of the app. It's like having two Microsoft Word documents open, okay?

[00:04:02]
Of your own app. This happens on Windows, Linux, Chromebooks, macOS, okay? What about Safari? Well, Safari, this is Safari, it looks like the same app, but now I mean Safari, and still have the URL, I didn't Install the app. I can Install it also from here. I can Install the same PWA, I can try a different one.

[00:04:24]
For example, one that I can try is store.app,
>> Maximiliano Firtman: App Store but in reverse order. The store.app is actually kind of a store for PWAs for web apps. So it's just a guy, the least, it's The Open Web App Store, okay? And then, yeah, you can see here a lot of PWA.

[00:04:50]
So in case you all were wondering who is doing PWAs. Well, here you have hundreds, I'm not sure if thousands of PWAs organized by topic, AI. PWA is Claude as an PWA. So actually, to Get the PWA, to Install the PWA, it just Launch the Web App, so it opens the URL, and then you can Install it from here, okay?

[00:05:14]
So you need to Install it from the URL as of today. So a store.app, then it's a PWA store. So if you are in the PWA that you want Install for Safari on the Mac, you go to File. Actually, it's not so interesting as it is with Chrome.

[00:05:41]
It doesn't say Install. You still need to use the Add to Dock. That's the term, Add to Dock, okay? And Add to Dock, to be honest I don't like the term because it's not adding the app just to the Dock. First, because it's not true. It's not just adding to Dock, okay?

[00:06:01]
Also, because it's adding the app in the applications menu and it appears everywhere, not just in the Dock, okay? But anyway, they call it Add to Dock for some reason. Let's take that for desktop. We will see this in our web app later with more details. But let's talk about the MobileSpace now.

[00:06:21]
So let's start with Android. So I will open now Android Studio. So I will open one from here. Let's open this Pixel XL version of 34. So I have an Android phone here, I can open Chrome. Welcome to Chrome, I will use it without an account. This is like opening Chrome for the first time.

[00:06:44]
They want to say notifications, yeah, blah, blah, blah. And I can open Squoosh, for example.
>> Maximiliano Firtman: And we see also its theme. We have the Install button here, which looks pretty cool. If I click on the Install button, or if I go to the menu, I also have the Install app menu item, okay?

[00:07:07]
So on Android, I can click Install, and I have this installation dialog that looks like a Play Store installation dialog. I will say, I have the screenshots, I can say, yeah, okay, let's do that. Let's Install the app. I will Install the app on Android, and now you will see in the notifications area.

[00:07:28]
>> Maximiliano Firtman: Notifications section, no. You will see this dialog saying that you wanna Install the app.
>> Maximiliano Firtman: And, by the way, you can see that the icon, it doesn't look so nice. We will see how to solve the problem and why this emulator is using that icon. But forget about that, we will get the nice icon in a second.

[00:07:53]
I can open the app, it has a screenshot that you see as a splash screen, and then I have the app running on Android.
>> Maximiliano Firtman: And also, you can see I'm not lying that it's separate you from Chrome. I can kill Chrome and the Squoosh app is still there.

[00:08:13]
So it's actually an app. I can post the app, so it looks like an app on Android, okay? So that's Android. Now, talking about iOS, I will open the iOS simulator, and I will open a simulator for iOS 17. For example, let's open an iPhone 15 Pro. So I will open Safari, same app if you want Squoosh.

[00:08:41]
And when I'm here in Safari on the iPhone, I can go to share,
>> Maximiliano Firtman: Then Add to the Home Screen,
>> Maximiliano Firtman: And then Squoosh, okay? The icon, I have two actually. If I open this now, it's rendering a Squoosh as its own app. And maybe you're thinking, but that's a short cut, that's a bookmark.

[00:09:08]
It's just opening Safari. Well, actually no, it's not Safari. It's its own app is running as Steve Job was saying, it's running its own sandbox completely outside of Safari, and it can work offline. So I can open this, and because its client-side it doesn't need the cloud, it can work offline.

[00:09:33]
You can just convert images locally in your iPhone without connection, okay? Makes sense? So that's actually a PWA running on most of the platforms. So you see how you Install them and how you use them. So that means that for now we Install PWS from the browser. So to Install the PWA, the user needs to go to the browser.

[00:09:57]
And from the browser, you need to get to the browser once, the user will Install it in different ways.
>> Speaker 2: I guess I had a question just about The Open Web App Store, because I saw that there were ratings. Can anyone just add their PWA or web app to the store?

[00:10:18]
>> Maximiliano Firtman: So on that store, yeah, you can. First, some of the PWA that are there were actually added manually by the company. And if you're the owner, you can go and claim that record. You can claim that you are the owner of that app. But if not, there is a form.

[00:10:37]
It's free, and you go and you can say, I have a PWA will I be in your store. And, yeah, it's kind of an index, PWA index, kind of Yahoo from the 90s, okay? But in PWA form. I wanna show you before getting into the next section, I wanna show you this PWA.

[00:10:58]
So this is iOS. So I'm in the iOS, I mean iPhone, okay? And this is trygalaxy.com, trygalaxy.com. It's a PWA, but different. First, it's a PWA that renders completely different in the browser or as an Install app, okay? That was one of the questions that we have from the chat.

[00:11:23]
And if you look at the bottom, it's actually saying, tap this icon below and then Add to the home screen. And we have this little animation saying, hey, hey, that's here. You need to Install it from here. So it's asking me to Install this from here. And, by the way, this is a PWA that is targeting only iPhones, and you will see why.

[00:11:44]
So then let's do that. Let's Add to the Home Screen. And when I do that, now I have the Try Galaxy app on my iPhone. So what's the idea of this app? If I open this, you can see here the power of a web app installed on iPhone.

[00:12:02]
If I open Try Galaxy, what you will see, well, first, welcome, I will say, yeah, I accept the terms, blah, blah, blah, blah. And when I'm done, what I see is an Android UI running on my iPhone. So the idea, this is a Samsung PWA that is selling iPhone users the idea of buying a Galaxy.

[00:12:26]
So before buying you a Samsung Galaxy device, go and try it on your iPhone. So now I can try it. I have notifications, so you can go and see. You can try on your real iPhone the smoothness of the app. You can try to call, you have the back button, you have everything that has in your Galaxy running directly here.

[00:12:48]
So you can try several things. Well, this is a PNG you can open, then PNG with something. You have the menu, all the apps. Of course, it's not a full Android runtime. Could it be, well, maybe with WebAssembly, I've seen some weird things like trying to run an Android directly in WebAssembly on the web.

[00:13:15]
We do have emulators of now for retro gaming consoles we do have, and they are PWAs. We do have Windows 95 running as a PWA, and you can Install it on your iPhone. It's actually running on top of WebAssembly. So it's actually, it's real Windows 95 running on top of a PC emulator, Intel-based emulator, and so on.

[00:13:43]
But well, this is actually a way that you have to test the power of a PWA, because we are still actually in an iOS application, okay? But in Fullscreen, you actually see an Android Galaxy. Think about this, can this app be in the App Store? No, of course, Apple is not gonna approve that app in the App Store.

[00:14:04]
But as a PWA, Samsung doesn't need Apple's permission, it's just a web app.