ایپ بنانا سیکھیں

آف لائن موبائل ایپ بنانے کا مکمل طریقہ

اگر آپ نے HTML، جیسون (JSON)، اور جاوا اسکرپٹ جیسے ویب زبانوں میں کوئی تعلیمی یا ذاتی ٹول بنایا ہے اور چاہتے ہیں کہ وہ موبائل میں ایک ایپ کی طرح انسٹال ہو جائے اور انٹرنیٹ کے بغیر بھی کام کرے، تو اس کے لیے “پروگریسیو ویب ایپ” (Progressive Web App) ایک بہترین حل ہے۔ یہ مضمون مرحلہ وار وضاحت کے ساتھ آپ کو سکھاتا ہے کہ کس طرح آپ اپنی ویب فائلز کو صرف تین اضافی فائلیں — manifest.json، service-worker.js، اور ایک انسٹالیشن اسکرپٹ — کی مدد سے مکمل آف لائن ایپ میں تبدیل کر سکتے ہیں۔ نیچے دیا گیا مکمل کوڈ ایک نمونہ ہے جس پر عمل کرکے آپ فوراً اپنی پہلی ایپ خود بنا سکتے ہیں۔

index.html

<!DOCTYPE html>
<html lang="ur" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>میری پہلی ایپ</title>
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#6a1b9a">
  <link rel="stylesheet" href="https://usamasarsari.com/fonts/Jameel-Noori-Nastaleeq-Regular.ttf">

  <style>
    @font-face {
      font-family: 'Jameel Noori Nastaleeq';
      src: url('https://usamasarsari.com/fonts/Jameel-Noori-Nastaleeq-Regular.ttf');
    }
    body {
      font-family: 'Jameel Noori Nastaleeq', serif;
      background-color: #f8f8f8;
      margin: 0;
      padding: 20px;
      text-align: center;
    }
    h1 {
      color: #4a148c;
      font-size: 32px;
    }
    button {
      font-family: 'Jameel Noori Nastaleeq', serif;
      font-size: 22px;
      padding: 12px 30px;
      margin: 15px;
      background-color: #6a1b9a;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
    button:hover {
      background-color: #4a148c;
    }
    #result {
      font-size: 26px;
      color: green;
      margin-top: 20px;
    }
  </style>
</head>

<body>

  <h1>میری پہلی ایپ</h1>

  <button onclick="showMessage()">میری پہلی ایپ</button>
  <div id="result"></div>

  <button id="installBtn" style="display:none;">ایپ انسٹال کریں</button>

  <script>
    function showMessage() {
      document.getElementById("result").innerText = "الحمدللہ یہ ایپ کام کر رہی ہے۔";
    }

    let deferredPrompt;
    const installBtn = document.getElementById('installBtn');

    window.addEventListener('beforeinstallprompt', (e) => {
      e.preventDefault();
      deferredPrompt = e;
      installBtn.style.display = 'inline-block';
    });

    installBtn.addEventListener('click', () => {
      if (deferredPrompt) {
        deferredPrompt.prompt();
        deferredPrompt.userChoice.then(() => {
          deferredPrompt = null;
          installBtn.style.display = 'none';
        });
      }
    });

    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js');
    }
  </script>

</body>
</html>

manifest.json

{
  "name": "میری پہلی ایپ",
  "short_name": "ایپ",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#6a1b9a",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

service-worker.js

const cacheName = "mera-pehla-cache-v1";
const filesToCache = [
  "index.html",
  "manifest.json",
  "icon-192.png",
  "icon-512.png"
];

self.addEventListener("install", event => {
  event.waitUntil(
    caches.open(cacheName).then(cache => cache.addAll(filesToCache))
  );
});

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

لاگ اِن ہوکر 100 کوائنز مفت میں حاصل کریں۔

index.html

manifest.json

service-worker.js

مزید