How to build a PWA (Progressive Web App) for Blogger Site in 2024

Build a Progressive Web App for your Blogger Website to enhance your visitors' experience in an easy way.

Build a Progressive Web App for your Blogger site to enhance your visitors' experience in an easy way. Have you ever noticed on some website when you visit, it shows an Add To Home Screen prompt? If yes and you also want to create for your website then you are at the right place. Progressive Web App for Blogger In this article, I will guide you to build a PWA ( Progressive Web app ) for your website in an easy way. So, before you start the process to set up PWA For your website, you must know what is PWA and why it is important for your website. What is PWA (Progressive Web App) Progressive web apps are a new way to create native-like experiences on the web. They combine the best of both worlds, providing users with the best of a website and an app. A Progressive Web App is a webview app that can be installed on your phone or tablet like an app, but it's built with web technologies. This means you can add features like push notifications and offline support without having to build a se…

About the author

~ Hello World!

20 comments

Favour

I swear, this is more complicated than before
1. Deo K.
  
  😄, If you follow correctly, you will find it easier as it generates all the required files with very few modifications. The post is lengthy due to installation guides of tools. Feel free to ask anything.
MOJAHID

Can i do only use a phone
1. Deo K.
  
  No
MOJAHID

How to do this only use a phone please post a new tips
1. Deo K.
  
  I will update the old post in few weeks which you can follow on your smartphone as well.
2. Deo K.
  
  You can read this post.
Rachid Amaoui

Hi, Do the limits of Cloudflare not pose a problem for a website that generates a considerable amount of daily visits?
Thanks for the tutorial
1. Deo K.
  
  You may consider switching to Paid Plan of workers if you hit the free daily limits as once you hit it all the network requests to workers will fail.
2. Rachid Amaoui
  
  Hi again i wanna thankyou for your answer.I don't know why it works for me and not for some friends.
  In fact, do you have a way to add the OpenSignal service worker to enable push notifications since Blogger doesn't allow hosting JS files? Thanks for everything
3. Deo K.
  
  As we can register only single service worker in a scope, you need to add all the scripts in a single file.
  Simply add your push notification service workers code to serviceworker.js and you are good to go 😃.
  And what does "It works for me but not for my friends" mean?
  I mean, are you trying to say that it works on your device but not on others'?
  Or
  PWA works on your blog but not on your friends' blog?
4. Rachid Amaoui
  
  Hi, I've been trying to see if push notifications work. So I subscribed to the notifications from my phone and made sure that my phone was displayed in the OneSignal dashboard.
  After that, i sent a test notification to my phone, but unfortunately no message is displayed.
  Is it possible that there is a conflict between the PWA and OneSignal code?
  Thank you very much.
5. Deo K.
  
  Yes, as OneSignal tries to register service worker with filename OneSignalSDKWorker.js at root with scope /, which doesn't exist. As we only route /app/*, so we need a workaround for both to work together (Workbox service worker and OneSignal service worker).
  Currently you have 3 options:
  1. Today, I have updated the old post (same topic: Building PWA) and I have implemented all the required files, codes to integrate OneSignal. You can use that instead of this.
  2. Wait for few weeks, as I will update this post too for OneSignal integration.
  3. If you know coding, you can implement it from old post.
6. Rachid Amaoui
  
  Many thanks, it works now thanks to your hard work. By the way, even if it's working, i've got a message in Chrome's Console: pwa.js:31 SdkInitError: OneSignal: The OneSignal web SDK can only be initialized once. Extra initializations are ignored. Please remove calls initializing the SDK more than once.
  at Li.errorIfInitAlreadyCalled (InitHelper.js:417:19)
  at Mn. (OneSignal.js:106:20)
  at Generator.next ()
  at r (tslib.es6.js:118:58).
  Did i do something wrong??
7. Deo K.
  
  Make sure you didn't initialize OneSignal multiple times using:
  OneSignal.init({...});
8. Rachid Amaoui
  
  Thanks for your answer. I had indeed forgotten to remove the Javascript code provided by OneSignal from the blog.
Ronald Fabian Macias

Everything is fine until I get to the part about adding a route, the service (worker) with the name blogger-pwa-kv never appears. I write the route of my page but it doesn't appear. Could you help me? Thanks.
1. Deo K.
  
  Can you check Workers section in Cloudflare Dashboard, if the workers exist?
Ronald Fabian Macias

One last question, thank you, where is the file to modify the offline page?
1. Deo K.
  
  bucket/app/fallback/index.html is the contents of Offline page.