Facebook Instant Games stuck at 0% loading

Question

I have a super simple HTML5 game that I'm trying to test within facebook embedded player, but the game always stuck at 0% loading and it doesn't log the word "test" that I have at the beginning meaning that it's not even initialized. why is that?

https://www.facebook.com/embed/instantgames/YOUR_GAME_ID/player?game_url=https://localhost:8080

I have replaced the GAME_ID with mine

index.html

<script>

      FBInstant.initializeAsync().then(function() {
            console.log("test");
            var progress = 0;
            var interval = setInterval(function () {

                progress+=3;
                FBInstant.setLoadingProgress(progress);

            } , 100);

      FBInstant.startGameAsync()
          .then(function() {
          // Retrieving context and player information can only be done
          // once startGameAsync() resolves

          var playerName = FBInstant.player.getName();
          var playerPic = FBInstant.player.getPhoto();
          var playerId = FBInstant.player.getID();

          // Once startGameAsync() resolves it also means the loading view has 
          // been removed and the user can see the game viewport

          game.start();
      });
    });
</script>

Answer 1

Facebook Instant game will work on HTTPS, one of your chrome browser tab should open below the localhost URL

https://localhost:8080

Then in the next tab, you should run the below URL, now it will work fine.

https://www.facebook.com/embed/instantgames/YOUR_GAME_ID/player?game_url=https://localhost:8080

Answer 2

it seems to have problem with the variable "game." I do not find where it is initiated. When I temporally disable commands with "game" and it no longer stucks at 0%. Try debugging that variable, you may resolve the problem.