Add Splash Screen and Change address bar color for your Website

Hi guys, in this article we will see how to add a splash screen to your website and also to change the theme color of your website’s address bar. This will give a more native feel to your website. Let see how to get it done.

You can get a feel of the splash screen here. Open the website in your mobile browser and then click on add to home screen. Then open the website using the icon. You will see a splash screen before the site opens.

Note:
It works only on Chrome >= 47. Opera also has limited support.
It does not work on Chrome/Opera for iOS.
It works only if the user opens the website from the app icon. It will not work if the user opens it using a link.

Before we proceed, check out my article on using the manifest to add an icon to the home screen of your user’s device for your website here. If you have already done that never mind..:P

Once you have done that, all you have to do is to open manifest.json and add the following attributes to it:

name It will be displayed at the bottom of the splash screen
background_color make sure to set this to a color that matches your website background so that the transition from splash screen to the web page look visually seamless
theme_color an optional color that you can mention, make sure this also matches your website theme to ensure a seamless visual transition

The splash screen will look something like this:

Splash

manifest.json
{
    "short_name": "Lister",
    "name": "Lister",
    "icons": [{
        "src": "/progressive_web_app/icon.png",
        "sizes": "192x192",
        "type": "image/png"
    }],
    "start_url" : "index.html",
    "display" : "standalone",
    "orientation" : "portrait"
}

The icon chosen for the splash screen will be the one whose dp is closest to 48dp for the device. If this does not make any sense to you, just make sure that you always have 196px as the minimum sized icon and create 3 other versions at 256px, 384px and 512px.

You can also go lower if you do not want low dpi devices downloading very large images.

Now we will get to the part where we change the color of the the address bar. To do so, add the following meta tag to your head tag:

<meta name="theme-color" content="#E5637C">

That’s it you have painted your address bar.. 😀

That’s all there is to adding splash screen and changing the color of the address bar for your website guys. Have fun trying it out. If you have any queries comment below, I’ll try my best to help you out. Over and out..Peace..:)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s