amp-app-banner: doesn't open itunes store

[sebastianbenz]

Clicking on the banner action button doesn't open the iOS App Store if the app isn't installed (deep links into the app work).

How do we reproduce the issue?

1. Open this link in Safari on an iOS device that hasn't got the Medium app installed.
2. Click on "View in App"

The following error screen appears:

(The screenshot is from the emulator but it's the same behavior on a real device)

[sebastianbenz]

//cc @ericlindley-g @mkhatib

[ericlindley-g]

That's bad — we QA'd this pretty extensively. Is this just in the cache context, or outside as well?

[sebastianbenz]

Just in the cache context.

[ericlindley-g]

I can also repro on Chrome and Safari, with the viewer link (as opposed to the AMP Cache link in step 1 of the original repro steps. The AMP Cache link works as expected for me)

Hard to debug in Chrome dev tools because it's not a straightforward anchor link. @mkhatib , can you take a look?

[sebastianbenz]

Thanks Eric - I accidentally posted the wrong link. The viewer link is the one that's failing.

[mkhatib]

I am able to repro. It looks like unfortunately on Safari the hack we have for redirecting to the app store is broken due to win.top.location.assign being undefined due to a security measure that seems to only happen on webkit.

The quick way to fix this is to use .replace instead of .assign. Which is weirdly available.

Usually browsers blocks access to different origins frames location for read-access only but would still allow write-access, in this case .assign not available is probably a bug in webkit.

Looking some more.

[mkhatib]

Filed a bug for webkit.

@dvoytenko are we ok with using normal win.top.location.href = url assignment? This seems to work as expected (for normal URLs, haven't tried it for custom URLs). Otherwise, we'd need to use .replace - which I don't like because it'll kill the back state - although this might be ok in this case since this would just open app-store and not navigate away to a new URL.

[dvoytenko]

I'm ok with direct assignment if it works :) Sort of surprised that would work on cross-origin iframes, but if testing shows that it does - that's all I need.

[ericlindley-g]

@mkhatib You're probably already on top of this, but we'll definitely want to test inside the AMP viewer context when served from the cache — let me know if you need any testing help.

[mkhatib]

Unfortunately this is two folds. Assign is only part of the problem. I am testing this and even when using .href = url or .replace I am unable to get the top navigation in a timeout from the iframe.

I could swear we have tested this before and it used to work, but there are many elements here (iframe'd or not, same/cross origin) that I am not sure that we tested all these combinations.

I am still trying to figure out how to work around this 😞 will keep experimenting and testing and report back

[dvoytenko]

We always have an option to create viewer message that will ask viewer to perform this redirect.

[ericlindley-g]

@dvoytenko Agreed, though I would really push to have a full solution in the document, to avoid creating a dependency on viewer functionality.

[dvoytenko]

Sure. It has to be best effort and we can delegate to viewer under a viewer flag.

[mkhatib]

Ok, more experimentation results.

Looks like window.top.location.href = assignment works for any normal URLs but fails to do anything when setting to https://itunes.apple.com/us/app/id828256236 URL 😢

The same behavior exists for any custom URL with the app installed (like medium://).

Unfortunately, I've tried lots of combinations but seems like the timeout hack won't work for cross-domain top navigation... The only thing that seems to work in a timeout are:

1. win.top.location.href = normal-links (e.g. https://example.com) (CROSS ORIGIN script, iframe, top and target link)
2. win.top.location.replace(appstore) - SAME ORIGIN (script, iframe, top) - This was the reason why we didn't catch this early on in testing, we were testing on same-origin with replace

Unfortunately #1 would have worked except that Safari seems to treat itunes URLs as custom URLs and fail to load it on cross-origin href assignment.

So going forward I only see two paths:

• Add a viewer dependency message to allow this workflow to work
• Just drop the redirect-hack on iOS and fallback to two links - install and open

@ericlindley-g how should we proceed?

For completion, these work in a non-timeout Cross Origin navigation to the top:

• win.open(appstore, _top)
• win.open(applink, _top) if app installed - alert error if app not installed.

[mkhatib]

FYI webkit marked the bug I filed as won't fix - WAI, which makes sense. But I filed a follow up bug on specifically their inability to handle itunes links on iOS Safari.

[mkhatib]

Just a quick update, I have not figured out anyway to get this to work. @ericlindley-g let me know if we should proceed with a two-button solution?

[km-newsday]

I am implementing amp-app-banner (a wrapper and minimal UI for a cross-platform, fixed-position banner showing a call-to-action to install an app) element on AMP pages.

There is this comment from Dec. 15, 2016 on following page.
https://github.com/ampproject/amphtml/blob/master/extensions/amp-app-banner/amp-app-banner.md

(Dec. 15, 2016) Note: We have discovered an issue with going into the holiday code freeze. Banner links are not forwarding correctly to the app store on iOS inside the AMP Viewer context. We have issued a temporary mitigation to hide the banner in iOS inside the AMP Viewer, until we can launch a proper fix after the code freeze. Thanks for your patience!

I would like to know if the fix is made for the issue where banner links are not forwarding correctly to the app store on iOS.

[mkhatib]

@km-newsday unfortunately we still haven't fixed this on iOS, so if the app is not installed it won't redirect to the appstore.

We're still working on an implementation to fix this, no ETA yet.

[km-newsday]

Thank you Mohammad for your quick response. Thanks, Kavita From: Mohammad Khatib Reply-To: ampproject/amphtml Date: Friday, January 20, 2017 at 2:36 PM To: ampproject/amphtml Cc: Kavita Mehta, Mention Subject: Re: [ampproject/amphtml] amp-app-banner: doesn't open itunes store (#6454) @km-newsday<https://github.com/km-newsday> unfortunately we still haven't fixed this on iOS, so if the app is not installed it won't redirect to the appstore. We're still working on an implementation to fix this, no ETA yet. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#6454 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AYFXOAGXfEyH9dXN_j0ZOg-9NONWpZKoks5rUQzDgaJpZM4LCRxe>.

…

-------------------------------------------------------- The information transmitted in this email and any of its attachments is intended only for the person or entity to which it is addressed and may contain information concerning Altice USA and/or its affiliates and subsidiaries that is proprietary, privileged, confidential and/or subject to copyright. Any review, retransmission, dissemination or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient(s) is prohibited and may be unlawful. If you received this in error, please contact the sender immediately and delete and destroy the communication and all of the attachments you have received and all copies thereof. --------------------------------------------------------

[km-newsday]

Since “amp-app-banner” component’s Availability is now Stable, I tried to implement it on AMP pages for https://www.newsday.com/. I followed all the steps, as mentioned here: https://github.com/ampproject/amphtml/blob/master/extensions/amp-app-banner/amp-app-banner.md 1. Imported the amp-app-banner component. <script async custom-element="amp-app-banner" src="https://cdn.ampproject.org/v0/amp-app-banner-0.1.js"></script> 2. Declared the iOS app in the meta data. This enables Safari's build-in app install banner as well. <meta name="apple-itunes-app" content="app-id=358571317, app-argument=https://itunes.apple.com/us/app/newsday/id358571317?mt=8"> 3. Added amp-app-banner <amp-app-banner layout="nodisplay" id="demo-app-banner-2134"> <div class="content"> <amp-img src="$logoSrc" width="40" height="34"></amp-img> <div class="description"> <h5>Newsday</h5> <p>Experience a richer experience on our mobile app!</p> </div> <div class="actions"> <button open-button>Open In App</button> </div> </div> </amp-app-banner> Now I am testing it in Chrome on iOS, I am seeing the app banner but clicking on “Open In App” button doesn’t do anything. Can you please advise if I am missing anything. Thanks, Kavita From: Kavita Mehta <[email protected]> Date: Friday, February 10, 2017 at 9:11 AM To: ampproject/amphtml <[email protected]>, ampproject/amphtml <[email protected]> Cc: Mention <[email protected]> Subject: Re: [ampproject/amphtml] amp-app-banner: doesn't open itunes store (#6454) Hi Mohammad, Just wanted to follow up if you have any update on this. Thanks, Kavita <<<<<< I am implementing amp-app-banner (a wrapper and minimal UI for a cross-platform, fixed-position banner showing a call-to-action to install an app) element on AMP pages forhttp://www.newsday.com/ There is this comment from Dec. 15, 2016 on following page. https://github.com/ampproject/amphtml/blob/master/extensions/amp-app-banner/amp-app-banner.md (Dec. 15, 2016) Note: We have discovered an issue with going into the holiday code freeze. Banner links are not forwarding correctly to the app store on iOS inside the AMP Viewer context. We have issued a temporary mitigation to hide the banner in iOS inside the AMP Viewer, until we can launch a proper fix after the code freeze. Thanks for your patience! I would like to know if the fix is made for the issue where banner links are not forwarding correctly to the app store on iOS.

>>>>>

From: Mohammad Khatib Reply-To: ampproject/amphtml Date: Friday, January 20, 2017 at 2:36 PM To: ampproject/amphtml Cc: Kavita Mehta, Mention Subject: Re: [ampproject/amphtml] amp-app-banner: doesn't open itunes store (#6454) @km-newsday<https://github.com/km-newsday> unfortunately we still haven't fixed this on iOS, so if the app is not installed it won't redirect to the appstore. We're still working on an implementation to fix this, no ETA yet. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#6454 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AYFXOAGXfEyH9dXN_j0ZOg-9NONWpZKoks5rUQzDgaJpZM4LCRxe>.

…

-------------------------------------------------------- The information transmitted in this email and any of its attachments is intended only for the person or entity to which it is addressed and may contain information concerning Altice USA and/or its affiliates and subsidiaries that is proprietary, privileged, confidential and/or subject to copyright. Any review, retransmission, dissemination or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient(s) is prohibited and may be unlawful. If you received this in error, please contact the sender immediately and delete and destroy the communication and all of the attachments you have received and all copies thereof. --------------------------------------------------------

[ericlindley-g]

/cc @muxin @aghassemi

@km-newsday , can you tell us what context you're testing in? Is this on the origin (pub.com), through an AMP cache (cdn.ampproject.org), or through an AMP viewer (e.g. google.com/amp/pub.com)?

Also, if it's in an AMP viewer, can you say if it's on the web or in an app? (e.g. Google News & Weather or Google Web Search)

[km-newsday]

Hello, A: I am testing it in stage environment in Chrome (browser app) on iPhone with origin https://stage.newsday.com/amp/entertainment/tv/carol-burris-former-li-principal-takes-post-with-education-advocacy-group-1.10719527 B: I am not sure how to test through an “AMP cache”. C: I also tried https://www.google.com/amp/s/stage.newsday.com/amp/entertainment/tv/carol-burris-former-li-principal-takes-post-with-education-advocacy-group-1.10719527 Is this what you refer to as “AMP viewer”? I tried this in it in Chrome (browser app) on iPhone. This gives me following Redirect Notice. <<<<<< The previous page is sending you to https://stage.newsday.com/amp/entertainment/tv/carol-burris-former-li-principal-takes-post-with-education-advocacy-group-1.10719527. If you do not want to visit that page, you can return to the previous page.

>>>>>

In both A and C scenario, I am seeing the app banner but clicking on “Open In App” button doesn’t do anything. Thanks, Kavita From: ericlindley-g <[email protected]> Reply-To: ampproject/amphtml <[email protected]> Date: Thursday, May 11, 2017 at 11:13 AM To: ampproject/amphtml <[email protected]> Cc: Kavita Mehta <[email protected]>, Mention <[email protected]> Subject: Re: [ampproject/amphtml] amp-app-banner: doesn't open itunes store (#6454) /cc @muxin<https://github.com/muxin> @aghassemi<https://github.com/aghassemi> @km-newsday<https://github.com/km-newsday> , can you tell us what context you're testing in? Is this on the origin (pub.com), through an AMP cache (cdn.ampproject.org), or through an AMP viewer (e.g. google.com/amp/pub.com)? Also, if it's in an AMP viewer, can you say if it's on the web or in an app? (e.g. Google News & Weather or Google Web Search) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#6454 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AYFXONATFlHhQIK-hcckmkSNtFpkgBw3ks5r4yWFgaJpZM4LCRxe>.

…

-------------------------------------------------------- The information transmitted in this email and any of its attachments is intended only for the person or entity to which it is addressed and may contain information concerning Altice USA and/or its affiliates and subsidiaries that is proprietary, privileged, confidential and/or subject to copyright. Any review, retransmission, dissemination or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient(s) is prohibited and may be unlawful. If you received this in error, please contact the sender immediately and delete and destroy the communication and all of the attachments you have received and all copies thereof. --------------------------------------------------------

[aghassemi]

@ericlindley-g dup of #9077

[ericlindley-g]

Thanks @km-newsday and @aghassemi — closing this bug as a duplicate of #9077, but we're looking into it and will update there when a fix is in.