The default HTML and CSS currently doesn’t handle the notch.
The following is due to be added to the documentation and/or fixed as part of this fillmode API change.
To ensure you app runs in fullscreen on all iOS devices you’ll need to change a few things both in config.xml, the default Playcanvas css and index.html.
Add the following to your config.xml between the <platform name=iOS> tags to hide the status bar
<config-file parent="UIStatusBarHidden" target="*-Info.plist">
<true/>
</config-file>
<config-file parent="UIViewControllerBasedStatusBarAppearance" target="*-Info.plist">
<false />
</config-file>
This will be enough for most iOS devices, however some newer devices with notch will still show black bars at the top or bottom. Fixing this requires changes to index.hmtl and style.css. These changes are automatically done with the download script posted above, so you can skip the next changes if using.
Open up index.html and find the <meta name="viewport" tag. Add viewport-fit=cover so the the whole tag looks something like:
<meta name='viewport' content='width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover' />
In style.css the html height is specified in %. Change this to vh:
html {
height: 100vh;
...
}
Some users report that you also need to add launch storyboard images before you app will utilize the fullscreen on all devices. I didn’t find this to be neccesarry, but launch images should be added to avoid App Store rejection anyway. Info on how to add launch images can be found at: Splashscreen - Apache Cordova
IOS is very restrictive about HTML5 audio playback, so to ensure your audio works and plays reliably you can use a plugin to play audio natively. I’ll use the Media plugin from Cordova: Media - Apache Cordova
Install by running
corodva plugin add cordova-plugin-media
This adds a global Media object you can use to play sounds with a path to your sound. You can get the path to an asset with asset.getFileUrl(). The URL you get will contain a query string similar to: ?id=123&branchId=abc. Make sure you strip this off or the Media plugin will fail to locate the file. Playing a sound then looks like:
if(!window.cordova)
return;
var path = asset.getFileUrl();
path = path.substring(0, path.indexOf("?"));
var media = new window.Media(path, null, (err) => { console.log("Error playing sound at", path, err}));
media.play();
Since Audio playback works on Android you can use the device plugin to only play audio natively if you’re on iOS. If you want to use the media plugin on Android you’ll to need prepend file:// to your asset path.
