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 in Blogger
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 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 comment box. Thank you!

Copyright (c):
fineshopdesign.com

About the author

Deø Kumar
Lost in the echoes of another realm.

45 comments

  1. Godssword Edet
    Godssword Edet
    Good tutorial! Thank you, I'm trying it now.
    1. Deø Kumar
      Deø Kumar
      Yeah, sure! And sorry for the slow reply. 🙂
  2. Ezra Rahmaditya
    Ezra Rahmaditya
    thanks you 🙏🏼
    1. Deø Kumar
      Deø Kumar
      You're Welcome! ☺️
  3. Godssword Edet
    Godssword Edet
    Thanks once again. It's working now. Although I had to use a different sw.js file
    1. Deø Kumar
      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
      Godssword Edet
      Right! It's working fine with your sw.js now 😊
    3. Deø Kumar
      Deø Kumar
      Glad to know. 🙂
  4. Bholenath
    Bholenath
    Great, it works... didn't have faith that PWA was possible with a blogger site, but it works.
    1. Deø Kumar
      Deø Kumar
      Thanks for having a visit.
  5. Team Tokko
    Team Tokko
    It may for source.blogspot.com? This article for source.com.

    Please made for blogspot.com
    1. Deø Kumar
      Deø Kumar
      Service Worker JS at url root is required for PWA.
    2. Deø Kumar
      Deø Kumar
      Now it supports blogspot.com subdomains.
  6. سعدو للتقنية
    سعدو للتقنية
    Make for us a video guide
    1. Deø Kumar
      Deø Kumar
      Sorry, but we don't make video guides currently. We will try our best if possible. 😌
  7. BigTech
    BigTech
    Can I do ds using smartphone?
    1. Deø Kumar
      Deø Kumar
      Yes, of course but follow all the steps carefully. 🙂
  8. Share Today
    Share Today
    Hey Thanks Ji! Great content. Jai Hind
    1. Deø Kumar
      Deø Kumar
      Thank you.
  9. PrepsNG
    PrepsNG
    The "main" no longer works... showing "Not Found". What am I not doing right?
    1. Deø Kumar
      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
    Abhishek
    I am unable to add route in worker section as add route option is not showing. Please help
    1. Deø Kumar
      Deø Kumar
      It will appear after selecting one of your domains from Websites Menu.
  11. Rdhoasw
    Rdhoasw
    Mine can't, on page www.dizhaowa.com/main/favicon.ico not accessible or 404 not found
    1. Deø Kumar
      Deø Kumar
      Make sure that subdomains are proxied in DNS management.
    2. Rdhoasw
      Rdhoasw
      Got it, thanks for the tutorial
  12. Russell Nketiah Tannor
    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
      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
      Deø Kumar
      Just a reminder, I have updated the post.
  13. Fanny Sansiro
    Fanny Sansiro
    this is the still working tutorial for adding pwa on blogger, easy to follow and implemented! Thanks!
    1. World Radios and News
      World Radios and News
      Does it work on blogspot blogger??
    2. Deø Kumar
      Deø Kumar
      No, you can't host service worker javascripts on .blogspot domain.
  14. FTHGO
    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
      Deø Kumar
      Looks like statically cdn is not working, I will update the post in few weeks.
      Stay tuned.
    2. Deø Kumar
      Deø Kumar
      Hey, just a reminder!
      I have updated the post and now it doesn't use statically.io for static files.
  15. Dev
    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
      Deø Kumar
      Looks like you added some extra text while editing check line no. 26 of your code.
  16. Mohamed Gamal
    Mohamed Gamal
    I did everything. But I can't see the install notification
    1. Deø Kumar
      Deø Kumar
      Please follow the steps carefully, or share more information about the issue.
  17. Ronald Fabian Macias
    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
      Deø Kumar
      You need to add another screenshots in your manifest.json with "wide" as a value for "form_factor"
    2. Ronald Fabian Macias
      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
      Deø Kumar
      The updated tutorial natively supports specifying narrow and wide screenshots.
To avoid SPAM, all comments will be moderated before being displayed.