CODEWITHSUNDEEP
androidiosweb-applicationsprogressive-web-apps
TmKVU
TmKVU

Reputation: 3000

Serve a different Progressive Web App UI for iOS and Android

Since PWAs are getting better support on iOS and seems to become an interesting alternative to other mobile development approaches, I was wondering if it is possible to serve a separate UI, e.g. the App Shell, for iOS and Android.

When Russell first coined the term PWA, he stated that the PWA should act and feel as if it is a native application, but native applications differ greatly in terms of UI for Android and iOS (for example navigation methods).

So, in order to have a good PWA implementation, one would have to serve a separate UI for iOS and Android. I am not able to find a resource on how to accomplish this, does anyone have pointers on how to realize this idea?

Upvotes: 1

Views: 297

Answers (2)

pate
pate

Reputation: 5253

You have two options:

  1. Build two versions of the app. Check the user-agent on the server. Depending on the user-agent, make the HTTP server return different versions of the app. This is completely doable and actually happens in the wild. For instance Google home page is different depending whether you load the page on Firefox/Chrome/Safari. In this case you need enough control of the HTTP server.

  2. Build one version of the app that includes both UIs. Then, show different version of the app depending on the user-agent when the app is running.

The second scenario makes the user download code that is unused.

Edit: actually the second scenario doesn't make the user download unused code if you use lazy loading / code splitting.

Upvotes: 2

Robinyo
Robinyo

Reputation: 596

I was wondering if it is possible to serve a separate UI

There are a couple of frameworks / approaches that try to achieve this, for example: The Ionic Framework.

Ref:

An Ionic 3 PWA, Brew: The Craft Beer App, Android:

enter image description here

iOS:

enter image description here

Upvotes: 2

Related Questions