Designing for your Blogger/site
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
🌐 How to Turn Your Website into a PWA Using GitHub Pages
This guide shows you how to convert any website (like Blogger, WordPress, or Social Creator) into an installable Progressive Web App (PWA) — using only your phone and GitHub.
🧩 What You’ll Need
- A GitHub account
- Your website link (e.g., your Blogger URL)
- A phone or computer browser (no downloads needed)
⚙️ Step 1: Create a New GitHub Repository
- Go to https://github.com/new
- Name it something like:
yoursitename-manifest - Make it Public
- Click Create Repository
📄 Step 2: Add Your Files
You’ll add three main files to your repo:
1️⃣ index.html
Create a new file called index.html and paste this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="refresh" content="0; url=https://www.yourwebsite.com" />
<title>Redirecting...</title>
<link rel="manifest" href="manifest.webmanifest" />
<meta name="theme-color" content="#000000" />
</head>
<body>
<p>If you are not redirected, <a href="https://www.yourwebsite.com">click here</a>.</p>
</body>
</html>
📝 Replace https://www.yourwebsite.com with your real site link (for example, https://www.ventsharmblogs.co.uk).
2️⃣ manifest.webmanifest
Create a new file named manifest.webmanifest and paste this:
{
"name": "My Website PWA",
"short_name": "MySite",
"description": "An installable version of my website built as a Progressive Web App.",
"start_url": "/yoursitename-manifest/",
"scope": "/yoursitename-manifest/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "Icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "Icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
📝 Replace /yoursitename-manifest/ with your actual GitHub repo name.
⚙️ When an App you made Uses a Service Worker
If an app includes a service worker, it allows your PWA to work offline, cache pages, and load faster — but it must be set up carefully to avoid problems between multiple apps hosted under the same domain.
A service worker controls everything within its scope.
If you host more than one PWA (for example, a File Converter and a Budget Planner) on the same GitHub account, make sure each service worker only covers its own folder.
Otherwise, it might cache files from one app and show them inside another.
Example
If your Budget App is at:
https://yourusername.github.io/BudgetApp/
then your service worker should be registered with this scope:
navigator.serviceWorker.register('./sw.js',
{ scope: './' });
And for your Converter App:
https://yourusername.github.io/ConverterApp/use:
navigator.serviceWorker.register('./sw.js',
{ scope: './' });
Why They Look the Same but Work Separately
Even though those two code lines are identical, they behave differently because of where the files are hosted.
Each app’s sw.js file lives inside its own GitHub Pages folder or repository — for example:
- Budget App →
https://yourusername.github.io/BudgetApp/sw.js - Converter App →
https://yourusername.github.io/ConverterApp/sw.js
Because the scope is set to './', each service worker automatically limits itself to the folder it’s in.
That means the Budget App’s service worker can only control files inside /BudgetApp/, and the Converter App’s service worker can only control /ConverterApp/.
They never overlap, even though the code looks identical.
✅ In short:
You can safely use:
navigator.serviceWorker.register('./sw.js', { scope: './' });
in every app — as long as each one is in its own GitHub Pages folder or repository.
Clear your browser cache and then see if your update works.
3️⃣ Add Your Icons
Upload two images to your repository’s main (root) folder — not inside any subfolder — and make sure they are named exactly:
Icon-192.png
Icon-512.png
💡 Tip: You can design them yourself or generate them using an AI image tool (one 192×192px and one 512×512px).
⚠️ Important: When uploading or editing, make sure the filenames do not say Updated Icon-192.png or Updated Icon-512.png.
They must be exactly:
Icon-192.png
Icon-512.png
Otherwise, the manifest will not find them.
🚀 Step 3: Enable GitHub Pages
- Go to your repository’s Settings → Pages
- Under “Build and deployment,” set:
- Source: Deploy from a branch
- Branch:
main - Folder:
/ (root)
- Click Save
After a few seconds, you’ll see your live site URL, for example:
https://yourusername.github.io/yoursitename-manifest/🧠 Step 4: Test on PWA Builder
- Visit https://www.pwabuilder.com
- Paste your GitHub Pages link (like
https://yourusername.github.io/yoursitename-manifest/) - Click Start
✅ If everything is correct, it will detect your manifest, icons, and PWA info.
You can then download your PWA package for Android, Windows, or iOS.
🎉 Step 5: You’re Done!
Now your site:
- Can be installed on phones and desktops
- Has an app icon and splash screen
- Works through GitHub Pages for free
🪄 Bonus Tips
- Always name your icons Icon-192.png and Icon-512.png — PWA Builder looks for these exact names.
- When editing or re-uploading files, ensure they keep their exact names and do not say “updated” in front.
- You can create one PWA repo per site you own (e.g., Blogger, portfolio, converter).
- You can use custom icons and names for each.
- To make it installable offline, you can later add a service worker (optional).
PWA walks you through how to turn your link into an android or iOS app. Select get a new signing key.
Match Your App Name to Your GitHub Repository
When you generate your app in PWA Builder, always make sure the App ID or package name matches the name you used for your GitHub repository — for example, if your GitHub repo is called:
File-converter
then your App ID should look like:
io.github.ventsharm.fileconverter
Keeping this consistent helps Android recognize your app as trusted and connected to your GitHub Pages PWA.
If the name or App ID doesn’t match what you used on GitHub, the app might fail to install or update properly on devices.
Also if you use twa PWAs standard package name for every app you make you will merge apps.
This simple naming rule keeps everything linked correctly between GitHub, PWA Builder, and Google Play.
I personally don't use IOS, you have to pay and it's really complicated. I tried it once it's £70 a year and not worth it.
I use Google play, it's cheap and forever. If you need further help on uploading to the Google play store, email me ventsharm@ventsharmblogs.co.uk or comment below 🩷
Don't forget to save your edits!
I do hope you've found something useful from this page. Leave me a comment below if something isn't working right! Thank you!
The next thing I suggest you read is Basic CSS codes for your Blogger
_LI.jpg)
_LI.jpg)
I'd love feedback about this Blog's coding series. Feel free to leave me some!
ReplyDelete