Convert Blogger Website to Web App

In this post, we are going to take down the biggest drawback of blogger( i.e. blogger website can't be converted to a Web App) partially. I said partially because the blogger site has some features limited to an extent. i.e. for making a web app first you have to code a service-worker javascript file and store it in your root directory but here in blogger we can't access the root directory or other files in it and that limitation stops it from being a progressive web app.

But apart from this, you can make a semi-functional web app with a website hosted on Blogger or Blogspot, which will have the following features same as a web app with just simple steps and codes:

• The PWA will have a splash screen with a logo in the centre and the app name at the bottom(the splash screen is only visible on android)
• will have an app icon the same as other apps on android, iOS or PCs.
• can be installed on all devices such as Android, iPhone, Windows and Mac etc.
• Every device will have a dedicated app icon of your choice.
• other website links open in chrome.
• and much more... I can't remember other now😅 if you find anything, add in comments.

As I already said Blogger has some drawbacks so it's obvious that our PWA will lack some features as compared to others and I will list them below so you will not blame me for not telling you😁.

drawbacks of our PWA:

• As I said we can't access the root directory in Blogger so we can't add the service worker to it thus our PWA will lack some features like offline working, push notifications and ... I don't remember(just google it😄).
• Our app icon will have a small shortcut sign on windows and a chrome icon at the corner on Android and iOS.

Now you know how our PWA be like so it's up to you to read or leave this post. I don't mind!

Now it's time to not write the code because you must know what some terms on this post mean. Read carefully if you want to be a great web dev...

Gain Some Knowledge

Before starting you must what a PWA is and what are service worker and other components we mentioned or mentioning here. Just read it for knowledge or skip it.

PWA

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, including both desktop and mobile devices. source: wikipedia.org

Service worker

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Today, they already include features like push notifications and background sync. source: developers.google.com

Web App manifest

The web app manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user's desktop or mobile device. A typical manifest file includes the app name, the icons the app should use, and the URL that should be opened when the app is launched. source: web.dev

favicon

A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page. source: Wikipedia.org 

These are just some basic terms in the development of PWA, you can click on the source links to read more about them.

The Code

"Hence we are done with the theory now let's start solving problems" this is what my teacher says🤓. Now let's solve the actual problem of converting a blogger website to a web app(remember the word semi-functional)

Step1: It's too simple if you already have a beautiful logo that suits as favicon or takes some time and think about making one. When you are ready just navigate to favicon.io or any other favicon generator (there are millions out there) and choose your favourite option and create a favicon and download the zip file.

Step2: Common sense, extract the downloaded zip file. There will be some image files in there.

Step3: Navigate to the setting in blogger and click on favicon this will open a new tab where you can add a favicon file. Click on add file and add the favicon.ico file from the extracted zip. Click on save if nothing happens, click a few more time and if nothing happens again, just close the window, your favicon will be uploaded, that's a malfunctioning function in blogger( wow, that what a sentence 👏) the save button do not work sometimes, someone plz should report this to google😡. And it's done...

Step4: Now upload all the remaining images to a draft post or a draft page on the blogger to use them. 

Step5: Open theme click customize and edit HTML and now get ready for the action( not really ). Let's write some code now.

Step6: add the following code anywhere between your <head> and </head> tags.

<head>
    <link href='your_img_url' rel='apple-touch-icon' sizes='180x180'/>
    <link href=''your_img_url' rel='android-chrome-192x192' sizes='192x192'/>
    <link href=''your_img_url' rel='android-chrome-512x512' sizes='512x512'/>
    <link href=''your_img_url' rel='icon' sizes='32x32' type='image/png'/>
    <link href=''your_img_url' rel='icon' sizes='16x16' type='image/png'/>
</head>

replace your_image_url with the corresponding image URL. refer to the size and name tag to know which image to add.

Step7: Still reading this post. Go and check if your web app is working or not. Ohh! I just remembered the next drawback, there will be no add to home screen option you have to manually add the site as a shortcut. In the chrome app on mobiles click three dots and add to the home screen similarly in PC, three dots and tools and create a shortcut.

Now check whether the App Icon, Splash screen and special window( I mean the app do not open in chrome) are working correctly or not. If not, the comments section is below this post, feel free to ask, anything. And if yes, why not support me, click the coffee icon at the bottom-right corner and buy me a coffee.

Wait! Have you visited my creations? If no then do it now. I have provided Weba - The web view app source code there for free. So you don't need to convert your blogger blog to a web app. Weba has many features similar to web apps and much more than that and with firebase, you can add push notifications to it. So visit devtejas creations and enjoy the freebies.