How to Make Progressive Web App (PWA) for Blogger ?

How to Make Progressive Web App (PWA) for Blogger

Nowadays, there are various platforms for websites. The platforms are varied according to business purpose. One of the platforms is Blogger. Blogger is the best platform for blogger. Blogger provides different tools for our blog. It makes our blog more attractive. Blogger also allows adding plugin to make our blog more interesting. Blogger provides different tools for making the blog more user-friendly. One of these tools is creating PWA. So, what is PWA? Let's explore.

Progressive Web Apps (PWA) are web applications that combine the best of the web and the best of apps. The concept has been around for a while, but it's becoming more important as the mobile web continues to grow. In this article, I'll walk you through the process of creating a Progressive Web App for your Blogger blog, all in a few easy steps.


1. What is Progressive Web App?

Progressive Web App, often referred to as PWA, is a term created by Google to describe web applications that are installable and work offline. PWAs combine features of regular websites and mobile applications. They are installable on devices, can work offline, and send notifications to the user. In other words, PWAs offer the best of both worlds. Users can access them through a web browser, and they will work even if the user is not connected to the internet.

Progressive Web Apps are experiences that combine the best of the web and mobile apps. They are useful, fast, and engaging, with low data usage and offline support. PWAs use modern web capabilities to deliver an app-like experience to users.


2. What are PWA Features ?

Progressive web apps offer a lot of features that are not available on traditional websites. Here are some of the key features: - Offline support: Once you've installed a progressive web app, it will work even when you're not connected to the internet. - Speed: Progressive web apps are designed to load quickly, even on slow networks. - Push notifications: PWA can send push notifications to your users, even when they're not using the app. - Install on home screen: Users can "install" PWAs on their home screen, just like traditional apps. - Easy updates: Progressive web apps are updated automatically, just like traditional apps.


3. Why is it important to have PWA ?

The benefits of using a PWA for your Blogger site are numerous. Not only do PWAs offer an engaging and smooth user experience, but they're also incredibly reliable. They can be accessed even when there's no internet connection, and they're easy to install—you can add them to your home screen with just a few taps. Plus, they load quickly and are search engine friendly. In short, PWAs are the perfect way to provide a superior user experience for your readers.


4. Advantages of a PWA ?

PWAs offer several advantages over traditional web apps and even native apps. First, they're discoverable. Because they're installed on the user's device, they can be launched from the home screen or app launcher just like any other app. They can also be added to the user's home screen on Android devices with a simple tap. Next, they're fast. They're cached on the user's device so they load quickly, even in areas with slow or nonexistent internet connections. Finally, they're reliable. They work offline and even when the user's device is in Airplane Mode.


5. What is The Benefit Of Using PWA?

Progressive Web Apps (PWA) are experiences that combine the best of the web and mobile apps. They are built with modern web technologies and standards, and they make use of features that are available in most modern browsers. When a user visits a PWA, the app is able to detect this and provides an experience that is tailored for the web. This includes using the latest web APIs, which allow PWA to do things like use the device's camera, access the user's location, and more. In many cases, PWA can offer an app-like experience even when the user is not using a mobile device.


6. How To Make PWA ?

In this tutorial, we'll show you how to make a Progressive Web App for your Blogger blog. 3. How To Make PWA? To make a PWA, you'll need to create a manifest file and an icon. The manifest file tells the browser what to do when a user visits your site. The icon is the image that will be displayed on the user's device when your site is added to their home screen. You can create a manifest file and icon using a tool like Webpack or a code editor.


7. Where To Find More Information On PWA?

PWAs are a popular web development trend at the moment. They offer many benefits over traditional websites, such as faster loading times, improved user experience, and increased conversions. However, they can be quite complex to develop. If you're not familiar with the term, Progressive Web Apps are websites that are built using modern web technologies and that offer the same features as traditional apps. They're installed on the user's device like a regular app, but they can also be accessed through a web browser. For more information on PWAs, check out this article from Google.


8. What's the difference between Native App vs Progressive Web App (PWA) ?

Progressive web apps are web apps that load like regular websites but offer some features of native apps. They're designed to work offline, and they can be added to your device's home screen just like a native app. One of the main benefits of PWAs is that they're much cheaper and quicker to develop than native apps. They also have the advantage of being accessible to a much wider range of users, since they don't require the download of a separate app. So why would you choose to develop a PWA rather than a native app? Well, PWAs offer a number of benefits that native apps can't match, such as increased speed, reliability and engagement.


9. How to Make Progressive Web App (PWA) for Blogger :-

Creating a Progressive Web App (PWA) on your Blogger site is a great way to improve user experience, boost engagement, and increase Traffic. In this article, we'll show you how to make a PWA on Blogger sites in some easy steps.

Step 1 :- First Create Your Favicon in 512×512 Size With Png Format.
Step 2 :- Then Open This Favicon Generator Tool.
Step 3 :- After Click on Choose File and Select Your Favicon Png Image.
Step 4 :- Then Click on Create Favicon.
Step 5 :- Then Click on "Download The Generated Favicon".
How to Make Progressive Web App (PWA) for Blogger
Example : Click on Download The Generated Icon

Step 6 :- Then Extract Now Download Favicon Zip File.
Step 7 :- Then Delete Marked Part File.
How to Make Progressive Web App (PWA) for Blogger
Example :- Delete The Marked File

Step 8 :- Then Login Your Blogger Account.
Step 9 :- Then Click on Theme Menu > Edit Html.
Step 10:- Then Put the Below Code Under <head> Tag.
<meta content='#6200ee' name='theme-color' />
<meta content='#6200ee' name='msapplication-navbutton-color' />
<meta content='#6200ee' name='apple-mobile-web-app-status-bar-style' />
<meta content='true' name='apple-mobile-web-app-capable' />
<link href="/favicon.ico" rel='icon' type='image/x-icon' />
<link href="/favicon.ico" rel='shortcut icon' type='image/x-icon' />
<link href="/main/apple-icon-57x57.png" rel='apple-touch-icon' sizes='57x57' />
<link href="/main/apple-icon-60x60.png" rel='apple-touch-icon' sizes='60x60' />
<link href="/main/apple-icon-72x72.png" rel='apple-touch-icon' sizes='72x72' />
<link href="/main/apple-icon-76x76.png" rel='apple-touch-icon' sizes='76x76' />
<link href="/main/apple-icon-114x114.png" rel='apple-touch-icon' sizes='114x114' />
<link href="/main/apple-icon-120x120.png" rel='apple-touch-icon' sizes='120x120' />
<link href="/main/apple-icon-114x114.png" rel='apple-touch-icon' sizes='144x144' />
<link href="/main/apple-icon-152x152.png" rel='apple-touch-icon' sizes='152x152' />
<link href="/main/apple-icon-180x180.png" rel='apple-touch-icon' sizes='180x180' />
<link href="/main/android-icon-192x192.png" rel='icon' sizes='192x192' type='image/png' />
<link href="/main/favicon-32x32.png" rel='icon' sizes='32x32' type='image/png' />
<link href="/main/favicon-96x96.png" rel='icon' sizes='96x96' type='image/png' />
<link href="/main/favicon-16x16.png" rel='icon' sizes='16x16' type='image/png' />
<meta content='#007fa0' name='msapplication-TileColor' />
<meta content='/main/ms-icon-144x144.png' name='msapplication-TileImage' />
<link href="/manifest.json" rel='manifest' />
Step 11 :- Now Click On Save Theme.
Step 12 :- After Go To GitHub and Complete Login Or Signup Process.
Step 13 :- Then Click on Repository Section and Click On Create New Repository.
How to Make Progressive Web App (PWA) for Blogger
Example :- Create Repository on Github Like This.

Read Full Tutorial About :- How to host HTML, Css and JavaScript on GitHub ?

Add Repository Title For Example :- stm-icon

Step 14 :- Then Click on Add File > Upload Files.
Step 15 :- Then Select All Created Favicon and Upload Now.
Step 16 :- Then Click on Commit File.
Step 17 :- Then Login Your Cloudflare Account and Select Your Website.

Note :- Must Be Your Website on Cloudflare Required. This is Tutorial Only For Custom Domain User, Not Blogspot.Com Subdomain User.

Step 18 :- Then Click on Workers Section.
Step 19 :- After Click on Manage Worker.
Step 20 :- Then Click on Create Service.
How to Make Progressive Web App (PWA) for Blogger
Example :- Create a Service on Cloudflare Workers

Step 21 :- Then Add Worker Name and Click on Create Service.
How to Make Progressive Web App (PWA) for Blogger
Example : How to Create Worker / Service on Cloudflare

Make Sure Add Worker Name Example :- stm-worker1.

Step 22 :- Then Create New 3 More New Services With Same Way , Add name Like This:
  • stm-worker2
  • stm-worker3
  • stm-worker4
Step 23 :- Now Open stm-worker1 Service and Click on Quik Edit.
How to Make Progressive Web App (PWA) for Blogger
Example :- Click on Quik Edit.

Step 24 :- Now Delete Old Codes and Paste Our First stm-worker1 Code.
How to Make Progressive Web App (PWA) for Blogger
Example :- How to Edit Workers / Service on Cloudflare

stm-worker1 Code
const html = `<!DOCTYPE html>
<head>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
</head>
<body style=" background: #fff; ">
<div style=" margin: 0 auto; max-width: 1000px; text-align: center; padding-top: 100px; color: #111; ">
<div style=" font-family: Arial,Helvetica,sans-serif; font-size: 50px; ">Oops, You're Offline!</div>
<div style=" font-family: Georgia,'Times New Roman',serif; font-size: 20px; padding-top: 40px; ">It looks like your network connection isn't working right now.</div>
</div> </body>`

async function handleRequest(request) {
  return new Response(html, {
    headers: {
      "content-type": "text/html;charset=UTF-8",
    },
  })
}

addEventListener("fetch", event => {
  return event.respondWith(handleRequest(event.request))
})

Cloudflare Not Supported Any Android Phone Default Keyword. Make Sure You Have Laptop Keyword.


  • First Copy stm-worker1 Code and Back to Cloudflare.
  • Then Use CTRL+ ALT +A and Select All Old Codes.
  • Now Use CTRL+ +V and Replace All Codes.

  • Step 25 :- Now Click on Save and Deploy.
    Step 26 :- Then Use Same Way to Edit 3 Remainning Services :- stm-worker2, stm-worker3, stm-worker4.

    Remainning Services Code Here :-

    stm-worker2 Codes.
    const js = `
    importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
    if (workbox) {
    workbox.core.skipWaiting();
    workbox.core.clientsClaim();
    workbox.core.setCacheNameDetails({
      prefix: 'thn-sw',
      suffix: 'v22',
      precache: 'install-time',
      runtime: 'run-time'
    });
    
    const FALLBACK_HTML_URL = '/offline.html';
    const version = workbox.core.cacheNames.suffix;
    workbox.precaching.precacheAndRoute([{url: FALLBACK_HTML_URL, revision: null},{url: '/manifest.json', revision: null},{url: '/favicon.ico', revision: null}]);
    
    workbox.routing.setDefaultHandler(new workbox.strategies.NetworkOnly());
    
    workbox.routing.registerRoute(
        new RegExp('.(?:css|js|png|gif|jpg|svg|ico)$'),
        new workbox.strategies.CacheFirst({
            cacheName: 'images-js-css-' + version,
            plugins: [
                new workbox.expiration.ExpirationPlugin({
                    maxAgeSeconds: 60 * 24 * 60 * 60,
                    maxEntries:200,
                    purgeOnQuotaError: true
                })
            ],
        }),'GET'
    );
    
    workbox.routing.setCatchHandler(({event}) => {
          switch (event.request.destination) {
            case 'document':
            return caches.match(FALLBACK_HTML_URL);
          break;
          default:
            return Response.error();
      }
    });
    
    self.addEventListener('activate', function(event) {
      event.waitUntil (
        caches
          .keys()
          .then(keys => keys.filter(key => !key.endsWith(version)))
          .then(keys => Promise.all(keys.map(key => caches.delete(key))))
      );
    });
    
    }
    else {
        console.log('Boo! Workbox didnt load ');
    }
    `
    
    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))
    })
    stm-worker3 Codes.
    addEventListener("fetch", event => {
      event.respondWith(handleRequest(event))
    })
    
    //const BUCKET_NAME = "main"
    const BUCKET_URL = `https://cdn.statically.io/gh/smarttechmukesh/mukeshwidgets-icon`
    
    async function serveAsset(event) {
      const url = new URL(event.request.url)
      const cache = caches.default
      let response = await cache.match(event.request)
    
      if (!response) {
        response = await fetch(`${BUCKET_URL}${url.pathname}`)
        const headers = { "cache-control": "public, max-age=14400" }
        response = new Response(response.body, { ...response, headers })
        event.waitUntil(cache.put(event.request, response.clone()))
      }
      return response
    }
    
    async function handleRequest(event) {
      if (event.request.method === "GET") {
        let response = await serveAsset(event)
        if (response.status > 399) {
          response = new Response(response.statusText, { status: response.status })
        }
        return response
      } else {
        return new Response("Method not allowed", { status: 405 })
      }
    }

    Marked "smarttechmukesh" Replace With Your Github Username.

    Marked "mukeshwidgets-icon" Replace With Your Recently Created Repository Name For Github.

    stm-worker4 Codes.
    addEventListener("fetch", event => {
      const data = {
        name: "Mukesh Widgets",
        short_name: "Mukesh Widgets",
        display: "standalone",
        prefer_related_applications: false,
        start_url: ".",
        scope: "\/",
        background_color: "#fff",
        theme_color: "#6200ee",
        description: "Mukesh Widgets is a site that provides the best widgets with a wide variety of styles for the Blogger platform, complete with very easy installation tutorials.",
        icons:[
          {
          src: "\/main\/android-icon-36x36.png",
          sizes: "36x36",
          type: "image\/png",
          density: "0.75",
          purpose: "any maskable"
          },
          {
          src: "\/main\/android-icon-48x48.png",
          sizes: "48x48",
          type: "image\/png",
          density: "1.0",
          purpose: "any maskable"
          },
          {
          src: "\/main\/android-icon-72x72.png",
          sizes: "72x72",
          type: "image\/png",
          density: "1.5",
          purpose: "any maskable"
          },
          {
          src: "\/main\/android-icon-96x96.png",
          sizes: "96x96",
          type: "image\/png",
          density: "2.0",
          purpose: "any maskable"
          },
          {
          src: "\/main\/apple-icon-144x144.png",
          sizes: "144x144",
          type: "image\/png",
          density: "3.0",
          purpose: "any maskable"
          },
          {
          src: "\/main\/android-icon-192x192.png",
          sizes: "192x192",
          type: "image\/png",
          density: "4.0",
          purpose: "any maskable"
          },
          {
          src: "\/main\/android-icon-512x512.png",
          sizes: "512x512",
          type: "image/png",
          density: "4.0",
          purpose: "any maskable"
          },
        ],
      "serviceworker": {
        "src": "/sw.js"
      }
      }
    
      const json = JSON.stringify(data, null, 2)
    
      return event.respondWith(
        new Response(json, {
          headers: {
            "content-type": "application/json;charset=UTF-8"
          }
        })
      )
    })

    Replace All Marked Part According To You.

    Step 27 :- Now Back and Again Open Workers Section Then Click on Add Route.
    How to Make Progressive Web App (PWA) for Blogger l
    Example :- Click on Add Route

    Step 28 :- Now Create Route For Offline Page Like. This is Current Worker stm-worker1 .
    How to Make Progressive Web App (PWA) for Blogger
    Example :- Add Route and Service, Environment Like This

    Step 29 :- Then Use Same Way to Add 3 Remainning Route :- stm-worker2, stm-worker3, stm-worker4.

    No Service Environment Route
    1 stm-worker1 production www.example.com/offline.html
    2 stm-worker2 production www.example.com/sw.js
    3 stm-worker3 production www.example.com/main/*
    4 stm-worker4 production www.example.com/manifest.json

    Step 30 :- Now Close Cloudflare and Go to Blogger.
    Step 31 :- Finally, Again Login Your Blogger Account.
    Step 32 :- Then Copy The Given Code and Put it Above The </body>.
    <script type='text/javascript'>
      //<![CDATA[
    if('serviceWorker' in navigator) {
      navigator.serviceWorker
               .register('/sw.js')
               .then(function() { console.log("Service Worker Registered"); });
    }
    //]]>
    </script>
    Step 33 :- Finally, Save Theme and See The Results.

    Conclusion :-

    We have mentioned the best and best way to make PWA. Many ways have been told by people on the internet to make PWA, but most of the methods are not working at the moment.

    In this post I have shared with you all how to make Progressive Web App (PWA) on Blogger. I hope you all liked this post very much. If you have any problem related to this post then you can tell us by commenting. If you did not understand this post, then we have also made a video tutorial which is available on YouTube channel which you can watch and understand. Thank you for visiting our website.

    Reference:
    smarttechmukesh.com

    Admin

    Hey there! My name is Mukesh Kushwaha, I am a Professional Web Designer, Graphic Designer, UI/UX Designer, Logo Designer and Banner Designer. I am Content Creator from Bihar State, India. I love coding and editing, so I always try to create something new and interesting.

    25 Comments

    Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.

    1. Do we have to use www in 29th step?

      ReplyDelete
      Replies
      1. Www not Required in 29th Step. Only Replace Your Domain With Example.Com.

        Delete
      2. It didnt work the first time without www. After adding it, it worked perfectly 👌

        Delete
    2. Good tutorial... It worked.. Expecting tutorial on editing "add to home screen" banner customisation 😂

      ReplyDelete
    3. https://www.anandnawal.com/sw.js?m=1
      See sw.js error coming even after following every step carefully🥲

      ReplyDelete
      Replies
      1. I already applied, then shared this tutorial. I know you have missed some steps.

        Delete

    4. Hello your website is very good and informative.Our website 1upbiz is a platform that provides cutting edge information and integrated digital solutions with a 100% focus on SME’s. This is a web-based information management portal which makes accessible all the relevant information that SME’s require
      to begin their digitization journey.
      1UPbiz, SME & SMB Technologies

      ReplyDelete
    5. Thanks for the guide its working perfectly, only thing is it's only working in andriod can you please help me to get pwa in windows and other platforms too

      ReplyDelete
    6. Bro I made pwa for my site with the same way , but mine doesn't promote with screen shots while requesting to install

      ReplyDelete
    7. hi thanks
      its work with me, thaaaaaaaanks

      but i have some questions

      1- How can I send notification message to the users which install this web app?


      ReplyDelete
      Replies
      1. Thanks, But Not Possible To Send Any Message To Installed User.

        Delete
    8. Hello bro, actually I have a question is which one you use full or flexible on Cloudflare for your domain https://www.smarttechmukesh.com/

      ReplyDelete
    9. Hi, Everything is working fine but one issue.
      I uploaded favicons in github and i gave same github user name and respository name in stm-worker. In my website there is an error in console that 404 error for that specific image urls. Please let me know how to resolve this issue

      ReplyDelete
      Replies
      1. Send Your Github Repo Screenshot and your stm-worker3 Sccrenshot In our Telegram Group

        Delete
    10. my website url is https://www.html-tools.com/

      ReplyDelete
      Replies
      1. Ok, I Will Checked Your Website. see your Previous Comment

        Delete
    11. Mukesh Bhai wpa ka shere targate app banao

      ReplyDelete
    12. Bhai wpa shere target par article likho

      ReplyDelete
    Previous Post Next Post