Progressive Web Apps

[00:00:00]
>> I'm going to talk about OS integration. Not about hardware, it's more about how we can integrate and make things better from our website or web app to the operating system. So first, we're going to start talking about how to manage Windows. And by the way, some of the things that we will see here, if not most of the things, are suitable for installable PWAs.

[00:00:28]
So web apps or websites that you install and then when you install them, they look and act like any other app in the system. So just quickly, in case you haven't played with that, You have a full workshop, a full course here at Frontend Masters that I delivered on PWAs, goes from a scratch a progressive web app.

[00:00:55]
But just to show you one in action, let me try for example a Squoosh. So when I'm going through Squoosh, Squoosh is a web app that will let you convert images betweenn formats. You can drag and drop an image in JPEG or PNG or pick one of these images from here.

[00:01:14]
And it's an editor where you can compress these and convert these even to new formats such as WebP or AVIF, and then you download this. And here you will see how much how much space did you save from the original one. And you can see here the quality, if it's the same or not.

[00:01:33]
Anyway, it's a web app, it's pure JavaScript, and everything is client side. It's not like it's uploading the images to a server. Everything is JavaScript. And all the codec and decodec part is web assembly natively, but there is something different here. We have that icon in Google Chrome and also I have an install in Squoosh menu.

[00:01:59]
So if I click on both, I can install an app. Is it coming from the Store? Nope. If I install the app, now I have an Squoosh app directly in my computer. It has its own title bar. It appears in the operating system as Squoosh not as Chrome.

[00:02:23]
And the Alt tab as was well, and it appears here. On Windows, it's in the Start Menu or Start Screen, and it looks like any other app in the system. And it's not just on desktop, it also works on mobile. So I can open an iOS simulator. So for example, I'm here, On iOS, I will go to a squoosh.app, and I can install on iOS through the Share screen, add to Home Screen.

[00:03:01]
And now I have an icon on the Home Screen that I can open. And it's full screen. I'm not in Safari anymore. And it looks like this Squoosh app, not Safari. Did it come from the App Store? No. In fact, I can publish apps for iOS or iPad iOS, they're not following the rules of the App Store.

[00:03:25]
That they don't need to follow the rules, such as business rules, okay? It's just a website with some kind of asteroids that was installed, it can work offline. And now at the OS level, it looks like any other app in the system. Something similar for Android. Let's go to Squoosh.

[00:03:44]
The same app, the same PWA. When I'm here, first, you can see there is an Install button directly in the HTML. I can click the Install button and I have a very nice install dialog, I can see the screenshots, and I can hit install. And now it's installing the app.

[00:04:05]
This is actually compiling an APK, an Android package on the Cloud for me. And when it's done, I will get the notification that is done. And I will receive the Squoosh app installed there. I can search for Squoosh. It's there, and I can open the app. And it's an Android standalone application now, as with iOS.

[00:04:30]
It looks like the Squoosh app. That's a progressive web app, okay? It's a website that is using other capability API's that we didn't go over today to make that work. Do you have any quick question on that before moving on?
>> There's a lot of apps that sometimes are not available on the Apple App Store, why do you think they're, they don't have an APK like this if it's, this looks like a simple thing for users to do as well.

[00:05:03]
>> So [COUGH] the question is around why don't we see more pWS out there. I think you have to do a lot there, I think there are two reasons. The first one is that, it's a business decision. So a lot of people, they can get more business, let's say more bad business from the App Store.

[00:05:22]
So they can track you more, okay? The thought they prefer, I mean, TikTok has a PWA, Twitter has a PWA. But they also have the native apps, and they promote the native apps not the PWA. And the PWAs are pretty good, they're pretty performant, they have the same services, but, yeah, they cannot listen in the background what you're doing, there are a lot of things that they cannot do as a PWA.

[00:05:47]
So it's there, they're pretty good, but from a business decision, they prefer to promote the App Store version. And that's not for all the companies. There were also problems with PWAs and Apple. By the way, Apple kind of invented the PWA idea, but that was before they created the App Store.

[00:06:07]
Steve Jobs promoted the idea without that name, it was called Home Screen web apps, but it was just the same idea. In fact, Chrome cloned that idea and improved that idea, but Apple for a while, for many years, maybe the last six, seven years, they didn't promote that a lot.

[00:06:29]
It was very buggy, and they were not implementing some API such as Web Push that was kind of must for PWA. A lot of us were saying, if I don't have push on iOS, then I'm not going to spend too much time on that. So I think that that's another reason because a lot of companies didn't make the decision to go fully on PWA's.

[00:06:52]
Now we have Push on iOS, and now the engine is becoming better. And Apple is like working on the problems. We'll see, okay. But, yeah, it's more around business, it's not a technical decision. But it's also true that users sometimes don't know about this. Maybe they shouldn't care, okay, but they don't know that you can install an app from a browser.

[00:07:18]
Okay, well now you know. And now we are going to see, most of the time, is our advantages that we have when we are PWA.