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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Faulink</title>

<!-- CSS -->
<link rel="stylesheet" href="/style.css">

<!-- Manifest -->
<link rel="manifest" href="/manifest.json">
</head>
<body>
<h1>Karibu Faulink.com App!</h1>
<p>Hii ni PWA yako tayari kufanya download.</p>

<!-- JavaScript -->
<script src="/app.js"></script>

<!-- Register Service Worker -->
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(() => console.log('Service Worker Registered'))
.catch(err => console.log('Service Worker Failed', err));
}
</script>
</body>
</html>

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:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Faulink</title>
<link rel="stylesheet" href="/style.css">
<link rel="manifest" href="/manifest.json">
</head>
<body>
<h1>About Faulink</h1>
<p>Hii ni page ya About.</p>
</body>
</html>

✅ 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.