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.
How to build a PWA (Progressive Web App) for Blogger Site in 2024
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 | Fineshop Design 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 ha…

About the author

Lost in the echoes of another realm.

13 comments

  1. 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. Deø 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
      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. Deø 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
      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. Deø 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
      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. Deø Kumar
      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.
  2. 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. Deø Kumar
      Can you check Workers section in Cloudflare Dashboard, if the workers exist?
  3. Ronald Fabian Macias
    One last question, thank you, where is the file to modify the offline page?
    1. Deø Kumar
      bucket/app/fallback/index.html is the contents of Offline page.