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! Kamal Bhai Ji में आपका स्वागत है।.

क्या आपने कभी देखा है कि जब आप किसी वेबसाइट पर जाते हैं तो वह "होम स्क्रीन में जोड़ें" संकेत दिखाता है? यदि हां और आप भी अपनी वेबसाइट बनाना चाहते हैं तो आप सही जगह पर हैं।

इस लेख में, मैं आपको अपनी वेबसाइट के लिए आसान तरीके से एक PWA (Progressive Web app) बनाने के लिए मार्गदर्शन करूंगा.

इसलिए, इससे पहले कि आप अपनी वेबसाइट के लिए PWA स्थापित करने की प्रक्रिया शुरू करें, आपको पता होना चाहिए कि PWA क्या है और यह आपकी वेबसाइट के लिए क्यों महत्वपूर्ण है.

What is PWA (Progressive Web App)

Progressive web apps पर देशी जैसा अनुभव बनाने का एक नया तरीका है। वे दोनों दुनियाओं के सर्वश्रेष्ठ को जोड़ते हैं, उपयोगकर्ताओं को वेबसाइट और ऐप का सर्वश्रेष्ठ प्रदान करते हैं।.

प्रोग्रेसिव वेब ऐप एक वेबव्यू ऐप है जिसे आपके फोन या टैबलेट पर एक ऐप की तरह इंस्टॉल किया जा सकता है, लेकिन यह वेब प्रौद्योगिकियों के साथ बनाया गया है। इसका मतलब है कि आप एक अलग मूल ऐप बनाए बिना पुश नोटिफिकेशन और ऑफ़लाइन समर्थन जैसी सुविधाएं जोड़ सकते हैं.

Why is PWA Important?

प्रोग्रेसिव वेब ऐप एक वेबसाइट है जो उपयोगकर्ता के डिवाइस पर एक ऐप की तरह व्यवहार करती है। यह तेजी से लोड होता है, विभिन्न उपकरणों के लिए उत्तरदायी है, और कुछ भी डाउनलोड करने की आवश्यकता के बिना किसी भी समय पहुंचा जा सकता है।

प्रोग्रेसिव वेब ऐप उपयोगकर्ताओं और डेवलपर्स दोनों के लिए पारंपरिक वेबसाइट की तुलना में बेहतर अनुभव प्रदान करता है। इसमें ऐसी विशेषताएं हैं जो आमतौर पर मूल ऐप्स में पाई जाती हैं जैसे पुश नोटिफिकेशन, ऑफ़लाइन समर्थन और होम स्क्रीन आइकन। इसका मतलब है कि यह तेजी से लोड होगा, सभी प्रकार की स्क्रीन पर बेहतर दिखेगा, नियमित वेबसाइट की तुलना में अधिक कार्यक्षमता होगी और डिवाइस ऑफ़लाइन होने पर भी उपलब्ध रहेगा।.

How to build a PWA for Blogger

प्रोग्रेसिव वेब ऐप बनाने के लिए, आपको अपनी वेबसाइट में कुछ सुविधाएँ जोड़ने की आवश्यकता होगी। इन सुविधाओं में सेवा कर्मी शामिल हैं, जो आपकी साइट को ऑफ़लाइन काम करने की अनुमति देते हैं, और जब उपयोगकर्ता आपकी साइट पर लौटते हैं तो सूचनाएं पुश करते हैं। आप अपनी वेबसाइट पर एक ऐड-टू-होम स्क्रीन प्रॉम्प्ट भी इंस्टॉल कर सकते हैं जो उपयोगकर्ताओं को आपकी साइट या ऐप को उनके मोबाइल डिवाइस या डेस्कटॉप कंप्यूटर पर उनकी होम स्क्रीन पर जोड़ने के लिए प्रेरित करता है.

इस ट्यूटोरियल को समझना थोड़ा मुश्किल हो सकता है, लेकिन यदि आप सभी चरणों का सही ढंग से पालन करते हैं, तो आप निश्चित रूप से अपनी ब्लॉगर वेबसाइट के लिए एक PWA बनाने में सक्षम होंगे.

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:-

शुरू करने से पहले, आपको Cloudflare Workers Limits. के बारे में पता होना चाहिए । यदि आपके ब्लॉग पर बड़ी संख्या में विज़िटर हैं, तो आप इन सीमाओं को पार कर सकते हैं और यह साइट के प्रदर्शन के साथ-साथ उपयोगकर्ता अनुभव को भी प्रभावित कर सकता है। इस समस्या को हल करने के लिए, आप सशुल्क योजना पर स्विच करने पर विचार कर सकते हैं।

Requirements:-

शुरू करने से पहले, PWA को सक्रिय करने के लिए कई चीजें आवश्यक होनी चाहिए:

DNS को Cloudflare द्वारा प्रबंधित किया जाना चाहिए (Note: Proxy must be enabled).
1:1 न्यूनतम आकार के एक्सटेंशन के साथ 512x512 नुपात का एक ब्लॉग आइकन .png .
5 Preview images for your webpages of size 540x720 में आकार के अपने वेबपेजों के लिए images का Preview करें .png .
एक GitHub Account होना चाहिए.

Forking Repository:-

अपने GitHub खाते में साइन इन करें और @kumardeo/blogger-pwa-github repository को fork करें.

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:-

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
Go to favicon-generator.org and upload the Blog Icon.
Download the generated favicon and extract the files.
*Delete unnecessary files like:
browserconfig.xml
manifest.json
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:-

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).
Name the screenshots in series:
screen-1.png
screen-2.png
screen-3.png
screen-4.png
screen-5.png
Upload all these screenshots in app/screenshots directory in the main branch of forked repository.

manifest.json:-

Go to forked repository and open app/manifest.json file.

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"
        }
      ]
    }
  ]
}

*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:-

Go to forked repository and open app/browserconfig.xml file.

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>

*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:-

Go to forked repository and open worker.js file, copy its content to any text editor.

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
  }
};

*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:-

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

Creating Routes:-

Go to Websites section in Cloudflare Dashboard and select your domain.
Now go to Workers Routes section and then click on Add Route.

Input the fields as shown in the given table:

Route	Service	Environment
www.fineshopdesign.com/app/*	fineshop-pwa	production

*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.fineshopdesign.com/app/icons/android-icon-512x512.png
www.fineshopdesign.com/app/manifest.json
www.fineshopdesign.com/app/pwa.js
www.fineshopdesign.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:-

Now go to Blogger Dashboard. Go to Theme section.
Click on Edit HTML.

Paste the following codes below <head>, if you didn't find it, it would have been probably parsed which is <head>. 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 ]-->

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:

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'/>

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:

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

Go to OneSignal Dashboard.
Go to your existing Web App or Create a new App using their Documentation.
Go to the App settings.
Select 'Typical Site' in 'Choose Integration' Settings.
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/
Find App's App Id and note it down.
Go to forked repository and open app/pwa.js file.

Find the following part:

})({
  consoleLogs: true,
  oneSignalEnabled: false,
  oneSignalSDK: "https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js",
  oneSignalConfig: {
    appId: "<appId>",
    allowLocalhostAsSecureOrigin: true
  }
});

*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
  }
  ...

Commit the changes.

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

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

FreemiumIdeas

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