We are also on YouTube! Subscribe

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

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hello Everyone! Welcome Back to TechiFeed. I have written a new informative post for you to read. So, Keep reading to find out more!

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

Web App (PWA) for Blogger

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

There are rumors on the internet that You cannot build Progressive Web Apps (PWA) for the Blogger platform. But today, I will show you that it is incorrect.

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

What are Progressive Web Apps?


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

It will direct you to install the Android application when you click the "Add to Home screen" button.

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

In addition, activating the Progressive Web App feature on Blogger will indirectly improve the quality of our Blog in the eyes of search engines.

So, now that you have a clear picture of what a PWA is, let's start learning how to build a Progressive Web App for a Blogger site.

Your Blog must be on a top-level domain and connected to Cloudflare to create a complete PWA, along with Service Worker support. Because Blogger doesn't allow us to upload files in its directory, we need to upload the serviceworker.js file in our site directory using Cloudflare Workers.

Steps to Make a Progressive Web App for Bloggers


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

1. How to Create a Recommended Favicon


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

Go to https://favicon.io (it's the best site I've found till now for this purpose)

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

Tip: Change the background color value to #FFFFFF00 if you utilize the "Generate from Text" option and want your logo background to be translucent.

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

  • favicon-16×16. png
  • favicon-32×32. png
  • android-chrome-192×192.png
  • android-chrome-512×512.png
  • apple-touch-icon.png
  • site. webmanifest

2. Reduce Image Size (Optional)


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

3. Upload Images to the Blogger Page


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

After uploading, ensure the image uses the original size. After that, leave it in Draft form.

Then change it to the Edit HTML version to see the image link.

4. Create a file site.webmanifest


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

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

Please copy the code below and paste it into your site web manifest file.
{
    "name": "techifeed.com",
    "short_name": "techifeed",
    "icons": [
        {
            "src": "https://1.bp.blogspot.com/-Ux6Xn8oqNRk/YYZp79uTZQI/AAAAAAAAcj4/SVR_H7IYdyIceoptrpcIbt8-qPbpP9KjgCLcBGAsYHQ/s0/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any maskable"
        },
        {
            "src": "https://1.bp.blogspot.com/-9uJWThk_xmw/YYZp7ysG5eI/AAAAAAAAckA/NsC5lPYgd1A6P4F6uoFl7nxWnexgVm1mwCLcBGAsYHQ/s16000/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any maskable"
        }
    ],
    "theme_color": "#3291d1",
    "background_color": "#ffffff",
    "display": "standalone",
    "prefer_related_applications": false,
  "start_url": "https://www.techifeed.com"
}
Information:

  • Replace name and short_name with your blog name
  • Replace the src URL with the Favicon link that we previously published. Make sure it matches the size listed. Notice the text I've 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. Please register first if you still need to do so.
  3. After Login, press New
  4. Replace the name of the repository with the name of the PWA.
  5. Press Create repository
  6. Upload the site. webmanifest file using the uploading of an existing file link
  7. Choose your file
  8. Select the site. webmanifest file that we edited earlier.
  9. Click Commit changes
  10. Press site. webmanifest
  11. Click Raw
  12. Copy the URL address.

6. Create Pages For PWAs To Use When the Device Is Offline


Create a new page on your Blog with the title – "Offline Page For PWA." You can write anything the way you want.

This page will be displayed to users when they open your PWA while the device has no internet connection.

Remember to Publish the Page.

7. Manage Service Workers Using Cloudflare Workers


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

  1. Log in to your Cloudflare account, go to your Blog, and click 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 whatever name you like.
  4. Press Setup
  5. Pilih Continue with Free
  6. Create a Worker
  7. Delete all of the scripts on the left and replace them with the script code below.
const js = `
'use strict';
const CACHE_VERSION=1;
let CURRENT_CACHES={offline:"offline-v1"};
const OFFLINE_URL="/p/offline-page-for-pwa.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 c.search+=(c.search?"&":"")+"cachebust="+Date.now(),new Request(c)}self.addEventListener("install",a=>{a.waitUntil(fetch(createCacheBustedRequest(OFFLINE_URL)).then(function(a){return caches.open(CURRENT_CACHES.offline).then(function(b){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(a.map(a=>{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))
})
  1. Replace OFFLINE_URL with the page URL address in step 6
  2. Press Save and Deploy
  3. Then press the Back button.
  4. Press Rename
  5. Rename it to Worker
  6. Press the Cloudflare logo
  7. Choose your Blog domain.
  8. Reach Workers
  9. Press Add route
  10. Type www.techifeed.com/sw.js (replace www.techifeed.com with your blog address)
  11. Select the Worker we created earlier
  12. Press Save

8. Add Links And Script 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="GANTI DENGAN LINK GAMBAR FAVICON UKURAN 180 x 180"/> 
<link rel="icon" type="image/png" sizes="32x32" href="GANTI DENGAN LINK GAMBAR FAVICON UKURAN 32 x 32"/> 
<link rel="icon" type="image/png" sizes="16x16" href="GANTI DENGAN LINK GAMBAR FAVICON UKURAN 16 x 16"/> 
<link rel="manifest" href="REPLACE WITH THE LINK site.webmanifest in step 5"/>
  1. Find code </body>
  2. Please put the following code on it.
<script type='text/javascript'>

if('serviceWorker' in navigator) {
  navigator.serviceWorker
           .register('/sw.js')
           .then(function() { console.log("Service Worker Registered"); });
}
</script>
Finally, Save the Theme

Frequently Asked Questions


What is a Progressive Web App (PWA)?

A Progressive Web App (PWA) is a type of web application that combines the features of a traditional website with the functionality of a native mobile app. It can be installed on a user's device and accessed like a regular app, but it is developed using web technologies such as HTML, CSS, and JavaScript.

Why should I create a PWA for my Blogger site?

There are several benefits to creating a PWA for your Blogger site: Improved performance: PWAs load faster and work offline, providing a better user experience. Increased engagement: PWAs can send push notifications and be added to the home screen, which can help to increase user engagement. Cross-platform compatibility: PWAs work on all modern devices, regardless of the operating system.

How do I create a PWA for my Blogger site?

To create a PWA for your Blogger site, you must have a working Blogger site with a custom domain. Create a manifest file and link to it in the head of your Blogger template. Add a service worker file and register it in your Blogger template. Test your PWA using Lighthouse, a tool for auditing web apps.

Are there any limitations to creating a PWA for my Blogger site?

PWAs cannot access the same native device features as a traditional mobile app, such as the camera or biometric authentication. Dependence on a network connection: While PWAs can work offline to some extent, they still rely on a network connection for many of their features. Browser support: Some older browsers may only support some of the features of a PWA.

Can I monetize my PWA?

You can monetize your PWA in several ways, such as advertising, sponsorships, and selling digital or physical products. You can also consider using a service such as Google AdSense to display targeted ads on your PWA.

Stay Connected

I hope you liked the above informative content. Please share this post and follow our blog for more great content.

If you have any questions or problems, feel free to ask in the comments section.

© Copyright: TechiFeed

About the Author

Hi, I am a good student and a part-time blogger.

Post a Comment

To avoid SPAM, all comments will be moderated before being displayed.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser. The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.