Messenger InstantGames - web request works fine on Messenger webpage, but fails when played through Messenger mobile app

Question

I have a game written in TypeScript uploaded into Facebook Instant Games. I have a super simple call to obtain real timestamp from my own server.

I managed to get it working after uploading a build into InstantGames and after facing issues with CORS. I get proper response with status 200.

However, there is an issue with the same request, but from InstantGame played through Messenger app, both on iOS and android. I tried to put as match logs as possible, with no reasonable answer.

I am creating XMLHttpRequest(), when the game is started on desktop browser I finally get:

xhr.readyState == 4 and xhr.status == 200.

I am using https url.

On mobile Messenger, I get only xhr.readyState == 4 and xhr.status == 0.

I also tried with moving from XMLHttpRequest() into fetch(), same behavior - on desktop browser it works fine, on mobile I get:

I/chromium(22226): [INFO:CONSOLE(0)] "Uncaught (in promise) TypeError: Failed to fetch"

Server code:

<?php
header('Access-Control-Allow-Origin: https://my-app-id.apps.fbsbx.com');
$date = new DateTime();
echo $date->getTimestamp();
?>

Any ideas why is it failing when played by mobile Messenger app and how to fix it properly?

Answer 1

I have finally solved this issue some months ago, so I'm sharing an answer with you.

The clue was, that I was testing this on Opera browser (on desktop), when I finally tested it on Chrome, then I had same errors like on mobile Messenger which uses Chromium.

The problem was, that my own server didn't have a proper own certificate for this exact domain. Chrome was forcing use of https and then it was failing because of a certificate owned by hosting, pointing to a hostserver domain instead of my own.

Usage of my own certificate solved the issue.

Answer 2

Not sure if this is what you hit, but the messenger apps don't like HTTP/2. Lost several hours of my life on figuring that out.