Submit some intresting concepts to us using the button.. Submit Here!

PWA (PROGRESSIVE WEB APP) Tutorial for Custom Domains in Blogger using CloudFlare

A PWA is a web based and web fetched app that uses internet to use the website and try to optimize it accordingly and provide you a stable app...
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
You clicked on this post this means you know a little about PWA or just wanted to convert your website into a simple Web App which automatically sync with your website...

PWA in Blogger Website
PWA (Progressive Web App) in Blogger using CloudFlare
So, it's well easy to do in both Blogger and WordPress ( which 90% of websites use) but as we know I am on Blogger since 2018 and yes we are going to make our website to an app for a Blogger Blog.

But before start there is something really important for those who are here to build a PWA of their Blogger Blog -

 This Works for Custom Domain only *

Although we know that Blogger is a free hosting website with some limitations and some good points tooo...

So, I am going to provide you some codes which you can implement on your blogger website so that you can also get a pop up which shows users to install your web app.

It is basically a small HTML & JavaScript based App which shows our recent post in the app and users cookies will be used to provide some good performance of our website and the app will optimise the speed of a website in the app so that the content loads even more faster.

Simply we can say that we don't need an external app to be built for a website to check our website and add some feeds of our website with app.

All the things that I have said we are getting a app that combines the feed link of a website to show the users the minimalistic and the best ever experience over website.

So let's start this post about PWA +(PROGRESSIVE WEB APP) with some knowledge about PWA Progressive Web App in some additional information about the limitations of the process and the app.

What is PWA ?

A PWA is a web based and web fetched app that uses internet to use the website and try to optimize it accordingly and provide you a stable app that works perfectly in any Android or IOS...

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

Progressive Web Apps (PWA's) are also great for branding, because once users install them, they appear on their phone's Home screen and the brand logo stays in the user's mind.

There are rumors on the internet that Progressive Web Apps (PWA) cannot be made for the Blogger platform. But today I will prove that it is wrong.

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

Suggested :

Progressive App Features :

Ever seen the words "Add to Home screen" appear at the bottom of your Google Chrome screen when you visit some websites? Well, that pop up is shown when a website supports PWA.

When you click the "Add to Home screen" button, you will be directed to install the Android app.

After the installation process is complete, the Blog logo will appear on the main screen of your Smartphone which can later be used to access the Blog. So we don't need to open Browser / Chrome again when we want to visit Websites / Blogs.

Example of a Progressive Web App on a Blog

For more details, consider the following screenshot example:

In addition, by activating the Progressive Web App feature on Blogger, it will indirectly improve the quality of our Blog in the eyes of search engines which can be seen from the green tick on the PWA score in Measure page quality (

Well, now that you have seen a clear picture of what a PWA is, let's start learning how to create Progressive Web Apps for Blogger sites.

Please note that in order to create a complete PWA along with Service Worker support, your blog must use a top level domain and must be connected to Cloudflare. This is because blogger doesn't allow us to upload files in its directory, so we need to upload the serviceworker.js file in our site directory using Cloudflare Workers.

If you already have a custom domain but haven't connected your blog to Cloudflare, please connect it first. Here's the tutorial: How to Setting Cloudflare For Blogger [Easy]

Steps to Make Progressive Web App For Blogger

 This Works for Custom Domain only *

The first step before installing the Progressive Web App is to create a Favicon of the recommended size.

1. How to Create a Recommended Favicon

This is the most important step you need to do to create a PWA for your blogger blog.

Go to (this is the best site I found till now for this purpose)

If you already have a great logo for your website, select the "Generate from Image" option or you can select the "Generate from Text" option.

Tip: If you use the "Generate from Text" option and want your logo background to be transparent, change the background color value to #FFFFFF00

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

  1. favicon-16×16.png
  2. favicon-32×32.png
  3. android-chrome-192×192.png
  4. android-chrome-512×512.png
  5. apple-touch-icon.png
  6. site.webmanifest

2. Reduce Image Size (Optional)

You can optimize these images to reduce their size for faster loading times, using TinyPNG – Compress WebP, PNG and JPEG images intelligently

3. Upload Images to Blogger Pages

So that we can get the image URL from the Favicon that we created earlier, we have to upload the image on the Blogger Page.

After uploading, make sure the image size uses the original size. After that, don't publish the page. Leave it in draft form.

Then change to the Edit HTML version so we can see the image link.

4. Create File site.webmanifest

Right-click on the site.webmanifest file and click Edit (open with Notepad or another text editor).

Delete all content inside the site.webmanifest file. Select all with CTRL+A and press the Delete key.

Now copy the code given below and paste it inside your site.webmanifest file.


    "name": "",
    "short_name": "AnandNawal",
    "icons": [
            "src": "",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any maskable"
            "src": "",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any maskable"
    "theme_color": "#3291d1",
    "background_color": "#ffffff",
    "display": "standalone",
    "prefer_related_applications": false,
  "start_url": ""


  • Replace name and short_name with the name of your blog
  • Replace the src address with the Favicon link that we uploaded earlier. Make sure it matches the size listed. Pay attention to the text I bolded.
  • Replace start_url with your Blog address
  • After replacing all, save the file.

5. Upload site.webmanifest To Online Storage

  1. Go to GitHub
  2. If you haven't registered yet, please register first
  3. After Login, press New
  4. Fill in the Repository name with the PWA name
  5. Press Create repository
  6. Upload the site.webmanifest file using the link uploading an existing file
  7. Press Choose your file
  8. Select the site.webmanifest file that we edited earlier.
  9. Click Commit changes
  10. Hit site.webmanifest
  11. Click Raw
  12. Copy the URL address.

6. Create a page for PWA to use when the device is offline

Create a new page on your Blog with the title – “Offline Pages For PWA”. You can write whatever you want.

This page will be shown to users when they open your PWA when their device is not connected to the internet.

Don't forget to Publish Page.

7. Manage Service Workers Using Cloudflare Workers

In this step, we will set up the serviceworker.js file for the PWA using Cloudflare Workers.

  1. Log in to your Cloudflare account, select your blog and click on Workers as shown in the image below.
  2. Tap Manage Workers
  3. Create a subdomain name for Cloudflare Workers. It's up to you to use any name you like.
  4. Press Set Up
  5. Select Continue with Free
  6. Press Create a Worker
  7. Delete all the scripts on the left, then replace them with the following script code
    const js = `
    'use strict';
    const CACHE_VERSION=1;
    let CURRENT_CACHES={offline:"offline-v1"};
    const OFFLINE_URL="/p/offline.html";
    function createCacheBustedRequest(a){let b=new Request(a,{cache:"reload"});if("cache"in b)return b;let c=new URL(a,self.location.href);return"&":"")+"cachebust=",new Request(c)}self.addEventListener("install",a=>{a.waitUntil(fetch(createCacheBustedRequest(OFFLINE_URL)).then(function(a){return{return b.put(OFFLINE_URL,a)})}))}),self.addEventListener("activate",a=>{let b=Object.keys(CURRENT_CACHES).map(function(a){return CURRENT_CACHES[a]});a.waitUntil(caches.keys().then(a=>Promise.all(>{if(-1===b.indexOf(a))return console.log("Deleting out of date cache:",a),caches.delete(a)}))))}),self.addEventListener("fetch",a=>{("navigate"===a.request.mode||"GET"===a.request.method&&a.request.headers.get("accept").includes("text/html"))&&(console.log("Handling fetch event for",a.request.url),a.respondWith(fetch(a.request).catch(a=>(console.log("Fetch failed; returning offline page instead.",a),caches.match(OFFLINE_URL)))))});
    async function handleRequest(request) {
      return new Response(js, {
        headers: {
          "content-type": "application/javascript;charset=UTF-8",
    addEventListener("fetch", event => {
      return event.respondWith(handleRequest(event.request))
    Replace OFFLINE_URL with the URL address of the page in step 6
  8. Press Save and Deploy
  9. Then press the Back button
  10. Press Rename
  11. Rename it with worker
  12. Press the Cloudflare logo
  13. Choose your Blog domain
  14. Reach Workers
  15. Press Add route
  16. Type (replace with your Blog address)
  17. Select the Worker we created earlier
  18. Press Save

8. Add Links And Scripts To Your Blog Source Code

  1. Go to Blogger -> Themes -> Edit HTML.
  2. Find the </head> tag by pressing CTRL+F.
  3. Just before the </head> tag, put the following code:
    <link rel="apple-touch-icon" sizes="180x180" href="CHANGE WITH FAVICON IMAGE LINK SIZE 180 x 180"/> 
    <link rel="icon" type="image/png" sizes="32x32" href="CHANGE WITH FAVICON IMAGE LINK SIZE 32 x 32"/> 
    <link rel="icon" type="image/png" sizes="16x16" href="CHANGE WITH FAVICON IMAGE LINK SIZE 16 x 16"/> 
    <link rel="manifest" href="REPLACE WITH THE site.webmanifest LINK IN STEP 5"/>
  4. Look for the code </body>Put the following code on it
    <script type='text/javascript'>
    if('serviceWorker' in navigator) {
               .then(function() { console.log("Service Worker Registered"); });
  5. Save Theme

That's how to make a progressive web app for blogger. If you are confused about applying the tutorial above, you can use our services to do everything, click the button below

5$ PWA on Blogger

 This Works for Custom Domain only *

Some Important FAQ's related to PWA

What is PWA?

PWA stands for PROGRESSIVE WEB APP which converts your Web to a simple App without much lines of code.

How to make this on Blogger?

By following our Guide you can easily add a PWA on your website.

What is the use of CloudFlare?

To handle the online functionality and Coding appearing on our WebSite we will be using Cloudflare Proxies and Routes...


So that's how you can add a PWA to your WebSite without much coding knowledge. If you have any doubts or suggestions related to this post then do comment below...


About the Author

Hi, I am Anand Nawal and my motive is to give you the best guide over your Query☺️

إرسال تعليق

Cookie Consent
We have to use your Cookies to store your Browser Info to serve you Better Experience and make WebSite Fast..
Your Internet Connection is weakened. Please try Refreshing your Browser or Check your Internet Connection...
AdBlock Detected!
We detect that your are using some kind of AdBlocker which we can't allow.
The Revenue we generate with Ads is important for our WebSite to manage funds...
Site is Blocked
Sorry! This site is not available in your country.