PWA stands for Progressive Web App which can make a website or blog like a mobile application in general.
That way, accessing the website does not have to be opened through a browser, but through the application icon on the mobile home page.
For a more complete explanation about PWA, you can read the following article:
In this tutorial SPECIALLY for users Template Blogger Theme62.
What is Theme62?
Theme62 is the best blogger template provider website with features inspired by WordPress, has support for many plugins and easy template configuration without touching any code.
Back to the main topic, how to install or set PWA on this blogger has 2 ways/methods:
- Simple, you just need to activate it via the PWA plugin in Dashboard Template, no other configuration .
- Advanced, you have to create a Worker on Cloudflare, I'll explain later.
What is the difference between the two?
Simple
- Adding a blog to the mobile home page is done manually, because no application install notification appears.
- Not getting special view when internet connection is offline.
- A blog installed to the mobile homepage cannot be shared (like using SHAREit) or backed up, because it's basically like a shortcut or just a shortcut.
- Can be installed on the Blogger Subdomain (example.blogspot.com) or Custom Domain (example.com).
Advanced
- The blog will display an application install notification, making it easier for users to install it.
- Get a special display when the internet connection is offline.
- A blog installed on the mobile homepage can be shared (like using SHAREit) or backed up, because the blog becomes a full application like any other application.
- Can only be attached to a Custom Domain (example.com), so this method cannot be used for the Blogger subdomain (example.blogspot.com).
How to Install PWA with "Simple" method
1. Go to Theme62 > My License > Choose your blog.
2. Go to menu Plugin > Progressive Web App.
3. Activate the Progressive Web App plugin, and select the Simple method.
4. Then update the template.
5. Done..
How to add a blog to the mobile homepage?
Visit your blog in a browser (eg Google Chrome), then tap the 3 dots icon > Add to Home Screen
How to Install PWA with "Advanced" method
Here I assume I have created a Cloudflare account and your blog domain is already connected to Cloudflare, if not you can follow the following tutorial:
Then proceed with the following steps:
1. Sign in to your Cloudflare account.
2. Click on the Workers menu.
3. Fill in the name of the Workers subdomain that will be used, you are free to fill in anything as long as it is available, then click Set up.
4. Select Continue with Free.
5. At this stage we have successfully created Workers, then we will create a new Service for Theme62, click menu Workers > Create a Service.
6. Rename it "theme62", and click Create service
7. Replace all scripts with below, then click Save and Deploy
const Theme62 = async event => {
const url = new URL(event.request.url);
const param = url.searchParams;
const pathname = param.get('path') ?? '';
const filename = url.pathname.substr(2);
const response = await fetch(`https://theme62.pages.dev/${pathname}/${filename ? filename : 'workers-test'}`);
const { headers, status } = response;
return new Response(await response.text(), {
status: status,
headers: {
'content-type': headers.get('content-type')
}
})
}
addEventListener('fetch', event => {
return event.respondWith(Theme62(event));
});
8. After that, go back to the Cloudflare Dashboard page > Workers > Triggers, and click Add route
9. Fill in as follows, then click Add route
- Route : www.droidawam.com/@*
- Zone : droidawam.com
Customize your blog's domain.
10. At this stage the Service for Theme62 has been installed, to check if it is installed correctly, try to access your blog's domain by adding an "@" sign behind it, like this :
- https://www.droidawam.com/@
If it looks like this, then it's installed correctly.
However, if the error 404 Page not found appears, please follow the guidelines for points 11 and 12 below.
11. Return to the Cloudflare Dashboard > SSL/TLS page, and select Full
12. Back to Cloudflare Dashboard > DNS page, on ghs.google.com set proxy status to Proxied.
Try again at point 10, it should be installed correctly.
13. Then, go to Theme62 > My License Select your blog.
14. Go to menu Plugin > Progressive Web App.
15. Activate the Progressive Web App plugin, and select the Advanced method.
16. Then update the template.
17. Done..
How to add a blog to the mobile homepage?
Visit your blog in a browser (eg Google Chrome), then tap Add to Home Screen that appears on the blog.
Or you can also use the desktop by clicking the install button on the top right.
Well, that's 2 Ways to Install or Setting PWA on Blogger, if you have questions about this article, chat in the comments column yes :)