How to make progressive web app (PWA) for your Blogger website

Adding a progressive web app to websites is common nowadays and many of the big websites are using it instead of the classic android app or iOS app.

When browsing a website with the PWA feature, you will get a call to action notice, asking you to install their app to your computer. This way, you can install a light-weight app which offers a native app experience. This will be good for smartphone users and can help your audience easily access your website with just a single click rather than having to open the web browser and typing your website address.

For today's tutorial, we are going to walk you through the steps on how to make a progressive web app (PWA) for your Blogger website.

Adding this feature to a WordPress site is pretty easy via numerous plugins. But for a Blogger site, we will have to create our PWA manifest file and load it from and external source. Also, note that for the time being, this PWA for Blogger won't work for PC owing to the lack of the service-worker.js.

But you should be able to use this guide to get it working for your smartphone. All you have to do is follow the simple steps below.

What is a Progressive Web App?

A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser. 

PWAs are built to take advantage of native mobile device features, without requiring the end-user to visit an app store, make a purchase and download software locally.

Unlike traditional apps, progressive web apps are a hybrid between regular web pages and mobile applications.

Making a Progressive Web App for your Blogger website

In order to make this work normally, you will have to;

1. Create icons of different sizes for your PWA. Icons should be the favicon of your Blogger site.
2. Creat a manifiest.json file for the PWA containing details like site name/title, icons of different sizes for different devices, site link, etc.
3. Hosting and using the manifest.json 

1. creating icons of the correct sizes and format

To start, you will need to create icons of different sizes for your PWA to be installed on your Blogger site.

To generate icons of different sizes, you can either use favicon.io or makeappicon.com. And if your logo is one generated from a text, it is advisable you make the background transparent. 

After generating your icons from one of the sites recommended below, you will have a zip file available for download, and in there, you will find icons of different sizes to use.

You will have to upload the images to your Blogger blog. Simply create a draft post or page, upload them and get the image links.

You can now move to the next step which is configuring the manifest.json file for the PWA.

2. Creating and configuring your manifest.json

Below, we have a sample manifest.json file we are using for one of our Blogger blog It's Apple OS.

 {
  "name": "It's Apple OS",
  "short_name": "It's Apple OS",
  "start_url": "https://www.itsappleos.com/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1a73e8",
  "description": "It's Apple OS is all about iPhone signed ipsw files, iOS Tools, Apps sale, news and tricks",
  "icons": [{
    "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO21UqdjekbkurEB0etWhTlkzUMjswlNPXnWWqpuu4NtxdYEQDSPaQ8NIbFA2nNMr9in6uS92B61QO4bl_6scyANmQcOKDM4i1SzwR6-sRs6hx6r9C20d3ZuIGNPgmO9EFFs6QFQe0X8sh/s400/iaos36.png' rel='apple-touch-icon",
    "sizes": "36x36",
    "type": "image/png",
    "density": "0.75"
  }, {
    "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbS5mWSp82wXVsEUPA4arkgMz3RUfLmqFUUI8NVEs4f90g5mlJZ4wjO5Diz_lt5xTjIWQ-5XXHeJuWOVgnatTlKOa9tD0GeVPKs4vGgR_80A5J1p3aOL0sJrIH2-ayO2lYIDKlOhTq7azr/s1600/iaos48.png' rel='apple-touch-icon' rel='apple-touch-icon",
    "sizes": "48x48",
    "type": "image/png",
    "density": "1.0"
  }, {
    "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLUncQOc-JgZrn-r_L64XjBvW4r4_0GhRl5Chyphenhypheno-jZ7JGiY6J8f3PWgjF4DCLCiUpyYh4NlLkXmgiSnfhzcdjN-QdCAaPNkjl9D4cgXsey1xZer2U0CvBKl3Rd2f91Xs-Ts0MqvZP_qiom/s400/iaos72.png' rel='apple-touch-icon",
    "sizes": "72x72",
    "type": "image/png",
    "density": "1.5"
  }, {
    "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTJrqt4g2f9w1-5lH5qbJPO7h7e0eJH2KeznEo0dw2LTW6r886gB73aw3QTxJvoUWhfHQBTqH6hzg7H4w2qlG4qjD8BXuAWliyZ4o-L699bC_IhTIQJunOBeCeun7I_LhClNuC3X42OKa_/s400/iaos96.png",
    "sizes": "96x96",
    "type": "image/png",
    "density": "2.0"
  }, {
    "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglYoEBNjmCE5kySR2SjWU3EFnPBlzuPTFcDm6NZpszG5kGzzzHx7taaGhEP28Y9LHYN8yusnGdaIZZnu0xbUOPoQfIHd1ui3FolUWeWd0DjXlqSCzFa4gY-jtXzKUmkFOhqn0yfzbiPkUp/s1600/iaos144.png' rel='apple-touch-icon",
    "sizes": "144x144",
    "type": "image/png",
    "density": "3.0"
  }, {
    "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ZV7gGaNLxCsF7H44OHW88nNIWd-ExqEOFGBdt4q9WZmQP3vxnUcnOCdwXgdNFZs4x3pj9cFwb4ul6iFsPMXnab-oqDN4hTUW5JXoZEG0LKEEqkuWT8D4MqHLTr_QDCgXYYcUCi0WP2Bb/s400/iaos192.png' rel='apple-touch-icon",
    "sizes": "192x192",
    "type": "image/png",
    "density": "4.0"
  }, {
    "src": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT969vhTRdtSC_dZJfGm3RG1FJUM42NJuZhI1tRaUwGh8xf4PUrofp5lQRnCNSsliie7KT-cvuEjDDoZ559gnV174EFu-V2mb-nOwWuXk2VAkNAenEJQBipuwXV-VsKP1JQ5NB9t07yRbG/s320/iaos512.png' rel='apple-touch-icon",
    "sizes": "512x512",
    "type": "image/png",
    "density": "5.0"
  }]
}

What you will have to do here is change the image links, site name, short name and description to match that of your site.

Using Notepad++ create a new file named manifest.json and then copy the code above and paste it there. Perform the modifications as explained above and save.

Where to host your manifest.json file.

Since Blogger doesn't have any root directory where you can store your website files like scripts, you will have to upload it somewhere else and load it from where it is hosted.

We recommend using Github to host the manifest or Drivehq. And for those who want to use Github, after hosting the manifest.json file, you can get the link using Githack.

With Drivehq, after uploading the manifest file, simply click on it and click on "publish' to get the link.

Once you've hosted your manifest.json file and gotten the link, you can then insert the link to your website head section. The line of code to be added should look like this;

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

To add the manifest.json, login to your Blogger dashboard and go to Theme > Edit HTML and then paste the line of code above in the head section of the HTML code. Note that you have to change "manifest.json link here" and put your manifest.json file link from Github or Drivehq.

Also, add the meta tag below for the apple mobile web app title.

<meta  name ="apple-mobile-web-app-title"  expr: content ="data: blog.title"/>

What to note:

• You blogger site should have a meta description tag
• Your images used should respect the resolutions specified on the manifest.json
• Use images of high resolution.
• Take a backup of your theme before trying this out.

Installing the PWA to your device.

As we said above, there is no service worker so you won't get the option asking to install the PWA for your Blogger site when using Chrome desktop.

But on mobile, to add it to the home screen, simply click on the three dots at the top-right corner and choose 'Add to Home Screen'. The PWA for your Blogger site will then be added to the home screen and ready for use.