State of the PWA Platform

[00:00:00]
>> I mentioned that a PWA is a website, right, and it works in the web. So, actually, every web browser is compatible with PWA. Even our old friend Internet Explorer, but yeah, when we are talking about PWA compatibility, we are asking about something different. Okay, so, for example, when that PWA is installable and offline capable, that of course that's not IE.

[00:00:28]
Well let's start with mobile, mobile support. So on Android, so, if you have an Android device, you can actually have offline support and installability from most of the browsers in Android. So Google Chrome, Firefox, Opera, Samsung Internet browser, that's the browser that comes by default with Samsung. Devices use the web and Microsoft Edge.

[00:00:57]
So most of these browsers, all of these browser actually support full PWA installation and offline capability. What about iOS and iPad iOS? Well, we are supporting PWAs with Safari and only with Safari. Okay, so Safari, on iPhones and iPads support offline and app installation. Okay, but only from Safari and now it's time to actually see these in action.

[00:01:30]
So here I have an iPhone simulator and also I have an Android real phone. So I have a real phone here with me and you see on the screen a mirror of my Android phone. So, let's see some apps in action and how the PWA experience looks like before actually writing our own.

[00:01:49]
So, I'm going to open Chrome for example, on Android first. And let's write a PWA, so I love coffee, apparently it's something common and if not, it can be also tea, okay. So I'm going to app.starbucks.com, so this is actually in a Starbucks PWA, app.starbucks.com. So when you go there, if you see at the bottom, there is like a little banner there saying, add Starbucks to the homescreen.

[00:02:21]
And we're going to see how to improve that later. Also, if you go to the menu, you will find an install app menu item. Okay, and this happens only on PWAs, so if you go to a normal website, you're not going to see that menu item. So, if you click Install App, it's asking, do you want to install the app?

[00:02:44]
Yeah, this is actually making an async operation. The async corporation is actually compiling an apk. If you have never heard about apk, that's Android package, it's actually an Android application. So, now it says, that you must add it to your home screen, so I already have the notification that it's done.

[00:03:10]
So, now if I go to my home screen I will see a new icon, the Starbucks icon and it's not just in the home screen, I can open the launcher and just find the Starbucks app. And now if I open that icon, it's a full screen application and from an iOS point of view, it looks like an app.

[00:03:31]
I can even kill chrome and my app is still there. Is this a native app? No, this is pure web. This is the same HTML CSS and JavaScript that was rendered before within the browser. And I also wanna show you something else. If I go to settings, Apps, I can see all my apps.

[00:04:01]
And if I scroll here, we're going to find all the native apps. And also Starbucks. And remember, this is a PWA, this app didn't came from the Play Store. Okay, so however I can of course see all the storage that it's currently using, permissions, screen time, battery usage.

[00:04:25]
And I can see at the bottom that it says that the app was installed from the Play Store. That we know that's not true, okay? So however, my phone, this is an Android 12, is actually saying that and if I click there, it goes to the Play Store.

[00:04:41]
And actually, it's not finding the app. So because actually the Play Store is the one that is actually compiling the app for us. We don't need to do anything, we don't need to comply with apps or rules. We don't need to get a publisher account, just by doing everything that we're going to do today, you will get this experience, okay?

[00:05:05]
So, that's Android, now let's jump to iOS. So I have here an iOS simulator, so I will open Safari because the simulator, it works pretty well on this, there are many PWAs out there. Tiktok is a PWA, Google Docs, Google Drive is a PWA, YouTube Music is a PWA.

[00:05:26]
So, we have so many PWAs out there to try, but there is one that probably you know, maybe not, I don't know, we'll see. It's Tinder, have you ever heard of Tinder? Probably not, right? Well, tinder.com is a PWA, so when you go to tinder.com, you can actually install a PWA.

[00:05:47]
So, we don't have this invitation dialogue that we saw on Android and later today, we're going to see how to improve that or how that works. Well, after accepting all the cookies, I can actually press the share menu and I can select Add to Home Screen. And because it's a PWA, we will get an icon on the homescreen and at this point, you are thinking, hey Max, that looks like a shortcut to the website.

[00:06:14]
Well, kind of, because if I open the icon now on my iPhone, now the experience is fullscreen, I have this flash screen. So, I'm not in Safari anymore, and from an OS perspective, it also looks like a separate app, it's in a standalone app. So, I can kill Safari and Tinder app is still there.

[00:06:36]
So, is this a native app coming from the App Store? Nope, this is a PWA. So, I don't need to comply with after rules, I can actually serve these from my web server, that's actually a PWA. Do you have at this point any question on how the experience looks like on Android and iOS?

[00:06:56]
So the question is about user acquisition, so how easy or difficult it is to let our users know that we have a PWA? I guess that's part of the question. So, the answer is without the store, okay, so because remember that we can actually publish it in the store.

[00:07:14]
You actually need to use the same techniques as a website. So, SEO techniques, marketing techniques, it depends on the case, for example, Financial Times in the newspaper, they have a PWA. And well, they use their own newspaper to actually advertise their PWA. They can have like a full page saying, hey, now you can go to app.ft.com, that's the URL and add it to the home screen, or installing from there.

[00:07:43]
But, it's true that this is one of the challenges that we have in this PWA work. Because yeah, not everything is gold here, we also have some challenges and discoverability of PWAs is one of those challenges. Okay, so that's a good question. Later we're going to get deeper on that but have in mind that discoverability is a problem.

[00:08:09]
And maybe the App Store thing that it's not readable for all the apps but the App Store thing comes with that. Okay, and at the end of today's workshop, we are going to discuss that and how that can help. So, that's support on mobile, so Android, iOS, and iPadOS.

[00:08:31]
Now it's time to talk about the desktop because PWAs are not just for mobile devices, they run on desktop. If you have a Chromebook with Chrome OS, you can actually install PWAs. If you have another computer or laptop or PC, with Linux, Mac OS, Windows 7, Windows 8, Windows 10 or Windows 11, you have support for PWA installation from Google Chrome or Microsoft Edge.

[00:09:03]
So, these are the only browsers compatible with PWAs on desktop. Also, we have the store like the Microsoft Store for Windows. Okay, we're going to discuss that later. But talking about the standard installation support, typically we are talking about browser installation, it's Google Chrome or Microsoft Edge. And probably at this point that today Microsoft Edge is based on the Chromium engine.

[00:09:33]
So, it's taking this ability from actually Google Chrome. So, let's see this in action.