HTML and CSS Reference
In-Depth Information
Detecting Standalone
When a user launches the game using the home screen shortcut, the game will be fullscreen—or more accurately the
document will be; in that case you won't need to display a button to switch to fullscreen, as mentioned previously in
the “The HTML5 Fullscreen API” section.
While
iOS window.navigator.standalone
is
true
when launched from the home screen, in Android there is no
such thing, so you will have to guess, using the difference between the
window
height and the client height. Here's a
snippet that works for both Android and iOS:
standalone = window.navigator.standalone || ( window.screen.height - window.innerHeight < 40 );
At the time of writing, the Android system bar alone is 25px tall and the system bar added to the Chrome
navigation bar makes a 73px tall block. In the snippet above, you check that the height difference between the
window
and the device screen is below 40px, so you have good safety margin in case any of those values change.
Further References
Every OS provides different ways for users to add a web game to their home screen, and these ways are likely to evolve,
so be sure to check the links below so you can provide your users with the best experience possible.
Android
A document detailing the home screen apps feature of Chrome for Android:
iOS
Information from Apple on how to build web applications for Safari:
Firefox OS
All about the Open Web App manifest file for Firefox OS:
Conclusion
In this chapter you saw how to make a web game feel like a native one by running it fullscreen while maintaining
performance and sharpness. You also learned how to allow users to add your game amongst native ones on their
home screen.
What is possible is to blur the lines between native and web games; this will continue evolve quickly, and we
are likely to see new APIs in each browser whose implementation will differ until some standards emerges. As more
exciting new features will be made possible for HTML5 games, you will have to keep an eye on what's new if you wish
to stay on top of the game!
