September 4, 2026 23 min read Database

JINSI YA KUBADILI WEBSITE KUWA APP KWA KUTUMIA PWA HATUA KWA HATUA

1) PWA ni nini kwa kifupi

PWA ni website ambayo inaweza:

· kuonekana kama app

· kuinstalliwa kwenye simu au desktop

· kufunguka hata offline kwa baadhi ya pages

· kuwa na icon kwenye home screen

· kufungua bila browser tabs nyingi kama website ya kawaida

Ili system yako iwe PWA unahitaji vitu vikuu 3:

· manifest.json

sw.js (service worker)
icons za app

Halafu page yako kuu lazima:

iwe na link ya manifest
i-register service worker
iwe na theme-color
iwe HTTPS

2) Folder structure ya kutumia

Tengeneza structure hii kwenye project yako:

/project-folder
│
├── index.php
├── manifest.json
├── sw.js
├── offline.html
├── logo-header.png
│
└── icons
    ├── icon-72x72.png
    ├── icon-96x96.png
    ├── icon-128x128.png
    ├── icon-144x144.png
    ├── icon-152x152.png
    ├── icon-192x192.png
    ├── icon-384x384.png
    └── icon-512x512.png

Kama system yako si index.php, bado unaweza kutumia page nyingine kama:

home.php
dashboard.php
app.php

Lakini kwa guide hii nitabaki na index.php.

3) STEP 1: Andaa logo na icons

Kwa PWA, logo ya app haitumii PDF moja kwa moja. Inahitaji PNG images.

Wewe tayari una logo file kwenye PDF.
Tumia zile files nilizokutengenezea tayari:

Pakua PWA icons zip
Pakua logo ya kawaida PNG
Pakua logo ya header

Cha kufanya

unzip star_quality_pwa_icons.zip
copy folder la icons liingie ndani ya project yako
copy logo-header.png liingie root ya project

4) STEP 2: Tengeneza manifest.json

Hii ndiyo file inayoiambia browser jina la app, icon zake, na namna ya kufunguka.

File: manifest.json

{
"name": "STAR QUALITY MICROFINANCE",
"short_name": "SQM App",
"description": "Professional microfinance platform for loans, repayments, borrowers, reports, and daily operations.",
"start_url": "/index.php",
"scope": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#f8fbff",
"theme_color": "#0d6efd",
"lang": "en",
"dir": "ltr",
"icons": [
    {
      "src": "icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
],
"shortcuts": [
    {
      "name": "Login",
      "short_name": "Login",
      "description": "Open login page",
      "url": "/mikopologin.php",
      "icons": [
        {
          "src": "icons/icon-192x192.png",
          "sizes": "192x192",
          "type": "image/png"
        }
      ]
    },
    {
      "name": "Dashboard",
      "short_name": "Dashboard",
      "description": "Open dashboard",
      "url": "/mikopodashboard.php",
      "icons": [
        {
          "src": "icons/icon-192x192.png",
          "sizes": "192x192",
          "type": "image/png"
        }
      ]
    }
]
}

5) STEP 3: Tengeneza offline.html

Hii ndiyo page ya kuonyesha internet ikiwa haipo.

File: offline.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Offline | STAR QUALITY MICROFINANCE</title>
    <meta name="theme-color" content="#0d6efd">
    <style>
        body{
            margin:0;
            font-family:Arial, sans-serif;
            background:#f8fbff;
            display:flex;
            align-items:center;
            justify-content:center;
            min-height:100vh;
            color:#0f172a;
        }
        .box{
            max-width:420px;
            background:#fff;
            padding:30px;
            border-radius:20px;
            box-shadow:0 15px 40px rgba(0,0,0,.08);
            text-align:center;
        }
        .icon{
            font-size:60px;
            margin-bottom:15px;
        }
        h1{
            margin:0 0 10px;
            font-size:28px;
        }
        p{
            color:#64748b;
            line-height:1.7;
        }
        a{
            display:inline-block;
            margin-top:15px;
            text-decoration:none;
            background:#0d6efd;
            color:#fff;
            padding:12px 20px;
            border-radius:999px;
            font-weight:bold;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="icon">📡</div>
        <h1>You are offline</h1>
        <p>Internet connection is not available right now. Please reconnect and try again.</p>
        <a href="index.php">Retry</a>
    </div>
</body>
</html>

6) STEP 4: Tengeneza sw.js

Hii ndiyo service worker. Kazi yake ni:

ku-cache files
kusaidia pages kufunguka hata internet ikiwa imekatika
kufanya website ionekane kama app

File: sw.js

7) STEP 5: Tengeneza au badilisha index.php

Hii ndiyo page kuu ya app yako. Nimeweka version safi, yenye:

logo yako kwenye navbar
manifest
install button
service worker registration
online/offline status
PWA support

File: index.php

<?php
session_start();

/*
|--------------------------------------------------------------------------
| BASIC SETTINGS
|--------------------------------------------------------------------------
*/
$company_name   = "STAR MICROFINANCE";
$dashboard_url = "mikopodashboard.php";
$login_url      = "mikopologin.php";
$logout_url     = "mikopologout.php";
$home_url       = "faulink_logout.php";
$phone_number   = "444444444444";
$phone_clean    = "255746293637";

/*
|--------------------------------------------------------------------------
| SAFE URLS FOR META TAGS
|--------------------------------------------------------------------------
*/
$current_url = (
    (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https://' : 'http://'
) . ($_SERVER['HTTP_HOST'] ?? 'localhost') . ($_SERVER['REQUEST_URI'] ?? '');

$site_logo = "icons/icon-512x512.png";

/*
|--------------------------------------------------------------------------
| OPTIONAL REDIRECT IF LOGGED IN
|--------------------------------------------------------------------------
*/
if (isset($_SESSION['user_id']) && !isset($_GET['stay'])) {
    header("Location: " . $dashboard_url);
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?php echo htmlspecialchars($company_name, ENT_QUOTES, 'UTF-8'); ?> | Trusted Microfinance Services</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

    
    <meta name="description" content="<?php echo htmlspecialchars($company_name, ENT_QUOTES, 'UTF-8'); ?> offers fast, secure, and reliable microfinance services.">
    <meta name="keywords" content="microfinance, loans, Tanzania loans, repayment management, <?php echo htmlspecialchars($company_name, ENT_QUOTES, 'UTF-8'); ?>">
    <meta name="author" content="<?php echo htmlspecialchars($company_name, ENT_QUOTES, 'UTF-8'); ?>">
    <meta name="robots" content="index, follow">

    
    <meta name="theme-color" content="#0d6efd">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="<?php echo htmlspecialchars($company_name, ENT_QUOTES, 'UTF-8'); ?>">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="<?php echo htmlspecialchars($company_name, ENT_QUOTES, 'UTF-8'); ?>">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">

    <link rel="manifest" href="manifest.json">
    <link rel="apple-touch-icon" href="icons/icon-192x192.png">
    <link rel="icon" type="image/png" sizes="192x192" href="icons/icon-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="icons/icon-512x512.png">

    
    <meta property="og:title" content="<?php echo htmlspecialchars($company_name, ENT_QUOTES, 'UTF-8'); ?> | Trusted Microfinance Services">
    <meta property="og:description" content="Fast approval, secure lending, and simple loan management for individuals and businesses.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="<?php echo htmlspecialchars($current_url, ENT_QUOTES, 'UTF-8'); ?>">
    <meta property="og:image" content="<?php echo htmlspecialchars($site_logo, ENT_QUOTES, 'UTF-8'); ?>">

    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">

    <style>
        :root{
            --primary:#0d6efd;
            --primary-dark:#0a4fb3;
            --accent:#00c2a8;
            --dark:#0f172a;
            --muted:#64748b;
            --shadow:0 15px 45px rgba(15, 23, 42, 0.12);
        }

        body{
            font-family:Arial, sans-serif;
            background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);
            color:var(--dark);
            margin:0;
            padding:0;
        }

        .navbar{
            background:#fff;
            box-shadow:0 10px 30px rgba(0,0,0,0.05);
        }

        .navbar-brand{
            font-weight:800;
            font-size:1.2rem;
            color:var(--dark)!important;
            text-decoration:none;
        }

        .nav-btn{
            border-radius:999px;
            padding:10px 20px;
            font-weight:600;
        }

        .btn-main{
            background:linear-gradient(135deg,var(--primary),var(--primary-dark));
            color:#fff;
            border:none;
        }

        .btn-main:hover{
            color:#fff;
        }

        .btn-soft{
            border:1px solid rgba(13,110,253,.15);
            background:#fff;
            color:var(--primary);
        }

        .hero{
            padding:90px 0 70px;
        }

        .hero-card{
            background:#fff;
            border-radius:28px;
            box-shadow:var(--shadow);
            padding:45px;
        }

        .section{
            padding:70px 0;
        }

        footer{
            background:#0b1220;
            color:#fff;
            padding:35px 0 20px;
            margin-top:50px;
        }

        .install-btn-wrap{
            position:fixed;
            right:18px;
            bottom:18px;
            z-index:9999;
        }

        #installAppBtn{
            display:none;
            border:none;
            border-radius:999px;
            padding:14px 18px;
            font-weight:700;
            box-shadow:0 10px 35px rgba(13,110,253,.30);
        }

        .offline-badge{
            position:fixed;
            left:18px;
            bottom:18px;
            z-index:9999;
            display:none;
            background:#dc3545;
            color:#fff;
            padding:10px 16px;
            border-radius:999px;
            font-weight:700;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-lg sticky-top">
    <div class="container py-2 d-flex justify-content-between align-items-center">
        <a class="navbar-brand d-flex align-items-center gap-3" href="#">
            <img src="logo-header.png" alt="<?php echo htmlspecialchars($company_name, ENT_QUOTES, 'UTF-8'); ?>" style="height:56px; width:auto; border-radius:10px;">
            <div>
                <div><?php echo htmlspecialchars($company_name, ENT_QUOTES, 'UTF-8'); ?></div>
                <small class="text-muted fw-semibold">Trusted Financial Growth Partner</small>
            </div>
        </a>

        <div class="d-flex gap-2">
            <a href="<?php echo htmlspecialchars($login_url, ENT_QUOTES, 'UTF-8'); ?>" class="btn btn-main nav-btn">
                Login
            </a>
            <a href="#contact" class="btn btn-soft nav-btn">
                Contact
            </a>
        </div>
    </div>
</nav>

<section class="hero">
    <div class="container">
        <div class="hero-card">
            <h1>Welcome to <?php echo htmlspecialchars($company_name, ENT_QUOTES, 'UTF-8'); ?></h1>
            <p>
                We provide simple, fast, and professional microfinance services for individuals,
                entrepreneurs, and growing businesses.
            </p>

            <div class="d-flex flex-wrap gap-3 mt-4">
                <a href="<?php echo htmlspecialchars($login_url, ENT_QUOTES, 'UTF-8'); ?>" class="btn btn-main">Login Now</a>
                <a href="<?php echo htmlspecialchars($dashboard_url, ENT_QUOTES, 'UTF-8'); ?>" class="btn btn-soft">Open Dashboard</a>
            </div>
        </div>
    </div>
</section>

<section class="section" id="contact">
    <div class="container">
        <h2>Contact &

🚀 Unahitaji mfumo au website ya biashara?

Chagua huduma hapa chini kisha mteja bofya moja kwa moja kwenda kwenye ukurasa wa huduma au kuwasiliana nasi kwa WhatsApp.

🌐 Website Design 🏫 Mfumo wa Shule 🗄️Mfumo wa Mauzo 💳 Mfumo wa vikoba 💳 Mfumo wa Ratiba 💬 Chat WhatsApp

Share this post

Previous Next

JINSI YA KUBADILI WEBSITE KUWA APP KWA KUTUMIA PWA HATUA KWA HATUA

1) PWA ni nini kwa kifupi

2) Folder structure ya kutumia

3) STEP 1: Andaa logo na icons

4) STEP 2: Tengeneza manifest.json

5) STEP 3: Tengeneza offline.html

6) STEP 4: Tengeneza sw.js

7) STEP 5: Tengeneza au badilisha index.php

🚀 Unahitaji mfumo au website ya biashara?

Comments

Continue Reading

Jinsi ya Kubadili Username na Password ya Mtumiaji Kupitia phpMyAdmin

Links Muhimu za Huduma za FAULINK SOFTWARE SOLUTIONS LIMITED

Jinsi ya Kusajili Kampuni Tanzania: Hatua za BRELA, Aina za Kampuni, Gharama na Nyaraka Muhimu

Jinsi ya Kufungua Kampuni Kupitia BRELA Tanzania: Hatua, Aina za Kampuni na Faida Zake

Jinsi ya Kuunganisha PHP, MySQL Database na HTML Hatua kwa Hatua

Mfumo Bora wa Matokeo ya Wanafunzi Tanzania: Sajili Shule Yako Faulink

JINSI YA KUBADILI WEBSITE KUWA APP KWA KUTUMIA PWA HATUA KWA HATUA

1) PWA ni nini kwa kifupi

2) Folder structure ya kutumia

3) STEP 1: Andaa logo na icons

4) STEP 2: Tengeneza manifest.json

5) STEP 3: Tengeneza offline.html

6) STEP 4: Tengeneza sw.js

7) STEP 5: Tengeneza au badilisha index.php

🚀 Unahitaji mfumo au website ya biashara?

Comments

Continue Reading

Jinsi ya Kubadili Username na Password ya Mtumiaji Kupitia phpMyAdmin

Links Muhimu za Huduma za FAULINK SOFTWARE SOLUTIONS LIMITED

Jinsi ya Kusajili Kampuni Tanzania: Hatua za BRELA, Aina za Kampuni, Gharama na Nyaraka Muhimu

Jinsi ya Kufungua Kampuni Kupitia BRELA Tanzania: Hatua, Aina za Kampuni na Faida Zake

Jinsi ya Kuunganisha PHP, MySQL Database na HTML Hatua kwa Hatua

Mfumo Bora wa Matokeo ya Wanafunzi Tanzania: Sajili Shule Yako Faulink

Get new updates