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".

Example : Click on Download The Generated Icon

Step 6 :- Then Extract Now Download Favicon Zip File.

Step 7 :- Then Delete Marked Part File.

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.

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.

Example :- Create a Service on Cloudflare Workers

Step 21 :- Then Add Worker Name and Click on Create Service.

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.

Example :- Click on Quik Edit.

Step 24 :- Now Delete Old Codes and Paste Our First stm-worker1 Code.

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.

Example :- Click on Add Route

Step 28 :- Now Create Route For Offline Page Like. This is Current Worker stm-worker1 .

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