Home
Blogger
Cloudflare

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.
Deo Kumar

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
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 separate native app.

Why is PWA Important?

A Progressive Web App is a website that behaves like an app on the user’s device. It loads quickly, is responsive to different devices, and can be accessed at any time without the need to download anything.

A Progressive Web App offers a better experience than a traditional website for both users and developers. It has features that are usually found in native apps such as push notifications, offline support, and home screen icons. This means that it will load faster, look better on all types of screens, have more functionality than a regular website, and will be available even when the device is offline.

How to build a PWA for Blogger

In order to build a Progressive Web App, you will need to add some features to your website. These features include service workers, which allow your site to work offline, and push notifications for when users return to your site. You can also install an Add-to-Home screen prompt on your website that prompts users to add your site or app to their home screen on their mobile device or desktop computer.

Full documentation is now available at github.com/kumardeo/blogger-pwa.

License

@kumardeo/blogger-pwa is licensed under the MIT License

Reporting Issues

If you are facing any issue or it doesn't work as expected, you can open an issue in this GitHub repository: @kumardeo/blogger-pwa

I shall try to fix issues and commit the changes.

Conclusion

This is all about building a PWA (Progressive Web App) for your Blogger Website. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in . Thank you!

About the author

Deo Kumar
deo@fineshopdesign:~$ echo "Hello World!"

20 comments

  1. Favour
    Favour
    I swear, this is more complicated than before
    1. Deo Kumar
      Deo Kumar
      😄, 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.
  2. MOJAHID
    MOJAHID
    Can i do only use a phone
    1. Deo Kumar
      Deo Kumar
      No
  3. MOJAHID
    MOJAHID
    How to do this only use a phone please post a new tips
    1. Deo Kumar
      Deo Kumar
      I will update the old post in few weeks which you can follow on your smartphone as well.
    2. Deo Kumar
      Deo Kumar
      You can read this post.
  4. Rachid Amaoui
    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 Kumar
      Deo Kumar
      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
      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 Kumar
      Deo Kumar
      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
      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 Kumar
      Deo Kumar
      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
      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 Kumar
      Deo Kumar
      Make sure you didn't initialize OneSignal multiple times using:
      OneSignal.init({...});
    8. Rachid Amaoui
      Rachid Amaoui
      Thanks for your answer. I had indeed forgotten to remove the Javascript code provided by OneSignal from the blog.
  5. Ronald Fabian Macias
    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 Kumar
      Deo Kumar
      Can you check Workers section in Cloudflare Dashboard, if the workers exist?
  6. Ronald Fabian Macias
    Ronald Fabian Macias
    One last question, thank you, where is the file to modify the offline page?
    1. Deo Kumar
      Deo Kumar
      bucket/app/fallback/index.html is the contents of Offline page.
To avoid SPAM, all comments will be moderated before being displayed.