Testing Verge3D Applications on Mobile Browsers
When you launch a Verge3D application from the App Manager, it runs on top of local development server using the localhost address. This address can only be used on your local machine. In order to test how your app works on a mobile device's browser, you can use one of the following procedures.
Method #1: Local IP Address
Click the gear icon on the left bar of the App Manager and in the General settings turn on Enable external server interface:
Open App Manager settings again, the Local network address should appear.
Now you can use the provided IP address in your local Wi-Fi or Ethernet network instead of localhost. Launch the App Manager on a mobile device's web browser by navigating to the network address, for example:
http://192.168.2.3:8668/
Finally, run your apps on mobile as usual - by tapping blue icons in the App Manager.
Method #2: Local IP Address + QR Code
This is a variation of method #1. Instead of running the App Manager and then an application on a mobile device's browser, you can launch the application on your computer via the App Manager using the network address.
http://192.168.2.3:8668/
A link to the application can be conveniently opened on mobile using a QR code. To generate such QR codes, use the sharing feature of the Google Chrome browser (also available in Microsoft Edge):
For other browsers you should use QR generator extensions for the same purpose.
The obtained QR code can be scanned with a mobile device's camera (by using the built-in camera app) thus opening the link on a mobile browser.
Method #3: Port Forwarding
This method will work for Android devices. With a USB cable and Chrome DevTools, you can launch the App Manager right from your mobile device's browser by navigating to localhost:8668.
Unlike methods 1-2, this method is suitable for launching AR/VR applications, as localhost does not require a secure connection between the mobile browser and the workstation. In addition, you'll be able to see the output of the mobile browser's console.
On an Android device, go to Settings → Developer options and enable USB debugging.
By default, the developer options in Android devices are hidden. You can unlock them by locating the Build number in your Settings menu and tapping it multiple times.
Connect your Android device with a USB cable. In Chrome browser on your computer, navigate to chrome://inspect.
This should show a dialog popup on your Android device - if not, reload the chrome://inspect or re-insert the USB cable. In the popup, allow USB debugging by tapping OK.
You now should see your Android device on the chrome://inspect page. Also, if you open Chrome on your mobile device, it should be listed there.
Click Port forwarding button on the chrome://inspect page. In the shown-up window: in Port field, type 8668, in IP address and port field, type localhost:8668. Click Enable port forwarding and close the window with Done button.
The chrome://inspect page should display a green indicator for port forwarding near the device.
As a result, you should be able to launch the App Manager right from your mobile device's browser by navigating to localhost:8668. In addition, you can see the output of the mobile browser's console by clicking inspect link on the chrome://inspect page.
Got Questions?
Feel free to ask on the forums!