Full Folder Structure & Code – Beginner Ready PWA
faulink-app/ ← Root folder ya website/app
│
├── index.php ← Homepage ya website
├── style.css ← CSS yako
├── app.js ← JavaScript yako
├── manifest.json ← App info
├── service-worker.js ← Offline support
│
├── icons/ ← Folder ya icons
│ ├── icon-192.png
│ └── icon-512.png
│
└── other-pages/ ← Optional: pages kama about.php, contact.php
├── about.php
└── contact.php

1. index.php

Karibu Faulink.com App!

Hii ni PWA yako tayari kufanya download.

2. style.css
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}

h1 {
color: #0d6efd;
}

p {
font-size: 18px;
}

3. app.js
console.log("Faulink PWA is running!");

4. manifest.json
{
"name": "Faulink",
"short_name": "Faulink",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#0d6efd",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

5. service-worker.js
self.addEventListener('install', e => {
e.waitUntil(
caches.open('faulink-cache').then(cache => cache.addAll([
'/',
'/index.php',
'/style.css',
'/app.js'
]))
);
});

self.addEventListener('fetch', e => {
e.respondWith(
caches.match(e.request).then(response => response || fetch(e.request))
);
});

6. icons folder

Folder: icons/

Files inside:

icon-192.png → small app icon

icon-512.png → large app icon

Notes:

Use any PNG image for icons.

Icons must exist else PWA won’t install.

7. Optional pages folder
other-pages/
about.php
contact.php

Example about.php:

About Faulink

Hii ni page ya About.

✅ How to Test Locally

Open folder ya faulink-app kwenye browser (Chrome recommended).

Press F12 → Lighthouse → Run Progressive Web App audit.

Check kama:

“Add to Home Screen” inapatikana

Offline mode inafanya kazi

Loading speed ni fast

8. Next Steps (Optional: Hybrid App / Android/iOS)

Follow the Capacitor steps nilizokupa kwenye guide ya awali.

Copy faulink-app folder kama your web source.

Then build Android APK au iOS app.

💡 Tips for Beginners:

Save manifest.json, service-worker.js, na icons kwenye root folder.

Save style.css na app.js kwenye root folder (au subfolder kama unataka).

Link them correctly kwenye HTML / PHP pages.

Test offline na Chrome DevTools.