Here is the corrected and structured version of your PWA guide, ensuring accuracy, proper formatting, and a clear flow. 🚀

How to Convert Your Website into a Progressive Web App (PWA) Easily

Progressive Web Apps (PWAs) enhance the user experience by enabling websites to behave like native apps. They provide offline support, push notifications, and faster loading times.

In this guide, we’ll show you how to convert your existing website into a PWA without requiring a database.

1. What is a Progressive Web App (PWA)?

A PWA is a web application that provides an app-like experience using modern web technologies. PWAs work offline, load instantly, and can be installed on mobile devices without requiring an app store.

Key Benefits of PWAs

✅ Fast Loading – Caching ensures quick page loads.
✅ Offline Support – Works without an internet connection.
✅ Installable – Users can add it to their home screen.
✅ Push Notifications – Engage users with alerts.
✅ Secure & Responsive – Works on any device securely via HTTPS.

2. Steps to Convert Your Website into a PWA

We’ll cover the four main components required to transform your website into a fully functional PWA.

✔ Step 1: Create a Web App Manifest (manifest.json)

A web app manifest is a JSON file that provides metadata about your PWA, like name, theme, icons, and the start page.

👉 Create a file named manifest.json inside your website’s root folder.

{
    "name": "Kritim NGO",
    "short_name": "Kritim",
    "start_url": "/index.php",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#0275d8",
    "orientation": "portrait",
    "icons": [
        {
            "src": "/img/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/img/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

Explanation of manifest.json

  • "name" – Full name displayed on install.
  • "short_name" – Short version for small screens.
  • "start_url" – The first page when the app opens (Make sure it’s set to /index.php for correct redirection).
  • "display" – "standalone" removes the browser UI for an app-like experience.
  • "theme_color" – Defines the color for the app’s top bar.
  • "background_color" – Background color when the app launches.
  • "icons" – Icons used when the app is installed.

✔ Step 2: Add the Manifest File to Your HTML

You need to link the manifest file inside your HTML <head> section.

👉 Modify your index.php or index.html like this:

<head>
    <title>Kritim NGO</title>
    
    <!-- Link the PWA Manifest -->
    <link rel="manifest" href="manifest.json">

    <!-- iOS PWA Support -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Kritim NGO">
    <link rel="apple-touch-icon" href="img/icon-192x192.png">
</head>

💡 Why iOS Support?
Apple devices don’t fully support PWAs, so adding these meta tags improves compatibility.

✔ Step 3: Create a Service Worker (sw.js)

A Service Worker is a JavaScript file that helps your PWA work offline by caching important files.

👉 Create a file named sw.js inside your website’s root folder.

const CACHE_NAME = "kritim-ngo-cache-v1";
const urlsToCache = [
  "/",
  "/index.php",
  "/css/style.css",
  "/js/slider.js",
  "/img/icon-192x192.png",
  "/img/icon-512x512.png"
];

// Install Service Worker
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      return cache.addAll(urlsToCache);
    })
  );
});

// Fetch Requests
self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

// Activate & Update Service Worker
self.addEventListener("activate", (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.filter((cache) => cache !== CACHE_NAME)
        .map((cache) => caches.delete(cache))
      );
    })
  );
});

What Does sw.js Do?

  • Caches Files – Ensures your site loads even when offline.
  • Intercepts Requests – Loads cached content before fetching new data.
  • Updates Cache – Removes old cache versions when the service worker updates.

✔ Step 4: Register the Service Worker

You need to tell the browser to use sw.js as the service worker.

👉 Modify your index.php or index.html and add this script inside <head>:

<script>
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js')
    .then(reg => console.log("Service Worker Registered"))
    .catch(err => console.log("Service Worker Registration Failed:", err));
}
</script>

💡 This ensures your site works offline after the first visit.

✔ Step 5: Create a Splash Screen (splash-screen.html)

A splash screen is displayed when the PWA is launched.

👉 Create a file named splash-screen.html in your root folder.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading...</title>
    <style>
        body { display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; background: #0275d8; }
        .logo { width: 150px; }
    </style>
</head>
<body>
    <img class="logo" src="img/icon-512x512.png" alt="Kritim NGO">
    <script>
        setTimeout(() => { window.location.href = "/index.php"; }, 2000);
    </script>
</body>
</html>

💡 Ensures smooth loading experience before navigating to index.php.

3. Adding an Install Prompt for PWA

By default, Chrome shows a PWA install prompt, but you can also create a custom install button.

👉 Add this script inside index.php:

<script>
let deferredPrompt;
window.addEventListener("beforeinstallprompt", (e) => {
    e.preventDefault();
    deferredPrompt = e;

    let installBanner = document.createElement("div");
    installBanner.innerHTML = `
        <div style="position:fixed; bottom:0; left:0; width:100%; background:#0275d8; color:#fff; padding:15px; text-align:center;">
            <span>Install Kritim NGO as an App!</span>
            <button id="installBtn" style="margin-left:10px; background:#fff; color:#0275d8; padding:5px 10px; border:none; cursor:pointer;">Install</button>
        </div>`;
    document.body.appendChild(installBanner);

    document.getElementById("installBtn").addEventListener("click", () => {
        installBanner.style.display = "none";
        deferredPrompt.prompt();
    });
});
</script>

🎉 Congratulations!

Your website is now a fully functional PWA! 🚀
📲 Users can install your website and access it offline like a native app! ✅