WebGL Fullscreen Situation with IOS iPhone new Info to 17.2 Beta (Unity, Phaser, etc.)

Hello everyone!

Today, I embarked on a journey to answer an intriguing question: Is it possible to display a WebGL app or website in fullscreen on an iPhone? Answer: Should come with IOS 17.2. This is a revisit of a topic I explored a few years ago, but with half-forgotten details, it was time to dive back into the ever-evolving internet landscape to discover the current state of affairs.

My findings reveal a critical aspect: Apple seems to be actively preventing fullscreen display for WebGL apps on iOS. In the latest iOS version 17.2 Beta, there is an option to enable fullscreen mode in Safari, but it's buried deep within the settings and remains unconfirmed by users as of January 31, 2024. For more insights, you can refer to this [Apple Developer Forum Thread].

The initial hurdle I encountered was the inability to directly launch WebGL due to "security concerns." The recommended approach is to run WebGL through a web server. This information can be further explored in these Unity Forum discussions: [Starting a Localhost Version of WebGL] and [Running Local Unity WebGL on Browsers].

Here are some quick fixes for different browsers:

- Firefox: This is the recommended browser for running WebGL. 

  - Type `about:config` in the navigation bar.

  - Search for `security.fileuri.strict_origin_policy` and set it to `false`.

- Chrome: 

  - Create a desktop shortcut for Chrome, right-click it, and select Properties.

  - In the Target text box, add `--allow-file-access-from-files` at the end.

  - Open your WebGL build by double-clicking the index.html file, copy the URL, close the browser, then start it using the shortcut and paste the URL.

- Microsoft Edge: Conveniently, Edge requires no special configuration for WebGL builds.

- Safari: 

  - Enable the develop menu in the preferences panel under Advanced → “Show develop menu in menu bar.”

  - From the “Develop” menu, select “Disable local file restrictions.”

However, while implementing these solutions, I encountered an issue with the wasm MIME type not being defined. Although this didn't hinder functionality, I was curious to see how things would operate without this error.

To address this, I resurrected MAMP, an easily installable web server. The advantage of MAMP is the presence of a mime.types file located at MAMP/conf/apache/mime.types, where I was able to add the missing MIME type. More information about MAMP can be found [here].

Alternatively, XAMPP is another viable option, which can be explored [here].

With these adjustments, WebGL ran smoothly, confirming that fullscreen mode works on Android devices, but not on iPhones yet.