Blogging Blogger (BlogSpot) Tips How To Make Progressive Web App (PWA) For Blogger...

How To Make Progressive Web App (PWA) For Blogger [EASY]

-

Many brands create Progressive Web Apps (PWA) for their websites, to enable users to install the super lite web app on their smartphones and enjoy a native app-like experience while browsing that site.

Progressive Web Apps are also great for branding, as once a user installs it, it stays on their Home screen and the brand’s logo stays in the user’s mind.

There’s a rumour on the internet that Progressive Web Apps cannot be made for Blogger. But today I am going to prove that wrong.

In this article, I am going to show you how to create a Progressive Web App for Blogger to let your readers enjoy a native app-like experience on your blog/website.

What are Progressive Web Apps?

Ever noticed a “Add to home screen” pop up in Google Chrome when you visit some websites? Well, that pop up is shown when a website supports PWA.

When you click on the “Add to home screen” button, the website’s logo is added to your phone’s home screen.

To learn more about PWAs, check out this article.

Demo

If you are reading this article on your mobile phone, simply tap on “Add to Home screen” from the menu (chrome menu) and then tap on “Add“. Then you will see that TechRBun’s PWA has been added to your phone’s home screen and when you open it, you will be able to use TechRBun.com just like any other app on your phone.

Well, now that you have got a clear idea about what a PWA is, let’s get started with learning how to make a Progressive Web App for a Blogger site.

Steps To Make Progressive Web App For Blogger

Please note, as of now, it isn’t possible to define the serviceworker.js file for the PWA for Blogger. This is because Blogger doesn’t let the user upload his/her own files to the root directory of the website. And due to this limitation, caching won’t be supported in this PWA. 

Also, Google Chrome won’t show the add to home screen pop up. The visitor will need to manually click on the add to home screen button. However, you can obviously include a banner on your site, instructing the user how to install your site’s PWA on their phone.

STEP 1: Get The Correct Favicons

This is the most important step that you need to perform to make a PWA for your blogger blog.

Go to https://favicon.io (this is the best site I have found till now for this purpose)

If you already have a nice logo for your website, choose the “Generate from Image” option or else you can choose the “Generate from Text” option.

Quick Tip: If you are using the “Generate from text” option and want the background of your logo to be transparent, change the background colour value to #FFFFFF00

Download the zip file on your computer and extract the files into a folder.  

STEP 2: Compress The Images(Optional Step)

You can optimize those images to reduce their size for faster loading time, using tinypng.com

STEP 3: Upload The Pictures To A Draft

Go to blogger.com and create a draft post and upload the extracted pictures to this post in the original size.

And save the post (make sure you don’t publish it)

STEP 4: Edit The site.webmanifest File

Right-click on the site.webmanifest file and click on Edit.

You’ll find two instances of “src”: In the first instance, replace /android-chrome-192×192.png with the link of the 192 x 192 size picture that you uploaded to the draft post.

To find the link, simply right click the picture and click on copy link.

In the second instance, replace /android-chrome-512×512.png with the link of the 512 x 512 size picture that you uploaded to the draft post.

Save the file.

STEP 5: Upload The site.webmanifest To An Online Storage

Go to drivehq.com and sign up.

Upload the site.webmanifest file using the UPLOAD button. (Click on Add Files and Don’t forget to click on the Start Upload button after adding the file.)    

After it is uploaded, select the file and click on the PUBLISH button.

Accept the terms and conditions. You will then be provided with the direct link to that file. Copy the link and paste it to Notepad so that you can use it later.    

STEP 6: Put The Links In The Header

Go to Blogger —> Theme —> Edit HTML.

You’ll see the <head> tag.

Just below this tag, Paste the following lines:

<link rel=”apple-touch-icon” sizes=”180×180″ href=”Link to the 180 x 180 size picture“/>
<link rel=”icon” type=”image/png” sizes=”32×32″ href=”Link to the 32 x 32 size picture“/> <link rel=”icon” type=”image/png” sizes=”16×16″ href=”Link to the 16 x 16 size picture“/> <link rel=”manifest” href=”Link to the site.webmanifest“/>

Don’t forget to replace the texts in red with the actual URLs.

Click on the Save theme button.

Done! Congratulations!

You’ve successfully made a Progressive Web App (PWA) for your Blogger blog.

Also Check Out: How To Change Favicon In The New Layout Of Blogger

Check it by visiting your website on your phone (using Chrome) and clicking on “Add to home screen“.

Don’t forget to share this article with other blogger friends of yours and on social media.

A lot of people believe that it is not possible to do this, but here I’ve just proved that it is absolutely possible and also showed you the easiest way to setup Progressive Web App for a Blogger blog.

Also check out: How to make Blogger Blog Full Width (100% working trick)  

Do add TechRBun to your home screen or subscribe to our notifications/newsletter as I post awesome content on Blogging, Web Marketing and Technology.


Tired of slow indexing of your blog posts by Google? Check Out: How To Get Your Site Indexed By Google Instantly

You might also like: How to Correctly Setup Cloudflare Free CDN for Blogger + Features Review

I hope you liked this article. If you have any confusion, comment down below and I’ll surely help you out!

See you soon in the next post! Have a great day ahead!

Anirban Roy
Anirban Roy is the founder of TechRBun. He is a Computer Geek. He likes to share his knowledge about PC, Mobiles and Blogging. He studies in class XII and when he is not studying, he can always be found tweaking his PC or surfing the web on his mobile phone. He loves music and literature too!

61 COMMENTS

  1. Thank you so much. This method works like a charm ☺️
    It helped me make a Progressive Web App for my blogger blog. This process is so easy to follow and quick to apply!

  2. Muito obrigado pela dica, embora suspeitasse que daria certo, mas seu post me ajudou a confirmar isso!!! Abraços…

    • Translation: Thanks so much for the tip, although I suspected it would work, but your post helped me confirm this !!! Hugs…

      Reply : Estou tão feliz que você gostou deste post! ??. Muito obrigado pelo seu comentário.

      Reply Translation : I’m so glad that you liked this post! ??. Thanks a lot for your comment.

    • Hi, could you please re-check if whether you followed all the above mentioned steps carefully or not? Because this method is 100% guaranteed to work. I am confident about that and I have also provided the proof for that. If you still have problems regarding this, kindly express the problem you are facing in details. You may also leave links to the screenshots of the problems here in the comment box. I will surely help you out. You can also hire me to set the Progressive Web App for your blogger blog, if you find it difficult / confusing. I will be more than happy to help ! ( :

    • Hi Faisal, you can generate the site.webmanifest file from favicon.io website, as I have already mentioned in the article. The site.webmanifest file would be included in the zip file that you download from favicon.io

  3. on simply way, you can hosted the manifest.js with Github and then put link rel as on your html structure,
    but i can’t find the best way for adding service-worker.js putting on directories at blogger, do u have any solutions?

    • Yes, hosting on Github is also a great option. Thanks for the recommendation, I will update it in the article.
      And for the service-worker.js, till now I didn’t find any way of doing that. And the only practical problem that causes is that browsers won’t show the pop up of “Add to Home screen” and users will have to do it manually by clicking the three dot menu.
      But there’s a solution for that as well, you can add pop up messages on your website triggered by user behaviour which can ask the visitor to install your Blogger PWA on their home screen.

    • Hi, right now there’s no way of including the serviceworker.js to the PWA of Blogger Blog. The problems caused due to this limitation, such as chrome not displaying the popup asking users to install the pwa of your blog, can easily be overcome by making a custom popup on your blog, asking your users to install your pwa. I will soon update this post with a thorough guide to do the same.

    • Translation: I am Japanese. That’s wonderful! Let’s create based on this information.

      Reply: Thanks for your sweet comment ☺️
      I’m glad that this post has helped you.

      Translation: 素敵なコメントありがとうございます
      この投稿があなたを助けてくれてうれしいです。

  4. Hello. I recently learned about PWA. I found this feature very attractive and looked into implementing it on Blogger. This section introduces how to use DriveHQ. Are there other services? Should we support web hosting?

    • Hi there!
      Yes, there are plenty of alternatives to DriveHQ, you can use any hosting service that you want.
      Also, this article is soon going to be updated with plenty of new features including service worker, geo location, installation pop-up, etc. So, stay tuned for that.
      If you are excited about those new updates, you can either subscribe to the push notifications of this website or you can DM me on Instagram @techrbuncom and I will let you know when I update this article with all the new exciting features. Thanks.

      • Thanks for your advice!
        I will also try it on Blogger. If successful, can I introduce this feature too? Explain, of course, that you referred to this article.

        • Yes, you can do it. Just make sure you checkout the new features when they’re updated on this article. I’m sure everyone will love those advanced features.

      • Ask additional questions.
        Should I copy the link address after uploading the icon in the draft?
        Where do I get site.webmanifest?

        • Yes, you need to copy the link of those image icons. You will find the site.webmanifest file in the zip file itself. That you download from favicon.ico website. You will get multiple sizes of the same icon image. Upload all of them to the draft and copy their links and put them in the appropriate code as I have explained in the article.

          You will find the site.webmanifest file in the zip file itself that you get from favicon.ico.
          Upload the webmanifest to drivehq or any other hosting platform you like and do as explained in the article.

  5. I like the valuable information you provide in your articles. I’ll bookmark your weblog and check again here frequently. I am quite sure I will learn plenty of new stuff right here! Best of luck for the next!|

  6. Has this method recently made it impossible to implement PWA?
    Even if I try it in my environment, “no matching service worker detected. You may need to reload the page …” is displayed.
    Since serviceworker.js cannot be used with Blogger, I do not know why this error occurs.

    • Hi Kate!
      On which browser/platform/service is the error message showing up?
      It’s true that putting the service worker.js hasn’t been possible yet but the PWA is still working perfectly as intended. You can still add it to the home screen using the side menu and it will run smoothly with the interface on a standalone app.

      After reading your comment, I re verified it on one of my client’s website that runs on Blogger and saw that it’s working perfectly like a standalone app. Ofcourse, you won’t get the auto pop-ups of chrome and local cache, but excluding that, everything else is working perfectly!

      • Thank you for your quick reply.
        My Blogger site is below.
        https://pwatestsite.blogspot.com/
        “Site.webmanifest.json” is on Glitch’s online service.
        “site.webmanifest.json” is running without any problem, so I do not know why it cannot be installed.

          • This won’t work on windows chrome due to the lack of serviceworker.js. However, it works perfectly fine on mobile phone as I have shown in the screenshot below.

        • I’ve checked your site. Also checked the code on your website. The PWA is working fine. Only the pop-up won’t work, as I already said, the way of making service worker.js work on blogger hasn’t yet been figured out.

          So, you need to install the PWA by clicking on the “Add to home screen button”

          I’m attaching the screenshots of your PWA as shown on my mobile phone (Android 9):

          Add to home screen option
          add to home screen

          App On Android Homepage
          Android homepage

          Splash Screen
          splash screen

          Launched Application
          launched app

  7. Bro one thing I wanna clear down as you posted the screen shots for explaning this to Kate, there is no chrome icon as subscript above the web icon. But when I add my website to home screen there is chrome icon subcripted above my web icon.

    • There won’t be any chrome icon, bro. I’m sure you have missed something and thus chrome icon is showing up in your case. Did you make and set the site.webmanifest exactly as I showed in Article?

      Please share your screenshot. Upload your screenshot to imgur and comment the link to it here. I will check it and help you out!

  8. Bro https://lifeofmechon.xyz is my website . I have tried as you say . I hosted the site.webmanifest in github . As I have tried you web to add to homescreen it saves like a charm . But When I try my web it asks me twice to add to homescreen and it can be done infine times but which is only one time permits in your case. So kindly check it and help me to sort out this issue.

    • Hi bro,
      I tested your website. The pwa works great. I didn’t see the problem about the “chrome” icon that you mentioned in your previous comment by the way, can you please explain in more detail where is the chrome icon showing exactly?

      And the other question of yours.. I have recently shifted to WordPress, where it is possible to use a service worker.js for the PWA and thus, I am getting the fully featured pwa experience and that’s the reason my PWA can only be installed once. But as I have already mentioned in the article, it’s not possible to add service worker.js in Blogger’s pwa because, it doesn’t allow you to put your own files on its root directory. So, due to the absence of service worker.js, the prompt doesn’t work and also, it allows you to add to your home screen as many times as you want.

      But shouldn’t be an issue as you can easily code a small message on your site to notify users to install your pwa and also, why would someone install it twice purposely? That wouldn’t make sense. And even if someone does that, it’s GitHub’s server which will handle it, so no worries for you.

  9. Thanks bro for the detailed explanation. I found a chrome badge over my icon,thats why I asked. Later I google about how to remove chrome badge,but nothing satisfied and I found this happens for above Oreo android.

    • It’s due to the RealMe UI of your phone bro, some custom roms do show the chrome icon.

      But on my phone, which has MIUI rom, the chrome icon doesn’t show.

  10. Can you help when try to save code in theme htmle in head section i got this error massage org.xml.sax.SAXParseException; lineNumber: 21; columnNumber: 13; Open quote is expected for attribute “rel” associated with an element type “link”.

    • I see. Then it must be a new rule of Drive Hq, as the limitation wasn’t there when I signed up.

      Anyways, you can use GitHub to host your site.webmanifest file. Just upload your file to your repository and then click on raw to get the direct link.

      Thank you for informing me about their new limitation. I will update the article with information about how to implement the same with GitHub.

  11. I found a problem message in saving the template after editing

    org.xml.sax.SAXParseException; lineNumber: 5; columnNumber: 13; Open quote is expected for attribute “rel” associated with an element type “link”.

  12. it is not working. works just like normal add to homescreen. it has address bar. My blog —-> a2zee7.blogspot.com

    • Hi Siddhant,

      DriveHQ has recently started putting a limit on free users. Thus you need to host the site.webmanifest file on GitHub. Please take a look at the screenshot below:

      Thus, go to GitHub, create an account, make a new repository, upload the site.webmanifest file to it and click on “raw”. Copy the raw file’s url and put in in your Blogger header.

      I haven’t been able to update it in the article due to time constraints, but will soon update the Article with the GitHub method.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

You might also likeRELATED
Recommended to you