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
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.
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 begin, there are several things which must be required for Activating PWA:
1:1 with a minimum size of 512x512 in .png extension.540x720 in .png extension (optional).Windows, Linux, macOS, etc.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.
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.
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.
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 wranglerThis 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 --versionYou should see the version number of Wrangler displayed in the terminal, confirming the successful installation.
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.
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 loginStep 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 whoamiIt will show your Cloudflare Account email address, Account ID, scopes, etc.
To get started, clone this repository to your local machine using the following command:
git clone https://github.com/kumardeo/blogger-pwa.gitStep 1: Navigate to the project directory:
cd blogger-pwaStep 2: Open folder in Visual Studio Code:
code .Step 3: Open Terminal in Visual Studio Code.
Step 4: Install the project's dependencies:
npm installNow, you have to make changes in the project folder like adding your favicon, screenshots, configuring app, etc.
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.
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.
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.
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 }
]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 deployIt 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.
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.
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.
Follow these steps only if you are using an AMP template.
<script async='async' custom-element='amp-install-serviceworker' src='https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js'/></body>.<amp-install-serviceworker data-iframe-src='/app/fallback/' layout='nodisplay' src='/app/serviceworker.js'/>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 ]-->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.
/app/
onesignalworker.js
onesignalworker.js
/app/onesignal/
config.cjs file. pwa: {
consoleLogs: true,
oneSignalEnabled: false,
oneSignalConfig: {
appId: "<appId>",
allowLocalhostAsSecureOrigin: true
}
}false with true
<appId> with your OneSignal App ID
...
consoleLogs: true,
oneSignalEnabled: true,
oneSignalConfig: {
appId: "********-****-****-****-************",
allowLocalhostAsSecureOrigin: true
}
...npm run deploy.Do not add any code provided by OneSignal in the Template XML because I have already added it as per requirement.
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 mainMake your changes.
Deploy Workers:
npm run deployYou may also need to purge cache from your Cloudflare Dashboard.
@kumardeo/blogger-pwa is licensed under the MIT License
If your 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.
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!