The site is under maintenance.

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.

Also read the updated post which uses Cloudflare Wrangler CLI.
What's updated?
1. You no longer need to create multiple Workers app which means only 1 route.
2. Easy to update the files.
3. Uses ES Modules format for Workers.

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.

Activate Progressive Web App in Blogger
© 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.

This tutorial may be a bit difficult to understand, but if you follow all the steps correctly, you will surely be able to build a PWA for your Blogger Website.

This process requires a Custom Domain with the integration of Cloudflare, and it can't be done on the .blogspot subdomain with this process. With .blogspot you can't set up service worker.


Before we begin, you must be aware about Cloudflare Workers Limits. If your blog has large number of visitors, you may hit these limits and it may affect the site performance as well as user experience. To solve this issue, you may consider switching to Paid plan.


Before we start, there are several things which must be required for Activating PWA:

  1. DNS must be managed by Cloudflare (Note: Proxy must be enabled).
  2. A Blog Icon of ratio 1:1 with a minimum size of 512x512 in .png extension.
  3. 5 Preview images for your webpages of size 540x720 in .png extension.
  4. Must have a GitHub Account.

Forking Repository

Sign in to your GitHub account and fork @kumardeo/blogger-pwa-github repository.

You can also create a new branch and make changes there so that you can create PWA for multiple blogs using same repository. It is recommended that you don't make changes in main branch.

Uploading Icons

  1. Prepare an icon for your blog in .png extension with a size of 512x512 (recommended file size: maximum 150KB).
    *Rename the file as android-icon-512x512.png
  2. Go to and upload the Blog Icon.
  3. Download the generated favicon and extract the files.
  4. *Delete unnecessary files like:
  5. Upload these icons in app/icons directory in the main branch of forked repository.
    *Upload the original file as well, i.e. android-icon-512x512.png.
    Total number of icons will be approximately 26.

Uploading Screenshots

  1. Prepare 5 screenshots of your Webpages of size 540x720 in .png extension that will appear when it shows the install button (recommended file size: maximum 750KB each).
  2. Name the screenshots in series:
  3. Upload all these screenshots in app/screenshots directory in the main branch of forked repository.


  1. Go to forked repository and open app/manifest.json file.
  2. The file looks something like the following:
      "version": "1.0",
      "name": "My Blog",
      "short_name": "My Blog",
      "description": "My blog description goes here...",
      "dir": "auto",
      "lang": "en-US",
      "orientation": "any",
      "start_url": "/?utm_source=homescreen",
      "scope": "/",
      "display": "standalone",
      "prefer_related_applications": false,
      "background_color": "#fff",
      "theme_color": "#fff",
      "icons": [
          "src": "icons/favicon.ico",
          "sizes": "16x16 24x24 32x32 64x64",
          "type": "image/x-icon"
          "src": "icons/android-icon-36x36.png",
          "sizes": "36x36",
          "type": "image/png",
          "purpose": "any maskable"
          "src": "icons/android-icon-48x48.png",
          "sizes": "48x48",
          "type": "image/png",
          "purpose": "any maskable"
          "src": "icons/android-icon-72x72.png",
          "sizes": "72x72",
          "type": "image/png",
          "purpose": "any maskable"
          "src": "icons/android-icon-96x96.png",
          "sizes": "96x96",
          "type": "image/png",
          "purpose": "any maskable"
          "src": "icons/android-icon-144x144.png",
          "sizes": "144x144",
          "type": "image/png",
          "purpose": "any maskable"
          "src": "icons/android-icon-192x192.png",
          "sizes": "192x192",
          "type": "image/png",
          "purpose": "any maskable"
          "src": "icons/android-icon-512x512.png",
          "sizes": "512x512",
          "type": "image/png",
          "purpose": "any maskable"
      "screenshots": [
          "src": "screenshots/screen-1.png",
          "type": "image/png",
          "sizes": "540x720"
          "src": "screenshots/screen-2.png",
          "type": "image/png",
          "sizes": "540x720"
          "src": "screenshots/screen-3.png",
          "type": "image/png",
          "sizes": "540x720"
          "src": "screenshots/screen-4.png",
          "type": "image/png",
          "sizes": "540x720"
          "src": "screenshots/screen-5.png",
          "type": "image/png",
          "sizes": "540x720"
      "shortcuts": [
          "name": "My Shortcut 1",
          "short_name": "My Shortcut 1",
          "description": "My Shortcut 1 description goes here...",
          "url": "/search/label/my-shortcut-1?utm_source=homescreen",
          "icons": [
              "src": "icons/android-icon-192x192.png",
              "sizes": "192x192"
          "name": "My Shortcut 2",
          "short_name": "My Shortcut 2",
          "description": "My Shortcut 2 description goes here...",
          "url": "/search/label/my-shortcut-2?utm_source=homescreen",
          "icons": [
              "src": "icons/android-icon-192x192.png",
              "sizes": "192x192"
  3. *Edit and Replace the marked parts as per your need and commit the changes.

    Shortcut's url field must not point to url that is out of scope.
    It is recommended that you use relative url instead of absolute url in the url field of shortcut, i.e. /search/label/Science instead of
    Try to not to add more than 3 shortcuts in the array.

    Also note down the color code.

Learn more about Web app manifests.


  1. Go to forked repository and open app/browserconfig.xml file.
  2. The file looks something like the following:
    <?xml version="1.0" encoding="utf-8"?>
          <square70x70logo src="/app/icons/ms-icon-70x70.png"/>
          <square150x150logo src="/app/icons/ms-icon-150x150.png"/>
          <square310x310logo src="/app/icons/ms-icon-310x310.png"/>
  3. *Edit and Replace the marked color code same as manifest.json color code and commit the changes.

Learn more about Browser configuration files.


  1. Go to forked repository and open worker.js file, copy its content to any text editor.
  2. Find the following code:
    const APP_CONFIG = {
      app: {
        name: 'fineshop-pwa-app'
      github: {
        username: '<username>',
        repository: '<repository>',
        branch: '<branch>',
         * If the repository is private, provide token as string
         * otherwise keep it null
        token: null
      cacheConfig: {
        cache: 'pwa-app',
        browserTTL: 2 * 60 * 60 * 24,
        edgeTTL: 2 * 60 * 60 * 24,
        defaultEtag: 'strong',
         * This field is for Development purpose only to bypass cache
         * Keep it false in order to serve cached responses
        bypassCache: false
  3. *Replace the marked parts, i.e.
    <username> with your GitHub username
    <repository> with your Forked Repository name
    <branch> with your Branch name (main)
    Here is an example:
      github: {
        username: 'kumardeo',
        repository: 'blogger-pwa-github',
        branch: 'main',
         * If the repository is private, provide token as string
         * otherwise keep it null
        token: null

    You must not edit and commit changes in worker.js file to repository itself.

We will be using this modified code for Cloudflare Workers.

Creating Workers in Cloudflare

  1. Login to your Cloudflare Account.
  2. Go to Workers & Pages section and click on Create application.
  3. Go to Workers tab and click on Create Worker and rename the worker as blogname-pwa, i.e. fineshop-pwa.
  4. Click on Deploy as we shall be able to edit code after deploying "Hello World!" worker.
  5. Now click on Edit code and replace the existing code with the code in previous step.
  6. Click on Save and Deploy.

Creating Routes

  1. Go to Websites section in Cloudflare Dashboard and select your domain.
  2. Now go to Workers Routes section and then click on Add Route.
  3. Input the fields as shown in the given table:
    Route Service Environment* fineshop-pwa production
  4. *Input the fields as per your blog url and workers name.

Now try to open these URLs one by one by replacing with your blog url:
If you are able to open these URLs that means there is no problem, you have done with the Cloudflare setups.
Now it's time to make changes in blog.

Learn more about Workers Routes.

Editing Blog

  1. Now go to Blogger Dashboard. Go to Theme section.
  2. Click on Edit HTML.
  3. Paste the following codes below <head>, if you didn't find it, it would have been probably parsed which is &lt;head&gt;. Delete existing similar codes.
    <!--[ START: PWA Meta Tags]-->
    <link rel="apple-touch-icon" sizes="57x57" href="/app/icons/apple-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="60x60" href="/app/icons/apple-icon-60x60.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="/app/icons/apple-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="/app/icons/apple-icon-76x76.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="/app/icons/apple-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="/app/icons/apple-icon-120x120.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="/app/icons/apple-icon-144x144.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="/app/icons/apple-icon-152x152.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/app/icons/apple-icon-180x180.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/app/icons/favicon-16x16.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/app/icons/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="96x96" href="/app/icons/favicon-96x96.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="/app/icons/android-icon-192x192.png" />
    <link rel="manifest" href="/app/manifest.json" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="application-name" content="My Blog" />
    <meta name="theme-color" content="#ffffff" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="My Blog" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="msapplication-config" content="/app/browserconfig.xml" />
    <meta name="msapplication-TileImage" content="/app/icons/ms-icon-144x144.png" />
    <meta name="msapplication-TileColor" content="#ffffff" />
    <!--[ END: PWA Meta Tags ]-->
  4. Replace the name with your Blog name and color code with code you used in manifest.json.

Now follow the steps as per your template, i.e. AMP Template or Non-AMP Template.

AMP Template

If you are using an AMP Template, you must follow the below steps:

  1. Add the following AMP Serviceworker JS below to <head> or above to </head>.
<script async='async' custom-element='amp-install-serviceworker' src=''/>
  1. Paste the following codes above to </body>.
<amp-install-serviceworker data-iframe-src='/app/fallback/' layout='nodisplay' src='/app/serviceworker.js'/>

Non-AMP Template

If you are using a Non-AMP Template, you must follow the below steps:

  1. Add the following Javascript code above to </head>.
<script async="true" defer="true" src="/app/pwa.js" type="module"></script>

Lastly, save the changes and visit your blog on your mobile phone, i.e. Android, you will be able to see a button to install your Progressive Web App.

Custom Install Button

You may want to add a custom button on your site which shows the installation prompt on click. You can use the following css and javascript codes to create a beautiful install button.

You should not use it if you are using an AMP template.

Step 1: Add the following css in theme xml just above to </head>

/*! Custom PWA install button by Fineshop Design */
.pwa-button{position:fixed;z-index:999;left:20px;bottom:75px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:50%;background:#1900ff;visibility:visible;opacity:1;transition:visibility .5s,opacity .5s}
.pwa-button:not([disabled])::before{content:'';position:absolute;z-index:-1;inset:0;background:inherit;border-radius:inherit;animation:1s cubic-bezier(0,0,.2,1) infinite pwa-button-ping}
.pwa-button svg.flash{width:22px;height:22px;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.4}
@keyframes pwa-button-ping{75%,to{transform:scale(1.6);opacity:0}}

Step 2: Add the following javascript just above to </body>

<script type='module'>/*<![CDATA[*/
/*! Custom PWA install button by Fineshop Design */
(({button:t,onInstall:n})=>{let i=null;var e=()=>{i&&(t.disabled=!0,i.prompt().then(e=>{"accepted"===e.outcome&&o()}).finally(()=>{t.disabled=!1}),i=null)},l=e=>{e.preventDefault(),i=e,t.hidden=!1};const o=()=>{t.hidden=!0,t.removeEventListener("click",e),window.removeEventListener("beforeinstallprompt",l)};t instanceof HTMLElement&&(t.hidden=!0,t.addEventListener("click",e),window.addEventListener("beforeinstallprompt",l));const d=e=>{t instanceof HTMLElement&&o(),"function"==typeof n&&n(e),window.removeEventListener("appinstalled",d)};window.addEventListener("appinstalled",d)})({
  button: document.getElementById("app_install_button")||Object.assign(document.body.appendChild(document.createElement("button")),{hidden:!0,type:"button",className:"pwa-button",innerHTML:"<svg class='flash' viewBox='0 0 24 24'><path d='M6.08998 13.28H9.17998V20.48C9.17998 22.16 10.09 22.5 11.2 21.24L18.77 12.64C19.7 11.59 19.31 10.72 17.9 10.72H14.81V3.52002C14.81 1.84002 13.9 1.50002 12.79 2.76002L5.21998 11.36C4.29998 12.42 4.68998 13.28 6.08998 13.28Z' stroke-miterlimit='10'></path></svg>"}),
     * Do something on app installed
     * i.e. Display a Thank You message in UI

Save the changes, now an install button will appear on your site.

Push Notifications

One of the best features of PWA is Push Notifications which allows you to send notifications to your visitors in the background.

To send push notifications, we may need to use third-party notification services, i.e. Firebase Cloud Messaging, OneSignal, etc.

The repository has support for OneSignal, which means all the required files (i.e. OneSignal Service Worker), codes, etc are already added. You just have to make changes as per your app configuration and you are good to go.

OneSignal Integration

Not applicable for AMP templates since it uses OneSignal JavaScript SDK.

  1. Go to OneSignal Dashboard.
  2. Go to your existing Web App or Create a new App using their Documentation.
  3. Go to the App settings.
  4. Select 'Typical Site' in 'Choose Integration' Settings.
  5. Toggle On 'Service Workers' in 'Advance Push Settings'.
    Input the fields as given below:
    Path to service worker files: /app/
    Main service worker filename: onesignalworker.js
    Updater service worker filename: onesignalworker.js
    Service worker registration scope: /app/onesignal/
  6. Find App's App Id and note it down.
  7. Go to forked repository and open app/pwa.js file.
  8. Find the following part:
      consoleLogs: true,
      oneSignalEnabled: false,
      oneSignalSDK: "",
      oneSignalConfig: {
        appId: "<appId>",
        allowLocalhostAsSecureOrigin: true
  9. *Replace the marked parts, i.e.
    false with true
    <appId> with your OneSignal App ID
    Here is an example:
      consoleLogs: true,
      oneSignalEnabled: true,
      oneSignalSDK: "",
      oneSignalConfig: {
        appId: "********-****-****-****-************",
        allowLocalhostAsSecureOrigin: true
  10. Commit the changes.

Do not add any code provided by OneSignal in the Template XML because I have already added it as per requirement.


@kumardeo/blogger-pwa-github 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-github

I shall try to fix issues and commit the changes.


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!


  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:
      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 This article for

    Please made for
    1. Service Worker JS at url root is required for PWA.
  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 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 "" 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 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.
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.