Home
Blogger
Cloudflare

How to build a PWA (Progressive Web App) with Push Notifications for Blogger

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) with Push Notifications for Blogger
Build a Progressive Web App for your Blogger Website 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…

About the author

Lost in the echoes of another realm.

45 comments

  1. Godssword Edet
    Good tutorial! Thank you, I'm trying it now.
    1. Deø Kumar
      Yeah, sure! And sorry for the slow reply. 🙂
  2. Ezra Rahmaditya
    thanks you 🙏🏼
    1. Deø Kumar
      You're Welcome! ☺️
  3. Godssword Edet
    Thanks once again. It's working now. Although I had to use a different sw.js file
    1. Deø Kumar
      I think Favicon at /main/favicon.ico is inaccessible that's why errors are occurring while running sw.js.
      Make sure you are able to open the following URL:
      www.your-domain.com/main/favicon.ico
      Or else change the favicon.ico source in sw.js
    2. Godssword Edet
      Right! It's working fine with your sw.js now 😊
    3. Deø Kumar
      Glad to know. 🙂
  4. Bholenath
    Great, it works... didn't have faith that PWA was possible with a blogger site, but it works.
    1. Deø Kumar
      Thanks for having a visit.
  5. Team Tokko
    It may for source.blogspot.com? This article for source.com.

    Please made for blogspot.com
    1. Deø Kumar
      Service Worker JS at url root is required for PWA.
    2. Deø Kumar
      Now it supports blogspot.com subdomains.
  6. سعدو للتقنية
    Make for us a video guide
    1. Deø Kumar
      Sorry, but we don't make video guides currently. We will try our best if possible. 😌
  7. BigTech
    Can I do ds using smartphone?
    1. Deø Kumar
      Yes, of course but follow all the steps carefully. 🙂
  8. Share Today
    Hey Thanks Ji! Great content. Jai Hind
    1. Deø Kumar
      Thank you.
  9. PrepsNG
    The "main" no longer works... showing "Not Found". What am I not doing right?
    1. Deø Kumar
      Which file you are trying to open? If you are trying to open android-icon-512x512.png, make sure you have uploaded it.
  10. Abhishek
    I am unable to add route in worker section as add route option is not showing. Please help
    1. Deø Kumar
      It will appear after selecting one of your domains from Websites Menu.
  11. Rdhoasw
    Mine can't, on page www.dizhaowa.com/main/favicon.ico not accessible or 404 not found
    1. Deø Kumar
      Make sure that subdomains are proxied in DNS management.
    2. Rdhoasw
      Got it, thanks for the tutorial
  12. Russell Nketiah Tannor
    Please I want to change the favicons, but no matter what I do it goes back to the old one
    1. Deø Kumar
      Thank you for reporting us.
      It is because Statically cache the assets on their server.
      I will update the post if possible.
      Stay tuned.
    2. Deø Kumar
      Just a reminder, I have updated the post.
  13. Fanny Sansiro
    this is the still working tutorial for adding pwa on blogger, easy to follow and implemented! Thanks!
    1. World Radios and News
      Does it work on blogspot blogger??
    2. Deø Kumar
      No, you can't host service worker javascripts on .blogspot domain.
  14. FTHGO
    Thank you for the explanation, but I could not run the link on the "statically.io" site, can you help me?
    1. Deø Kumar
      Looks like statically cdn is not working, I will update the post in few weeks.
      Stay tuned.
    2. Deø Kumar
      Hey, just a reminder!
      I have updated the post and now it doesn't use statically.io for static files.
  15. Dev
    i have already replace code "Hello Word!" to worker.js script... trying deploy get error like this:

    Uncaught ReferenceError: mmmm is not defined at worker.js:26:3 (Code: 10021)
    1. Deø Kumar
      Looks like you added some extra text while editing check line no. 26 of your code.
  16. Mohamed Gamal
    I did everything. But I can't see the install notification
    1. Deø Kumar
      Please follow the steps carefully, or share more information about the issue.
  17. Ronald Fabian Macias
    Everything works for me, the only problem is that I don't know why the screenshots (screen-1) are only displayed on mobile devices, and not from the PC desktop, like here.
    1. Deø Kumar
      You need to add another screenshots in your manifest.json with "wide" as a value for "form_factor"
    2. Ronald Fabian Macias
      Hello, thank you for your response, I did notice it when reviewing your website manifest. thanks if it works
    3. Deø Kumar
      The updated tutorial natively supports specifying narrow and wide screenshots.