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

Admin
25 Oct, 2024
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 BlogSeba.

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.

© BlogSeba | 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.

In case you don't use Cloudflare or your blog is hosted on blogspot.com subdomain, you can still build a simple PWA app by directly jumping to the Can't use Cloudflare Workers? section.

Limitations

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.

If you decided not to use Cloudflare Workers, you can directly jump to the Can't use Cloudflare Workers? section.

Requirements

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 favicon-generator.org and upload the Blog Icon.
  3. Download the generated favicon and extract the files.
  4. *Delete unnecessary files like:
    browserconfig.xml
    manifest.json
  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:
    screen-1.png
    screen-2.png
    screen-3.png
    screen-4.png
    screen-5.png
  3. Upload all these screenshots in app/screenshots directory in the main branch of forked repository.

manifest.json

  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 https://example.com/search/label/Science.
    Try to not to add more than 3 shortcuts in the array.

    Also note down the color code.

Learn more about Web app manifests.

browserconfig.xml

  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"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/app/icons/ms-icon-70x70.png"/>
      <square150x150logo src="/app/icons/ms-icon-150x150.png"/>
      <square310x310logo src="/app/icons/ms-icon-310x310.png"/>
      <TileColor>#ffffff</TileColor>
    </tile>
  </msapplication>
</browserconfig>
  3. *Edit and Replace the marked color code same as manifest.json color code and commit the changes.

Learn more about Browser configuration files.

worker.js

  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',
    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. blogger-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
    www.website.com/app/* blogger-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:
www.website.com/app/icons/android-icon-512x512.png
www.website.com/app/manifest.json
www.website.com/app/pwa.js
www.website.com/app/fallback/
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='https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js'/>
  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>

<style>/*<![CDATA[*/
/*! Custom PWA install button by BlogSeba */
.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[hidden]{display:flex;visibility:hidden;opacity:0}
.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}}
/*]]>*/</style>

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>"}),
  onInstall(){
    /**
     * Do something on app installed
     * i.e. Display a Thank You message in UI
     */
  }
});
/*]]>*/</script>

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: "https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js",
  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: "https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js",
  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.

Can't use Cloudflare Workers?

In case you are unable to use Cloudflare Workers or your blog is hosted on blogspot.com subdomain, you can skip everything in this post and follow steps described in @kumardeo/blogger-pwa-cdn repository.

License

@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.

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 . Thank you!

Copyright Warning!Reproduction, duplication, or distribution of any part of this blog is strictly prohibited without permission. Legal action may be taken for any unauthorized use or reproduction.
Next Post Previous Post
No Comment
Add Comment
comment url