Using the download button to open the resulting .hex file in the micro:bit app does not work when MakeCode is embedded as an iframe.

[microbit-robert]

Describe the bug When using an embedded version of MakeCode using Safari (Request Mobile Version) on an iOS device, the download button displays the “Download ready…”. When clicking “Download” again to “to open the micro:bit app”, nothing happens. This can be observed in the MakeCode tutorial tool.

To Reproduce

1. Go to https://makecode.com/tutorial-tool
2. Click on download button
3. Click on “Download” to open the micro:bit app
4. Observe that nothing happens

Expected behavior The micro:bit app (if installed) should open with the MakeCode project selected.

Screenshots N/A

micro:bit version (please complete the following information): Not hardware related.

Smartphone (please complete the following information):

• Device: iPad
• OS: iOS v15.6.1
• Browser: Safari

[abchatra]

This is interesting issue. @martinwork can this be done somehow in iOS? Is there way operating system provides to notfify the right app?

[martinwork]

makecode.microbit.com can send directly to the micro:bit app. It does that in mobile mode, or downloads the file in desktop mode. I believe it uses the iOS custom url scheme that the app registers - see mobileSafariDownloadProtocol. https://github.com/microsoft/pxt/blob/5323fb948c4fb482e51e989002351b11db4d4f69/pxtlib/browserutils.ts#L399

The tutorial-tool seems to want to send to the app, since it displays the dialogue saying "Click Download to open the micro:bit app". https://github.com/microsoft/pxt/blob/94c141ce1819444fb49a74b75f08a4ecc8d81117/webapp/src/cmds.ts#L80

When MakeCode displays that dialogue, clicking Download opens the iOS system "Open in micro:bit" dialogue, but tutorial-tool does nothing. Is the URL wrong?

[microbit-matt-hillsdon]

Support ticket (private): https://support.microbit.org/helpdesk/tickets/67940

@abchatra we've just had a support request for micro:bit classroom in this same scenario where on iOS the "Download" action in the embedded MakeCode iframe can't/doesn't trigger opening the MakeCode app.

There seem to be two ways that this doesn't work in modern Safari:

1. The default in recent versions seems to be for Safari to request the desktop version of the site (click "aA" by URL to change) which doesn't try to integrate with the mobile app. I think this also makes detecting Safari client side harder/different than a simple UA check. This approach gives a working download which is quite painful (but possible) to open in the mobile app.

2. When configured to request the mobile version of the page, we hit this issue where the "Click download to open the micro:bit app" button shows but does not work (same as tutorial case above).

When I debug by connecting to iPad Safari I get a logged warning when clicking the button in scenario (2): "The download attribute on anchor was ignored because its href URL has a different security origin."

The URL is: "microbithex://?data:application/x-microbit-hex;base64,OjAyMDAwMDA0MDAwMEZBCjowNDAwMDAwQTk5MDBDMERFQkIKOjIwMDAwMDAwQzAwNzAwMDBEMTA2MDAwMEQxMD…" (truncated by debugger)

Perhaps an iPad Safari iframe security restriction issue of some sort?

It would be a big step forward for micro:bit classroom student use on Safari if we could find a way to address both these cases.

CC @martinwork

[martinwork]

Thanks @microbit-matt-hillsdon

In all cases (normal MakeCode, tutorial tool and classroom) I think there are both Download and Save as file actions.

Would it make sense for Download to send to the app and Save as file to save a file, regardless of the Desktop/Mobile mode? Or does the user need control over what Download does? Should the download dialogue have a save as file escape route?

I could be wrong, but I seem to remember that when iOS didn't have a Files app and a downloads folder, both routes sent the file to the app with a download/save hint in the custom URL scheme, so the app would either just store the file or kick off a flash, but the hint was dropped at some point. I think we updated the app to use the changed MakeCode URLs, so the app might not have that facility now.

[microbit-lucy]

We were just discussing this bug - it has changed since the above discussion and it's only an issue on Safari now.

On iOS, on Chrome you can use MakeCode, MakeCode tutorial tools or join a micro:bit classroom and when you choose 'download' your code you are prompted to press download in a second dialogue to import the code into the app (assuming it's installed). This is what we want to happen and it works perfectly in Chrome.

On iOS, on Safari on the other hand, from MakeCode, micro:bit classroom or MakeCode tutorials, choosing download just downloads the hex file to the device - it doesn't offer the option to open it in the app any more. I wonder whether changing to WebUSB as the MakeCode default has affected this? On Safari as that's not possible it will default to downloading as a file and perhaps that has removed the prompt to open in the app? I might be completely wrong.

[martinwork]

@microbit-lucy With both Chrome and Safari, the behaviour of https://makecode.microbit.org/#editor currently depends on whether you select mobile or desktop site from the ... or AA menu.

[microbit-lucy]

@martinwork - you're right, I've just tested:

With https://makecode.microbit.org/#editor

• In Chrome, I had the mobile site by default and it works fine.
• In Safari, I seemed to get the desktop site by default. When I used the Aa menu to get the mobile site, clicking download correctly takes me to the app.

However, the issue described above still exists in Safari on iOS with micro:bit classroom and the tutorial tool when MakeCode is embedded. When using the mobile site, choosing Download in Safari opens the 'Click 'Download' to open the micro:bit app' dialogue but selecting Download from there does not import the code into the iOS micro:bit app (as described in the bug above). Although this does work in Chrome.

@abchatra this is still causing issues and we'd love to see a fix in the 2024 release if possible.

[abchatra]

@microbit-lucy I get mobile site in Safari on iphone. Can you please write the spec of the iOS hardware you are using?

[abchatra]

Are you saying this issue is only on microbit classroom?

[microbit-lucy]

@abchatra - this issue is with embedded MakeCode so it effects micro:bit classroom but also https://makecode.com/tutorial-tool and other embedded instances of MakeCode.

Re the showing the desktop version in Safari: I've just done some quick research and it turns out that new iPads present the Desktop version of all websites by default: https://www.apple.com/ph/ipados/features/#:~:text=Desktop%20websites,websites%20at%20their%20optimal%20size. You can change it in the Aa menu 'Website settings' but very few people will know that. I'm not sure if there is anything we can do about that? On iPhone, you still get the mobile version by default.