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.

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

Hello! Welcome to Fineshop Design.

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.

Blogger PWA
© Fineshop Design | 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

~ Hello World!
#Blogger #Cloudflare #Web Development

16 comments

  1. I swear, this is more complicated than before
    1. 😄, 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. Can i do only use a phone
    1. No
  3. How to do this only use a phone please post a new tips
    1. I will update the old post in few weeks which you can follow on your smartphone as well.
    2. You can read this post.
  4. 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. 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. 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. 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. 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. 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. 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. Make sure you didn't initialize OneSignal multiple times using:
      OneSignal.init({...});
    8. Thanks for your answer. I had indeed forgotten to remove the Javascript code provided by OneSignal from the blog.
To avoid SPAM, all comments will be moderated before being displayed.
Don't share any personal or sensitive information.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details