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.

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

Hello! Welcome to Fineshop Design.

Activate Progressive Web App in Blogger
© Fineshop Design | Progressive Web App for Blogger

Since this post is outdated, the documentation is now available at github.com/kumardeo/blogger-pwa.

About the Author

~ Hello World!
#Blogger #Cloudflare #Web Development

48 comments

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

    Please made for blogspot.com
    1. Service Worker JS at url root is required for PWA.
    2. Now it supports blogspot.com subdomains.
  6. Make for us a video guide
    1. Sorry, but we don't make video guides currently. We will try our best if possible. 😌
  7. Can I do ds using smartphone?
    1. Yes, of course but follow all the steps carefully. 🙂
  8. Duy
    This comment has been removed by the author.
  9. Hey Thanks Ji! Great content. Jai Hind
    1. Thank you.
  10. The "main" no longer works... showing "Not Found". What am I not doing right?
    1. Which file you are trying to open? If you are trying to open android-icon-512x512.png, make sure you have uploaded it.
  11. I am unable to add route in worker section as add route option is not showing. Please help
    1. It will appear after selecting one of your domains from Websites Menu.
  12. Mine can't, on page www.dizhaowa.com/main/favicon.ico not accessible or 404 not found
    1. Make sure that subdomains are proxied in DNS management.
    2. Got it, thanks for the tutorial
  13. Please I want to change the favicons, but no matter what I do it goes back to the old one
    1. 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. Just a reminder, I have updated the post.
  14. this is the still working tutorial for adding pwa on blogger, easy to follow and implemented! Thanks!
    1. Does it work on blogspot blogger??
    2. No, you can't host service worker javascripts on .blogspot domain.
  15. Thank you for the explanation, but I could not run the link on the "statically.io" site, can you help me?
    1. Looks like statically cdn is not working, I will update the post in few weeks.
      Stay tuned.
    2. Hey, just a reminder!
      I have updated the post and now it doesn't use statically.io for static files.
  16. This is only for plus UI theme??
    1. No, It works on any theme.
  17. 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. Looks like you added some extra text while editing check line no. 26 of your code.
  18. I did everything. But I can't see the install notification
    1. Please follow the steps carefully, or share more information about the issue.
  19. 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. You need to add another screenshots in your manifest.json with "wide" as a value for "form_factor"
    2. Hello, thank you for your response, I did notice it when reviewing your website manifest. thanks if it works
    3. The updated tutorial natively supports specifying narrow and wide screenshots.
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