FB Instant Game asset-loading; stuck on 0%

Question

I'm new to Javascript and Phaser. My game is working fine in my webhosting. I tried to add Instant Games SDK, but the assets are not loading.

I have tried Facebook Instant Games in Phaser 3 tutorial from Phaser website and I tried to implement what they said, but nothing worked; the loading screen is stuck on 0%.

FBInstant.initializeAsync().then(function() {  
      let gameConfig = {
      type: Phaser.AUTO,
      backgroundColor:0x87ceeb,
      scale: {
          mode: Phaser.Scale.FIT,
          autoCenter: Phaser.Scale.CENTER_BOTH,
          parent: 'thegame',
          width: window.innerWidth,
          height: window.innerHeight
      },
      physics: {
          default: 'arcade'
      },
      scene: [preloader,welcomeGame,
              playGame,
              resumeGame,
              gameOver
              ]
  }
  game = new Phaser.Game(gameConfig);
}); 

class preloader extends Phaser.Scene{
  constructor(){
      super('Preloader');
  }

   preload() {

      this.facebook.once('startgame', this.startGame, this);
      this.facebook.showLoadProgress(this);

      this.load.image('logoBanner', '/src/img/logoBanner.png');
      //.
      //.
      //.
      //.

      this.load.audio("jump", ["/src/music/jump.ogg","/src/music/jump.mp3"]);

        }

  startGame ()
  {
      this.scene.start('WelcomeGame');
  }

Answer 1

What you need to do is very simple. After loading your assets you need to call the following methods:

FBInstant.setLoadingProgress(100);

and then

FBInstant.startGameAsync().then(function() {
          startGame();          
        });

You can make the set setLoadingProgress dynamic of course.

Have fun.