Home Discover Mobile E Sports Technology Business Viral Gadgets Movies Events


How To Make Progressive Web App (PWA) For Blogger

Progressive web app for Blogger - Progressive Web App blogger Tutorial 2022

PWA For Blogger
Advanced Progressive Web App for Blogger

What is Progressive Web App

PWA means Progressive Web App is a best practices to get more returning user to your site. Most of the news website use pwa in today's time.  By seeing WordPress or other site i also try to implement pwa in my blogger website; but everyone say this is not possible without root directory or even blogger do not allow you to upload js,html files in our site directory.

Progressive Web App for Blogger

 So in this article i will teach you how to implement Advance Progressive Web App for Blogger.

Requirment

1. Must have a Custom Domain.
2. Connected on Cloudflare.

So if you are using blogspot.com domain then you can buy a any type of domain from GoDaddy. To connect custom domain you can watch this video - 


 After you have connect your custom domain now go to Cloudflare and login with email ID and password. 

 So, now you need to connect blogger to Cloudflare. Watch this video and connect it - 


After you complete the connection just wait for 10 to 20 minutes. (Check DNS section that Proxy Status with Proxied, by default it selected to Proxied, don't select DNS only) After site is connected you got a email from Cloudflare that  [Cloudflare]: yoursitename.in has been added to a Cloudflare Free Plan. 

 Now you need to make your website logo icon. Go to Favicon-Generator. Upload your logo and download the zip file. Make sure that your logo is on round shape for better viewing and png format. Other formats not allowed.

Open the zip file
 Here you got 16px to 192 px size icons. Extract all icons. 

 Now you need to create some extra size icons for Big size screen. 

Progressive Web App Blogger

Create  384×384 px , 512×512 px, 1024×1024 px size images by using Image Resizer and don't forget to rename each file with their size like - android-icon-384×384.png

After you have generated all icons go to Imgbb.com for upload or host your image. Login with your Google account and click upload image. Upload 16px image size and click don't auto delete. Click next and select HTML full linked. here you can see your png image url like :
Example: https://i.ibb.co/q0dXLrn/android-icon-16×16.png

Copy your url and paste it on a notepad

 Start from 16 px size and upload all the images one by one and collect all images url in your notepad.

First we create manifest.json

addEventListener("fetch", event => {
  const data = {
       "name": "Web App Name",
         "short_name": "Web App Name",
           "description": " Enter Small description",
             "lang": "en-US",
               "display": "standalone",
                 "background_color": "#ffffff",
                   "start_url": "/?utm_source=homescreen",
                     "theme_color": "#ffffff",
                       "orientation": "portrait",
                         "icons": [
                             {
      "src": "#",
      "sizes": "32x32"
    },
    {
      "src": "#",
      "sizes": "72x72"
    },
    {
      "src": "#",
      "sizes": "96x96"
    },
    {
      "src": "#",
      "sizes": "128x128"
    },
    {
      "src": "#",
      "sizes": "144x144"
    },
    {
      "src": "#",
      "sizes": "152x152"
    },
    {
      "src": "#",
      "sizes": "192x192"
    },
    {
      "src": "#",
      "sizes": "384x384"
    },
    {
      "src": "#",
      "sizes": "512x512"
    },
    {
      "src": "#",
      "sizes": "1024x1024"
         },
                                                                ]
                                                        }
  const json = JSON.stringify(data, null, 2)
  return event.respondWith(
      new Response(json, {
            headers: {
                    "content-type": "application/json;charset=UTF-8"
                          }
                              })
                                )
                                })
manifest.json [Part 2] for download 2 kb

Copy the codes and paste it on your notepad. 

 Now first add Your App or website name like - Game News Mania is my site name so I add Game News Mania. Don't try to add tags for seo. Only site name is required.

 2nd add your short code like- Your site name. Same as first step. 

3rd add your site short description like - we are providing daily news, html tricks and tips.

4th you can change your theme colour - theme colour is use for navigation bar colour. Where network, battery percentage are show in a mobile device. 

   Also change the background colour if you want to change. Default colour is white. This will show when user launch your app.

5th change all # tags with your correct image URL with correct size. I already told you to collect all images url on a notepad.

 Now you have successfully completed your icon placement.

Now you need to complete Cloudflare workers management.
(Don't enable bot fight mode in firewall on Cloudflare, otherwise some issues will create during deployment)

  Cloudflare workers management isn't possible to teach with an article so we have created a Full Guide Video on YouTube. Its around 50 minutes. So watch this video and complete your Cloudflare workers management.


Now by watching this video you have some more files requirment - 

sw.js    

const js = `
'use strict';
const CACHE_VERSION=1;
let CURRENT_CACHES={offline:"offline-v1"};
const OFFLINE_URL="/offline.html";
function createCacheBustedRequest(a){let b=new Request(a,{cache:"reload"});if("cache"in b)return b;let c=new URL(a,self.location.href);return c.search+=(c.search?"&":"")+"cachebust="+Date.now(),new Request(c)}self.addEventListener("install",a=>{a.waitUntil(fetch(createCacheBustedRequest(OFFLINE_URL)).then(function(a){return caches.open(CURRENT_CACHES.offline).then(function(b){return b.put(OFFLINE_URL,a)})}))}),self.addEventListener("activate",a=>{let b=Object.keys(CURRENT_CACHES).map(function(a){return CURRENT_CACHES[a]});a.waitUntil(caches.keys().then(a=>Promise.all(a.map(a=>{if(-1===b.indexOf(a))return console.log("Deleting out of date cache:",a),caches.delete(a)}))))}),self.addEventListener("fetch",a=>{("navigate"===a.request.mode||"GET"===a.request.method&&a.request.headers.get("accept").includes("text/html"))&&(console.log("Handling fetch event for",a.request.url),a.respondWith(fetch(a.request).catch(a=>(console.log("Fetch failed; returning offline page instead.",a),caches.match(OFFLINE_URL)))))});

`

async function handleRequest(request) {
  return new Response(js, {
      headers: {
            "content-type": "application/javascript;charset=UTF-8",
                },
                  })
                  }
addEventListener("fetch", event => {
  return event.respondWith(handleRequest(event.request))
  })
sw.js.txt 1.46 kb

If you have a non amp template like Fletro Pro, Median UI, Litespot etc. Then use www.domainname/sw.js during add route. 

OR

  If you have a amp blogger template like Fletro AMP, Median AMP, Infinite AMP etc. Then use www.domainname/serviceworker.js During add route in Cloudflare (My website support amp so i use this for connecting service worker)
If you unable to find add route option after create a service; then try - to remove overview from url and add domain name before workers as shown on video like : 
Example - 
 https://dash.cloudflare.com/37f28e74d961b3/example.in/workers

Next step offline.html as shown as video
offline.html(Upgraded).txt 16.69 kb

Copy the html code for offline page, and paste it like as shown in video. 

Next step add manifest.json

I already told you to add this in your notepad. Copy from notepad and paste it as shown in the video.

Now you have completed all steps from Cloudflare.

Go to blogger -> theme -> click edit html. And paste service worker above </body > tag (for non amp template only)

<script type='text/javascript'>
  //<![CDATA[
  if('serviceWorker' in navigator) {
    navigator.serviceWorker
               .register('/sw.js')
     .then(function() { console.log("Service Worker Registered"); });
          }
  //]]> 
  </script>

sw.js above body
Or

If you have a amp template then first copy and paste it after <head>

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


And then paste it above </body> tag.

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


Last - Link the manifest.json file. Copy and paste it after <head>

<link href='/manifest.json' rel='manifest'/>

Optional - copy the codes and replace # with your image urls and paste it after <head>

<link href='#' rel='apple-touch-icon' sizes='57x57'/>
<link href='#' rel='apple-touch-icon' sizes='60x60'/>
<link href='#' rel='apple-touch-icon' sizes='72x72'/>
<link href='#' rel='apple-touch-icon' sizes='76x76'/>
<link href='#' rel='apple-touch-icon' sizes='114x114'/>
<link href='#' rel='apple-touch-icon' sizes='120x120'/>
<link href='#' rel='icon' sizes='192x192' type='image/png'/>

Done ! Now Progressive Web App is working for your blogger website

To check this is work or not open chrome browser on android. 

PWA support browser names: Chrome ,Safari ,Firefox, Edge,Kiwi etc.

 Also you may think that 'Where is your PWA ?'  So, if you are viewing an AMP version of this article then i want to tell you that no one website support PWA when it view on Google AMP mode. Try to read this article in Non-AMP to see my PWA implementation on our website.
PWA Part 2
If you feel any problem then try to contact us.