Shopify_app: Safari ITP cookie screen UX problems

[nwtn]

• [ ] the current screen asking for authentication is not responsive on mobile
• [x] ~the auth screen/ITP flow shouldn’t happen at all in shopify mobile, only browsers~ apps should be able to solve this by upgrading to shopify_app 9.0.2
• [ ] the copy is sometimes not showing up in English (need reproduction steps cc @darrinhenein)
• [ ] the copy explicitly mentions third-party apps, even for Shopify-built apps

[nwtn]

cc @adamwillking for the copy

[amythibodeau]

@adamwillking Just a note that this is a high priority fix. Our POS channel is getting a lot of attention right now and this experience is pretty jank.

[darrinhenein]

I was able to reproduce the German language UI just by opening the channel in Shopify Mobile on my Canadian-localized iPhone X, nothing more specific.

Also want to confirm that there is no workaround to this screen? Can we provide a custom version for POS or specific first-party apps?

[ragalie]

I wonder if the user agent has changed for Shopify Mobile in a way that shopify_app isn't supporting (or maybe shopify_app isn't on the latest version of browser_sniffer?). I'm pretty sure we set this up so that this screen never appears in Shopify Mobile since ITP doesn't apply in the WebViews it's using. cc @francinen

[darrinhenein]

iOS 12.2

[ragalie]

Ok I'm pretty sure a bump to browser_sniffer will significantly decrease the incidence of this since it'll stop this showing up in Shopify Mobile: https://github.com/Shopify/browser_sniffer/commit/7de9740c2a6516315bd456b3d42e21e350410f4d

I'll do that right now and open a PR.

We'll should also add a caution tape bot that reminds people to update browser_sniffer in both core and shopify_app when they update it.

[ragalie]

OK, I opened that PR. After we force the version upgrade here, each app that uses shopify_app needs to upgrade the version of shopify_app they're using.

@nwtn I'll get reviews on this PR, can you own cutting a new shopify_app release after the PR goes in?

[francinen]

Thanks, @ragalie!

As for the responsive behaviour, can we double-check if the breakpoints we initially included are being applied (E.g., https://github.com/Shopify/shopify_app/pull/647/commits/47f921af74fab6fe5a1d85701df81f23188fcb52#diff-76cd9c528badf5d6f9be38534035819eR19)?

[francinen]

And to clarify what we mean by "third-party apps", the existing content does not use the Shopify definition of "third-party apps"; ITP is concerned about domains accessing cookies in a third-party context. The updated content should distinguish Shopify's definition of third-party apps from ITP's functionality of blocking access to cookies in a third-party context.

[andrewlo]

Question: this ITP page affects apps running inside an iFrame in Safari right?

Would this project https://vault.shopify.io/projects/8129 to run apps directly in the Shopify Mobile app instead of in an iframe remove the need for this screen inside the Shopify Mobile app? (it would still show up on a mobile browser though)

[andrewlo]

Another problem with this page is that, in Shopify Mobile app, if you go to "Store" -> "Point of Sale", it shows a menu linking to "Setup" and "Overview", the two pages in POS Channel.

However, when you click "Overview", you get the ITP screen show above. But when you click "Continue" it actually brings you to the Setup page (at the root URL "/") instead of the Overview page. Shouldn't this page know which URL the user was trying to access, and redirect back to that URL after?

So it seems like users won't be able to access the Overview page (a new page on POS Channel) from Shopify mobile, even after getting through the ITP screen

cc @rahilvirani

[ragalie]

The ITP page shouldn't be showing in Shopify Mobile. The PR we're working returns us to expected behaviour of not showing that flow. So I don't think this will be an issue in the mobile app anymore.

If this behaviour is also true in other contexts it's something to look into further but may have an app-specific fix.

[andrewlo]

OK great, thanks!

[nwtn]

the update to shopify_app with the updated browser_sniffer is now live: https://rubygems.org/gems/shopify_app/versions/9.0.2

apps and channels using shopify_app should upgrade to this version to prevent the ITP screen from showing in shopify mobile. (this likely won’t solve the other issues.)

[andrewlo]

^ Just got that in mobile Safari on iOS (my language is set to English). I'm guessing that screen is also from Shopify App gem?

[nwtn]

Can someone share 🎩 instructions to get the ITP screen?

[ragalie]

For me it happens pretty consistently when loading the admin in a browser on iOS and then opening up an app using shopify_app.

[nwtn]

Looks like the main problem causing the responsiveness issue is that we’re missing a <meta name="viewport" content="width=device-width, initial-scale=1"> in the head of the ITP files. I can do a PR to fix that and see how far it get us.

[nwtn]

737 should fix responsiveness

[ashchristopher]

@ragalie What do we do about 3rd party applications that are using shopify_app gem?

[ragalie]

They'll need to upgrade to a recent shopify_app version. We published some information about this a while ago and sent out an email: https://help.shopify.com/en/api/guides/itp-impact

I don't know if we've done more outreach recently, @nwtn would have better information on that.

[adamwillking]

Just a quick update on my end:

• Today I'll produce some copy as a more immediate clarification fix
• Next week I'll do a deeper dive into this flow and see how we can improve the content/flow more holistically.

BRB

[nwtn]

I don't know if we've done more outreach recently

We have not. Once these issues are resolved we can look into the best way to communicate this to partners. We may have to also do point releases on shopify_app 8.x for partners who aren’t ready to adopt API versioning.

[andrewlo]

@ragalie @nwtn On web (desktop Safari), I still see that if I try to go to the Overview page in POS Channel from the Admin side nav, after the ITP screens to enable cookies, it always goes back to the Setup page (root page in POS Channel).

Is it possible for ITP page to remember where the user was trying to get to (through URL param like the login pages) and then go straight to that page, rather than always going to the root URL of the app?

Otherwise, it will be even more difficult for a user to go to a specific page within the app or channel.

Thanks!

[nwtn]

@andrewlo i saw a PR go through…somewhere…to handle that behaviour. Is that resolved?

Where are we at for the other problems described here?

[andrewlo]

@nwtn this PR seems to fix that issue https://github.com/Shopify/shopify_app/pull/664

[joshreeves]

@andrewlo @nwtn - Updated #664

[sergey-alekseev]

the copy is sometimes not showing up in English

Might be related to https://github.com/Shopify/shopify_app/issues/635.

[emilybulger]

FYI, recently received the "surprising display of this page in a language other than my system settings" that @darrinhenein originally mentioned here in May. (in my case, Desktop, Firefox)