How to build a PWA (Progressive Web App) for Blogger Site in 2023

Prepare to set sail on a transformative odyssey for your Blogger site in 2023 with our latest guide: "Crafting the Ultimate PWA (Progressive Web App) for Blogger Sites." This isn't just an update; it's a reinvention of the PWA creation process.

What's the new horizon? No more juggling multiple Cloudflare Worker apps – now, just one streamlined route takes you there. File updates have become a walk in the park, thanks to our simplified approach. We've also embraced the elegance of ES Modules for your Workers.

But there's a grand finale: We're waving goodbye to GitHub and statically.io dependencies. Everything you need is harmoniously bundled within a single, powerful Cloudflare Worker app. This is the dawn of a new era for your Blogger site in 2023, where potential knows no bounds. Join us on this exciting journey and witness your website's rebirth as a PWA that shines like never before.

To know more about PWA, you can read this post: How to build a PWA (Progressive Web App) for Blogger

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 is easy as previous tutorial was a bit difficult to follow, you will surely be able to build a PWA for your Blogger Website if you follow these simple steps correctly.

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.

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.

Requirements

Before we begin, 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. Preview images for your webpages of size 540x720 in .png extension (optional).
4. A computer running on Windows, Linux, macOS, etc.

Installing Essential Tools

You need to install these four tools in your system: Visual Studio Code, Node.js, Wrangler CLI and Git.

If you have these tools installed on your system, you can skip the installation if they are already present. You can check it by running version-checking commands for respective tools.

Installing Visual Studio Code

Visual Studio Code (VS Code) is a popular and highly extensible code editor developed by Microsoft. It's packed with features that make coding easier and more enjoyable.

Step 1: Visit the official Visual Studio Code website (https://code.visualstudio.com/) and download the installer for your operating system.

Step 2: Run the installer and follow the setup instructions. You can customize your installation by selecting specific extensions and themes.

Step 3: Open VS Code and explore its features. You can install additional extensions from the Visual Studio Code Marketplace to enhance your development environment further.

Installing Node.js

Node.js is a runtime environment that allows you to execute JavaScript code on the server side. It's widely used for building scalable network applications and is essential for modern web development.

You must install Node.js of version 16.13.0 or later.

Step 1: Visit the official Node.js website (https://nodejs.org/) and download the latest version.

Step 2: Run the installer and follow the on-screen instructions. Node.js includes npm (Node Package Manager), which is a vital tool for managing JavaScript packages and dependencies.

Step 3: To verify the installation, open your command prompt or terminal and type node -v and npm -v. You should see the installed versions.

Installing Wrangler CLI

To install the Wrangler CLI, which is a tool for working with Cloudflare Workers, follow these steps:

Step 1: Open your command prompt or terminal.

Step 2: Once Node.js and npm are installed, open your command prompt or terminal and type the following command to install the Wrangler CLI globally:

npm install -g wrangler

This command will download and install the Wrangler CLI on your system.

Step 3: To verify that Wrangler has been successfully installed, run the following command:

wrangler --version

You should see the version number of Wrangler displayed in the terminal, confirming the successful installation.

Installing Git

Git is a distributed version control system that enables you to track changes in your code and collaborate with other developers effectively.

Step 1: Download the Git installer for your operating system from the official Git website (https://git-scm.com/).

Step 2: Run the installer and follow the installation wizard's instructions. Make sure to configure your user information, such as your name and email.

Step 3: To verify the installation, open your command prompt or terminal and type git --version. You should see the installed Git version.

With Visual Studio Code, Node.js, Wrangler CLI and Git installed on your system, you're now ready to follow next steps.

Login to Wrangler

In order to deploy workers from command line you need to authenticate your Cloudflare Account with Wrangler.

Step 1: Open command prompt or terminal and type the following:

wrangler login

Step 2: It will open a page in your browser. Login to your Cloudflare Account and allow access to it.

Step 3: To confirm if you are successfully logged in, you can type the following:

wrangler whoami

It will show your Cloudflare Account email address, Account ID, scopes, etc.

Clone the Repository

To get started, clone this repository to your local machine using the following command:

git clone https://github.com/kumardeo/blogger-pwa.git

Install Dependencies

Step 1: Navigate to the project directory:

cd blogger-pwa

Step 2: Open folder in Visual Studio Code:

code .

Step 3: Open Terminal in Visual Studio Code.

Step 4: Install the project's dependencies:

npm install

Make Changes

Now, you have to make changes in the project folder like adding your favicon, screenshots, configuring app, etc.

Add Favicon

Step 1: Prepare an icon for your blog in .png extension with a minimum size of 512x512.
*Rename the file as favicon.png

Step 2: Replace favicon.png file in uploads directory with your favicon.png file.

Add Screenshots

Adding screenshots is optional, you can skip it if you want.

Step 1: Prepare few screenshots of size 540x720 of your webpages in .png extension, it will be used as preview of your PWA and may appear when it shows the install button.

Step 2: Delete existing screenshots in uploads > screenshots directory and add your screenshots in that directory.

Configure App

You can configure your PWA by making changes in config.cjs file in the root directory.

/** @type {import("./types").Config} */
const config = {
  version: "1.0",
  name: "Plus UI",
  shortName: "Plus UI",
  description: "Hello World!",
  direction: "auto",
  language: "en-US",
  backgroundColor: "#fff",
  themeColor: "#fff",
  display: "standalone",
  orientation: "any",
  scope: "/",
  startUrl: "/?utm_source=homescreen",
  screenshotSize: "540x720",
  appleStatusBarStyle: "black-translucent",
  preferRelatedApplications: false,
  shortcuts: [
    {
      name: "My Shortcut",
      shortName: "My ShortName",
      description: "My Shortcut description goes here...",
      url: "/search/label/my-shortcut.html?utm_source=homescreen"
    }
  ]
};

module.exports = config;

Read more about configurations.

Edit wrangler.toml

Now, you need to route /app/* to workers app in order to serve the generated static files.

To do that, open wrangler.toml file and replace the route.

[env.production]
routes = [
  # zone_name = "fineshopdesign.com"
  # Replace 'fineshopdesign.com' with your domain name (must be added in Cloudflare Account)
  # e.g.: zone_name = "example.com"
  #
  # pattern = "plus-ui.fineshopdesign.com/app/*"
  # Replace 'plus-ui.fineshopdesign.com' with your blogger subdomain and domain (domain name must be same as zone_name)
  # e.g.: pattern = "www.example.com/app/*"
  { pattern = "plus-ui.fineshopdesign.com/app/*", zone_name = "fineshopdesign.com", custom_domain = false }
]

Deploy the Workers

Now, your Workers app is ready to be deployed in Production mode on Cloudflare.

To deploy your app, you can run the following command in the project root directory:

npm run deploy

It will also generate all the required files, icons of different sizes, etc. and then upload these files to KV Store.

Once your workers app is deployed to Cloudflare, you can access your static files through the route specified in wrangler.toml file.

Edit Blogger Theme XML

Now, it's time to edit your blogger theme XML and add required codes.

Step 1: Now go to Blogger Dashboard. Go to Theme section.

Step 2: Click on Edit HTML.

Add the codes specified in next steps.

Add Meta Tags

After deploying your workers app, two files output > metatags.html and output > metatags-no-splash.html will be generated.

Copy all the contents of any of these two files (Use metatags.html if you want to show splash screens for apple devices and metatags-no-splash.html if you want to reduce html size and network requests) and paste it below <head>, if you didn't find it, it would have been probably parsed which is <head>. Delete existing similar codes.

AMP Template

Follow these steps only if you are using an AMP template.

1. Add the following code just below the meta tags you have added in previous steps:

<script async='async' custom-element='amp-install-serviceworker' src='https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js'/>

2. Paste the following codes above to </body>.

<amp-install-serviceworker data-iframe-src='/app/fallback/' layout='nodisplay' src='/app/serviceworker.js'/>

Non-AMP Template

Follow these steps only if you are using a Non-AMP template.

Add the following code just below the meta tags you have added in previous steps:

<!--[ Start: Progressive Web App Script ]-->
<script async='true' defer='true' type='module' src='/app/pwa.js'></script>
<!--[ End: Progressive Web App Script ]-->

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 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[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. Open config.cjs file.
8. Find the following part:
   

     pwa: {
       consoleLogs: true,
       oneSignalEnabled: false,
       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,
       oneSignalConfig: {
         appId: "********-****-****-****-************",
         allowLocalhostAsSecureOrigin: true
       }
       ...

10. Deploy your worker using npm run deploy.

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

Updating App

If you want to make changes to your app after deployment, you can pull changes and make changes in the project folder and then run the deploy command in project root directory.

Pull the changes:

git pull -u origin main

Make your changes.

Deploy Workers:

npm run deploy

You may also need to purge cache from your Cloudflare Dashboard.

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!