About Manifest.json On
Blogger - Manifest.json or Web Application Manifest can simply be called a blog
URL shortcut for mobile devices. With this manifest, mobile users can save blog
URL shortcuts on the mobile home screen.
With the URL shortcut on the
mobile home screen, users can easily go to the blog by clicking on the blog
icon on the mobile home screen as well as opening an application.
So with this, users do not
need to open the browser first then type the URL to open our blog on their
mobile.
This is the same as the blog
URL shortcut in his day before there was a cell phone, but now it is still
widely used by downloadable blogs. Usually the download blog will include a URL
shortcut in the file to make it easier for users to go / re-enter their blog.
But in this cellphone era,
it seems like there aren't many web / blogs that use this manifest yet. That's
because of the lack of knowledge of bloggers / web developers about this
manifest.
To make it easier to
understand what manifest.json is on the blog, as a demo, please access this
Magic Company blog with your mobile on the Google Chrome browser. Then click
the 3 dot icon in Chrome at the top right then select "Add to main
screen". After that, please go to the main screen of the phone and find
the Magic Company icon. Try clicking on the icon, then KompiAjaib's blog will
open easily.
If you want to create a
manifest like that, please follow the following steps:
1.
Create a rectangular blog icon like you make an icon for the favicon. Create a
PNG icon with a size of 512x512.
2.
Open notepad then enter the following code:
{
"name": "YOUR BLOG NAME",
"short_name": "YOUR ICON BLOG NAME",
"start_url": "URL HOMEPAGE",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#2B0C93",
"description": "DESCRIPTION BLOG",
"icons": [{
"src": "https://3.bp.blogspot.com/........./........./s48/logo.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "https://3.bp.blogspot.com/........./........./s72/logo.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "https://3.bp.blogspot.com/........./........./s96/logo.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "https://3.bp.blogspot.com/........./........./s144/logo.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "https://3.bp.blogspot.com/........./........./s168/logo.png",
"sizes": "168x168",
"type": "image/png"
}, {
"src": "https://3.bp.blogspot.com/........./........./s192/logo.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "https://3.bp.blogspot.com/........./........./s512/logo.png",
"sizes": "512x512",
"type": "image/png"
}]
}
Please adjust the points
above with your blog. For short_name, make a name of up to 12 letters so that
the name is not truncated when it appears on the phone's main screen
For the icon URL, please
upload the icon that you created earlier in the first step in the Blogger post
then take the URL of the image. Adjust code ... / s ... / ... on Blogger image
URL according to icon size, pay attention to the code marked.
After everything is
suitable, please SAVE AS with the name manifest.json with the All Types type.
Then please host the manifest.json file, you can use Github.
3.
Then please save the following code in your blog's HTML edit under the
<head> code
<link href='YOUR-URL HOSTING FILE manifest.json' rel='manifest'/>
Now please try manifesting
your blog on mobile. Please access your blog with your mobile on the Google
Chrome browser. Then click the 3 dot icon in Chrome at the top right then
select "Add to main screen". After that please go to the main screen
of the phone and find your blog icon then try clicking on the icon.
Good luck…..
And please note, this web
application manifest is one element of SEO blog too. And this will also be
useful if you create PWA (Progressive Web Apps) for your blog.
You can also listen about
the manifest of this web application at Google Develover
https://developers.google.com/web/fundamentals/web-app-manifest/?hl=en