How to Install a JSON Manifest Web App on Blogger

How to Install a JSON Manifest Web App on Blogger

How to Make a Web App Manifest JSON Blogger - With the development of modern web technology, a website or blog can be made like a Native Mobile application that can be installed on Android or iOS devices.

One way is to install a json manifest file or a web app manifest on a blog, so for those of you who want to have a blog that can be attached to the homescreen of a device, you can apply it by installing the json manifest.

So, in this tutorial, I will share how to install a json manifest file on a blog created using Blogger, for example you can add the inputekno blog to a device by clicking the 3 dot icon on the top right chrome then clicking "Add to Main Screen " , and see to your Smartphone's main screen, there will be an inputekno logo.

How to Install JSON Manifest in Blogger

In simple terms, the JSON manifest file is a file that contains the existence of json, this is used to tell the browser that a blog or website supports PWA and can be installed on mobile devices.

The manifest.json file usually contains the name, description, blog url, background color and also the blog logo which is compatible for each mobile device.

Before going to the tutorial, it's a good idea to prepare a text editor in advance, namely notepad, notepad++ or so on and also your blog logo in various sizes, if you are lazy to make various sizes of png logo images, you can use the favicon online service.

1. Create a JSON Manifest File

The first step is to create a json manifest file, copy the code below and paste it in another notepad/text editor > then Save As with the name manifest.json

{
 "name": " Title of Blog/ Website ",
 "short_name": " Blog/ Website Title ",
 "description": " Blog/ Website Description ",
 "lang": "id",
 "dir": "ltrs",
 "theme_color": " Address Bar Color (Hex) ",
 "start_url": " Blog/Website URLs ",
 "background_color": " Background color (Hex) ",
 "display": "standalone",
 "orientation": "portrait-primary",
 "version": "1.0.0",
 "author": " Author Name ",
 "icons": [{
    "src": " Image URL 36 x 36 (PNG) ",
    "sizes": "36x36",
    "type": "image/png",
    "density": "0.75"
  }, {
    "src": " Image URL 48 x 48 (PNG) ",
    "sizes": "48x48",
    "type": "image/png",
    "density": "1.0"
  }, {
    "src": " Image URL 72 x 72 (PNG) ",
    "sizes": "72x72",
    "type": "image/png",
    "density": "1.5"
  }, {
    "src": " Image URL 96 x 96 (PNG) ",
    "sizes": "96x96",
    "type": "image/png",
    "density": "2.0"
  }, {
    "src": " Image URL 144 x 144 (PNG) ",
    "sizes": "144x144",
    "type": "image/png",
    "density": "3.0"
  }, {
    "src": " Image URL 192 x 192 (PNG) ",
    "sizes": "192x192",
    "type": "image/png",
    "density": "4.0"
  }, {
    "src": " Image URL 512 x 512 (PNG) ",
    "sizes": "512x512",
    "type": "image/png",
    "density": "5.0"
  }]
}

Edit the code that I marked according to your blog, for example, you can see manifest.json on my github.

2. Prepare the Logo Image for Manifest JSON

If you don't have time to create logo images of various sizes, you can use online services such as Real Favicon Generator

Open the Real Favicon Generator site > upload your logo by clicking Select your favicon image > wait for the process > if you have, you can set it according to the options available.

If you have Click Generate your Favicon and HTML Code >. then download the Favicon Package .

Upload all favicon images to github or to your media blog to get the image URL link.

3. Install Manifest JSON in Blogger

Furthermore, if the json manifest file has been created, the next step is to install the json manifest file to the blog, the method is to add a meta link in the blog head section. Here's how:

Copy the code below right above </head>your blog closing code

<!-- Link Rail Manifest --> 
<link rel="manifest" href=" /manifest.json "/>

Replace the code marked with your Manifest JSON URL, the method is to upload the json manifest file that was created earlier to the CDN or to Github and Generate the link file on Githack then copy the URL, then the results will look like the following.

<!-- Link Rel Manifest --> 
<link rel="manifest" href=" https://rawcdn.githack.com/rulnove/pwajson/bafb972614af913d4a515552870803b3f882278e/manifest.json "/>

Then save your blogger template, and see the results by adding it to your mobile homescreen.

Closing

So, that was how to implement the json web app manifest on Blogger, it's very easy to implement and that way visitors can also add your website/blog to their mobile screen so that they can be accessed easily without the need to type in a browser.