 |
| PWA (Progressive Web App) in Blogger using CloudFlare |
This Works for Custom Domain only *
PWA Requirements*
What is PWA ?
Many Blog owners create Progressive Web Apps (PWA) for their websites, to allow users to install super lite web apps on their smartphones and enjoy a native app-like experience while browsing the site.
Progressive Web Apps (PWA's) are also great for branding, because once users install them, they appear on their phone's Home screen and the brand logo stays in the user's mind.
There are rumors on the internet that Progressive Web Apps (PWA) cannot be made for the Blogger platform. But today I will prove that it is wrong.
In this article, I will show you how to create a Progressive Web App for Blogger so that your readers can enjoy a native app-like experience on your blog/website.
Suggested : samacheer.guru
Progressive App Features :
Ever seen the words "Add to Home screen" appear at the bottom of your Google Chrome screen when you visit some websites? Well, that pop up is shown when a website supports PWA.
When you click the "Add to Home screen" button, you will be directed to install the Android app.
After the installation process is complete, the Blog logo will appear on the main screen of your Smartphone which can later be used to access the Blog. So we don't need to open Browser / Chrome again when we want to visit Websites / Blogs.
Example of a Progressive Web App on a Blog
For more details, consider the following screenshot example:
In addition, by activating the Progressive Web App feature on Blogger, it will indirectly improve the quality of our Blog in the eyes of search engines which can be seen from the green tick on the PWA score in Measure page quality (web.dev)
Well, now that you have seen a clear picture of what a PWA is, let's start learning how to create Progressive Web Apps for Blogger sites.
Please note that in order to create a complete PWA along with Service Worker support, your blog must use a top level domain and must be connected to Cloudflare. This is because blogger doesn't allow us to upload files in its directory, so we need to upload the serviceworker.js file in our site directory using Cloudflare Workers.
If you already have a custom domain but haven't connected your blog to Cloudflare, please connect it first. Here's the tutorial: How to Setting Cloudflare For Blogger [Easy]
Steps to Make Progressive Web App For Blogger
This Works for Custom Domain only *
The first step before installing the Progressive Web App is to create a Favicon of the recommended size.
1. How to Create a Recommended Favicon
This is the most important step you need to do to create a PWA for your blogger blog.
Go to https://favicon.io (this is the best site I found till now for this purpose)
If you already have a great logo for your website, select the "Generate from Image" option or you can select the "Generate from Text" option.
Tip: If you use the "Generate from Text" option and want your logo background to be transparent, change the background color value to #FFFFFF00
Download the zip file on your computer and extract the following files into a folder:
- favicon-16×16.png
- favicon-32×32.png
- android-chrome-192×192.png
- android-chrome-512×512.png
- apple-touch-icon.png
- site.webmanifest
2. Reduce Image Size (Optional)
You can optimize these images to reduce their size for faster loading times, using TinyPNG – Compress WebP, PNG and JPEG images intelligently
3. Upload Images to Blogger Pages
So that we can get the image URL from the Favicon that we created earlier, we have to upload the image on the Blogger Page.
After uploading, make sure the image size uses the original size. After that, don't publish the page. Leave it in draft form.
Then change to the Edit HTML version so we can see the image link.
4. Create File site.webmanifest
Right-click on the site.webmanifest file and click Edit (open with Notepad or another text editor).
Delete all content inside the site.webmanifest file. Select all with CTRL+A and press the Delete key.
Now copy the code given below and paste it inside your site.webmanifest file.
{
"name": "anandnawal.com",
"short_name": "AnandNawal",
"icons":
[
{
"src": "https://1.bp.blogspot.com/-Ux6Xn8oqNRk/YYZp79uTZQI/AAAAAAAAcj4/SVR_H7IYdyIceoptrpcIbt8-qPbpP9KjgCLcBGAsYHQ/s0/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "https://1.bp.blogspot.com/-9uJWThk_xmw/YYZp7ysG5eI/AAAAAAAAckA/NsC5lPYgd1A6P4F6uoFl7nxWnexgVm1mwCLcBGAsYHQ/s16000/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
],
"theme_color": "#3291d1",
"background_color": "#ffffff",
"display": "standalone",
"prefer_related_applications": false,
"start_url": "https://www.anandnawal.com"
}
Information:
- Replace name and short_name with the name of your blog
- Replace the src address with the Favicon link that we uploaded earlier. Make sure it matches the size listed. Pay attention to the text I bolded.
- Replace start_url with your Blog address
- After replacing all, save the file.
5. Upload site.webmanifest To Online Storage
- Go to GitHub
- If you haven't registered yet, please register first
- After Login, press New
- Fill in the Repository name with the PWA name
- Press Create repository
- Upload the site.webmanifest file using the link uploading an existing file
- Press Choose your file
- Select the site.webmanifest file that we edited earlier.
- Click Commit changes
- Hit site.webmanifest
- Click Raw
- Copy the URL address.
6. Create a page for PWA to use when the device is offline
Create a new page on your Blog with the title – “Offline Pages For PWA”. You can write whatever you want.
This page will be shown to users when they open your PWA when their device is not connected to the internet.
Don't forget to Publish Page.
7. Manage Service Workers Using Cloudflare Workers
In this step, we will set up the serviceworker.js file for the PWA using Cloudflare Workers.
- Log in to your Cloudflare account, select your blog and click on Workers as shown in the image below.
- Tap Manage Workers
- Create a subdomain name for Cloudflare Workers. It's up to you to use any name you like.
- Press Set Up
- Select Continue with Free
- Press Create a Worker
- Delete all the scripts on the left, then replace them with the following script codeReplace OFFLINE_URL with the URL address of the page in step 6
const js = `
'use strict';
const CACHE_VERSION=1;
let CURRENT_CACHES={offline:"offline-v1"};
const OFFLINE_URL="/p/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))
}) - Press Save and Deploy
- Then press the Back button
- Press Rename
- Rename it with worker
- Press the Cloudflare logo
- Choose your Blog domain
- Reach Workers
- Press Add route
- Type www.anandnawal.com/sw.js (replace www.anandnawal.com with your Blog address)
- Select the Worker we created earlier
- Press Save
8. Add Links And Scripts To Your Blog Source Code
- Go to Blogger -> Themes -> Edit HTML.
- Find the </head> tag by pressing CTRL+F.
- Just before the </head> tag, put the following code:
<link rel="apple-touch-icon" sizes="180x180" href="CHANGE WITH FAVICON IMAGE LINK SIZE 180 x 180"/>
<link rel="icon" type="image/png" sizes="32x32" href="CHANGE WITH FAVICON IMAGE LINK SIZE 32 x 32"/>
<link rel="icon" type="image/png" sizes="16x16" href="CHANGE WITH FAVICON IMAGE LINK SIZE 16 x 16"/>
<link rel="manifest" href="REPLACE WITH THE site.webmanifest LINK IN STEP 5"/> - Look for the code </body>Put the following code on it
<script type='text/javascript'>
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function() { console.log("Service Worker Registered"); });
}
</script> - Save Theme
That's how to make a progressive web app for blogger. If you are confused about applying the tutorial above, you can use our services to do everything, click the button below
This Works for Custom Domain only *
Some Important FAQ's related to PWA
What is PWA?
PWA stands for PROGRESSIVE WEB APP which converts your Web to a simple App without much lines of code.
How to make this on Blogger?
By following our Guide you can easily add a PWA on your website.
What is the use of CloudFlare?
To handle the online functionality and Coding appearing on our WebSite we will be using Cloudflare Proxies and Routes...
Conclusion
So that's how you can add a PWA to your WebSite without much coding knowledge. If you have any doubts or suggestions related to this post then do comment below...
Source:
www.anandnawal.com