I would like to share you how to build a Full Screen Web App for Android devices. Full Screen Web App is useful to users, it has already designed to be full screen without browser chrome (such as URL address bar), & has an icon on the home screen, loads as a top-level, & without install required.
In this article, you’re going to learn step by step on how to set up your web app to have an app shortcut icon added to Android’s home screen, & have the app launch in full screen mode using Chrome for Android’s “Add to home screen” features.
Tutorial Details
- Difficulty: Beginner
- Technology: Basic Knowledge of HTML & JSON
- Supported Browser: Chrome for Android 39 & above
Step 1: Define Your Web App’s Settings
The first thing you need to do is to define your web app’s settings such as your app’s title, landing page, default orientation (portrait or landscape), & different size of icons depending on device’s screen density in a piece of JSON-based manifest.
{
"short_name": "onlyWebPro",
"name": "onlyWebPro - Online Web Development Tutorials",
"icons": [
{
"src": "touch-icon-36.png",
"sizes": "36x36",
"type": "image/png",
"density": 0.75
},
{
"src": "touch-icon-48.png",
"sizes": "48x48",
"type": "image/png",
"density": 1.0
},
{
"src": "touch-icon-72.png",
"sizes": "72x72",
"type": "image/png",
"density": 1.5
},
{
"src": "touch-icon-96.png",
"sizes": "96x96",
"type": "image/png",
"density": 2.0
},
{
"src": "touch-icon-144.png",
"sizes": "144x144",
"type": "image/png",
"density": 3.0
},
{
"src": "touch-icon-192.png",
"sizes": "192x192",
"type": "image/png",
"density": 4.0
}
],
"start_url": "/index.html",
"display": "standalone",
"orientation": "portrait"
}
Example above shows us the ability to control our web app appearance using manifest file, the following properties are included in the example above:
short_name
The short name of your web app.
name
The full name of your web app.
icons
An array allows you to specify different size of icon for different screen density of devices.
start_url
Your start page’s URL. It tells Chrome where to fetch the first render from the network.
orientation
The default orientation of the web app. There are 3 types of orientation you could specify for your web app:
- portrait
- landscape
display
The display mode of your web app. There are 3 types of display mode you could specify:
- fullscreen: All of the available display area is used, leaving more space for the web app screen content. Ideally for web game.
- standalone: hide browser’s user interface, delivers your web app in full screen, native-like, but it will still includes status bar.
- borwser: delivers your web app as a normal site in a browser with all browser chrome. This is much useful if a back-button is needed in your web app.
Step 2: Set Up Splash Screen
Splash screen is very important for mobile app. It provides a better user experience when the mobile app loading from the network where it takes more than 1 second to get any content visible on the home page.
To have a splash screen in your web app, you can simply set a background color using the background_color property in your manifest file:
"background_color": "#1c1c1c"A splash screen image is drawn from the icons array. Chrome chooses the appropriate image that is closest to 128dp for the device.
The splash screen will display immediately when the web app is launched & remain on the screen until the web app’s first render.
128dp at 1x (160dpi) = 128px
Step 3: Link The Manifest To Your Web App
Once you have your manifest file ready, you need to link it to your web app:
<link rel="manifest" href="/manifest.json>Preview
That’s it! Save your document, open up your Chrome for Android, then navigates to your document.
Once your document is loaded, tap on the “3 vertical dots” icon located on right corner.
Press “Add to Home Screen”.
Press ADD.
Jeng Jeng!! You should able to see your web app’s shortcut icon appear on your home screen now.
Launch your web app & have fun!
Demo
The onlyWebPro’s official website has been embedded Add to Home Screen function. Try it out yourself!
1. Use your Android device’s scan QR code app to scan the following QR code.
2. Launch the URL with Chrome for Android
3. Once your document is loaded, tap on the “3 vertical dots” icon located on right corner.
4. Add to Home Screen.
5. Tap on the onlyWebPro launcher icon on your home screen and see how it works!
Conclusion
Browsing on mobile devices has been growing dramatically in the past few years. By applying the Add To Home Screen features you’ve learned in this article you can ensure that you’re delivering the best mobile web experience to your mobile users.
Although you’ve just configure your web app launch in full screen mode using Chrome for Android’s “Add to home screen” feature, the ability to “Add to home screen” is still hidden behind a menu, meaning that your apps still aren’t as discoverable as they should be.
In the next article, we will discuss about increasing the chance of a user adding your web app to the home screen by displaying Web App Install Banners. Stay tuned!
