Amphtml: Feature detection on IOS

[FaberNa]

What's the issue?

Feature Detection IOS, and Android. Amp page doesn't distinguish beetween android or ios browser and apply always rule for android.

How do we reproduce the issue?

Create AMP page that have a different rule for android and IOS, i.e setting certain value for an attribute if is Android browser and other if is a IOS browser.
And do this step :
1) call amp page from IOS device
See that value used is the values set for Android device and not for IOS mobile ( this is because, i think AMP use google cache and use always android browser ) ..
For reproduce using an iphone or IOS device and call
https://www.google.com/amp/s/m.paginegialle.it/amp/tende-da-sole/vergiate/alessiovelati
if you click on "Navigatore" it show protocol for android and not for IOS ( SSR code is correct )

What browsers are affected?

All IOS browser

Which AMP version is affected?

amp-runtime i-amphtml-version=011525461683159

[jpettitt]

AMP does not provide iOS / Android feature detection. Only one copy of the content is stored on the AMP cache.

It looks like you are opening different apps for mapping based on the device type. The best solution here would probably be to add the device type to amp-dynamic-css-classes and then display the appropriate link.

[jpettitt]

cc @jridgewell

[jridgewell]

Yah, adding it to dynamic css classes sounds fine to me.

[FaberNa]

Wait a second, but if i use amp-dynamic-css-classes it sounds that i can recognize from what subdomain the request come from

One or more referrer classes will be set, one for each level of subdomain specificity

Then how can I recognize with rule ( not mediaquery ) if i use IOS browser ?
If amp page was served from amp cache, is possible to have a client side code like this :

  if (navigator.userAgent.indexOf('Android') != -1) {
                                <<show component for Android>>
                            }
                            if (navigator.userAgent.indexOf('iPhone') != -1) {
                                <<show component for IOS>>
                            }

Are there any solutions with existing amp component ?
Thanks

[gilbertococchi]

+1 to that!

It would be nice to be able to use Amp-State to define the 2 URLs, one per Android and another one per iOS, and detect the USER_AGENT indexOf "Android"/"iOS" and dynamically update the A HREF Attribute.

[gilbertococchi]

A similar usage of Expression and Amp-Bind state would be interesting to use: Test

[jridgewell]

/cc @choumx

[jpettitt]

@FaberNa With dynamic css you just have both components on the page and use display: none to hide the one that's not applicable.

[FaberNa]

Yes, but in this manner I should use media query for detect if is IOS or if is Android. I don't think that is a good idea

[choumx]

One option is to use amp-list and perform UA detection on your server. You can also do this with amp-state to expose this variable to amp-bind.

[FaberNa]

Thanks @choumx, but i develop the solution with amp list. But i'm so curious how to implement it with amp-state anche amp-bind, can you show me ? Thanks

[choumx]

Same way you did with amp-list. <amp-state src="...">