Uncovering the secrets of Progressive Web Apps

You probably know what a Progressive Web App is but you probably don’t know what challenges do we need to face to see them as a real alternative for app-like experiences. In this session, we will uncover today’s secrets on PWAs that you must know to create a successful experience for your users looking for a fast and reliable app solution.

We’ll introduce the current state of PWAs including the latest iOS and desktop support, and we will get deeper into real challenges, such as the In-App Browser inside Facebook, the Android’s WebAPK system and how to get our PWA into stores, including official support on Microsoft Store, the usage of Web Trusted Activities for Android’s Play Store and solutions for iOS and mac AppStore, including the new Capacitor framework to create native PWAs.

is transferring lot of meta tags to support other versions of iOS, all the versions of Chrome.

To support QQ browser, have you heard of QQ browser, a Chinese browser, but the problem is that that will lead to a lot of problems.

A lot.

So my recommendation is that article.

You shouldn’t use that library.

Okay, this is the section of making friends, (audience laughs) but basically you shouldn’t use that library. So we need to find an alternative to create those launch images if you want.

Because that part is fine, but the problem is that it came with all the other that is giving you UX issues.

So the other solution that you have for iOS is to just remove for it.

So before iOS was supporting serviceworkers and webmanifest, it was simple because supporting iOS was something that you needed to opt in.

So basically you don’t opt in, you don’t have support for that.

But now, if you have a webmanifest, if you’re a PWA, iOS user will be able to instal them and you can’t say no to iOS unless you do, unfortunately, I’m sorry about this, server-side user agent sniffing.

Starbucks started to do these two weeks ago. So now, if you go to starbucks.com, that’s the webmanifest on Android, or Windows, on desktop, on KaiOS, and many others.

So display standalone.

If you change the user agent to iOS, it’s display browser. So you will get an icon if you add it to the home screen, but that icon will not open a standalone app, but the browser, okay? I think Uber should be doing the same thing. For Twitter, maybe.

The problem is if you’re using two-factor authentication, it’s a problem.

If you’re not using two-factor authentication, you should.

But anyway, then it will work.

They can solve the problem.

I think Twitter can solve the problem without opting out from iOS.

But on Uber might be trickier to get it supported. So on the last part I have here, in terms of Secrets, is about app stores.

Because I’m probably sure that if you have ever tried to convince someone about PWAs, usually the term store appears at one point. Like, ah, but I have an app on the store already, or my customers will look for my app on the stores. Okay and it’s a fair question.

Because users are currently used to download apps from the store.

Maybe in five years, might be different, but right now it’s exactly what’s going on. And probably you have heard that there are a couple of PWAs in the Google Play Store, such as Twitter Lite, Google Maps Go, Instagram Lite, for example.

So they are currently in the Google Play Store and they are PWAs.

But there is a trick here.

They’re using the WebView.

So like Cordova or or the hybrid approach, and they have a lot of native code.

So the UI it’s HTML, CSS and JavaScript.

But all the other things from permission and push notifications is basically Java or Swift, (mumbles) but its native code, okay? And yeah, that’s not too weary.

We don’t like that because also it has a lot of work. So first you need the expertise of a native developer to do that.

So fortunately, some solutions are appearing for Android. The solution is known as trusted web activities. That’s coming on from 69, so on the next version. So later this year.

This is TWAs.

This is a kind of solution from Chrome.

For me, if you ask me, Google Play Store should have a place with published PWA.

You type the URL, that’s all.

Because they’re already creating an APK.

So they are there.

They don’t wanna do this, I guess.

This is not information but my guess, because I don’t see any technical issues.

But yeah, the Chrome team came with this solution where you can create an APK on your own, with Android Studio, with just three lines of Java, okay? That APK will contain just the icons of your app, and a certified URL, you need to certify that you are the owner of that URL so that you are the owner of that PWA, and then you publish that to the store.

So you’re not going to embed your HTMLs, your JavaScripts and your resources in the APK in that package.

It’s just a launcher that will launch Chrome in a standalone mode.

So with this, then, you will be able to distribute your PWA in the store as well as from the browser.

And even if you have a native app and your company is not, it’s not supporting that app anymore, there a lot of abandoned apps in the store, you can even upload an upgrade to that native app with the same package ID.

And basically all your users will update the app and will get the PWA from that moment.

Okay, so that will happen soon.

So today then, you can distribute PWAs in the Microsoft Store for Windows.

You need to also create an pie cache for that and EPPX. You have a web site known as PWA Builder to do that if you want.

KaiOS, it’s has in the store that is coming, that’s the feature phone.

Well, Play Store is coming with Trusted Web Activities. And what about the App Store? Well, here you need to use the WebView unfortunately. And the problem is that the WebView in iOS doesn’t support service workers, so you need to trick that.

So it’s still a problem for PWAs in the App Store for iOS. So PWAs are great.

Give me a P, give me a W, give me an A.

But let’s try to use a critical eye here and try to see the problems and try to push changes. Because if we want to compete with native platforms, okay, we need to offer a good solution.

And there are a couple of points, as you can see, where we are not offering a good solution.

And that’s a problem for our user experience. So we need to always remember our goal.

We have very simple goals when we are developing for the web.

So a good, accessible, performant user experience, because basically the goal is finally your user. And with these problems sometimes okay, we are like forgetting about our goals, or our unique goal, that our user.

That’s all.

Thank you.

(audience applause) (electric music)

Join the conversation!

Your email address will not be published. Required fields are marked *

No comment yet.