آموزش جامع PWA (Progressive Web App)

PWA ، Progressive Web App، ساخت برنامه موبایل با PWA، ساخت برنامه موبایل از وب سایت 1404/5/19
نویسنده: مدرس بهمن آبادی

آموزش جامع PWA (Progressive Web App)

آموزش PWA

1. مقدمه

PWA اپلیکیشنی است که با استفاده از تکنولوژی‌های وب (HTML, CSS, JavaScript) ساخته می‌شود اما قابلیت‌هایی مشابه اپلیکیشن‌های بومی (Native) را دارد:

  • نصب روی دستگاه کاربر
  • استفاده آفلاین
  • نوتیفیکیشن پوش (Push Notifications)
  • بارگذاری سریع حتی در اینترنت ضعیف

 

مثال: توییتر نسخه وبش (mobile.twitter.com) یک PWA است. اگر آن را روی گوشی باز کنید می‌توانید گزینه Add to Home Screen را بزنید و مثل اپ عادی اجرا شود.

آموزش کامل PWA در دوره جامع برنامه‌نویسی وب وجود دارد.

 

2. ویژگی‌های اصلی PWA

ویژگیتوضیح
Responsiveروی همه دستگاه‌ها (موبایل، تبلت، دسکتاپ) بهینه نمایش داده می‌شود
Offline Readyبه کمک Service Worker حتی بدون اینترنت کار می‌کند
Installableامکان افزودن به صفحه اصلی موبایل یا دسکتاپ
Secureباید روی HTTPS اجرا شود
App-likeتجربه کاربری مشابه اپلیکیشن‌های بومی

آموزش PWA

3. ساختار یک PWA

برای ساخت یک PWA باید سه بخش اصلی را داشته باشید:

  • Manifest File (manifest.json) → معرفی اپلیکیشن به مرورگر (نام، آیکون، رنگ و...)
  • Service Worker → فایل جاوااسکریپتی که پشت‌صحنه اجرا می‌شود و مسئول کش کردن فایل‌ها و کارکرد آفلاین است
  • HTTPS → الزامی برای نصب و دسترسی به قابلیت‌های پیشرفته

 

4. شروع پروژه (مثال عملی)

فرض کنیم یک اپ ساده "لیست کارها" (To-do List) می‌سازیم.

مرحله ۱ – ساخت ساختار پوشه‌ها:

5. فایل HTML پایه (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PWA To-Do App</title>
  <link rel="stylesheet" href="style.css">
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <h1>To-Do List</h1>
  <input id="task" placeholder="Add a task">
  <button onclick="addTask()">Add</button>
  <ul id="list"></ul>

  <script src="app.js"></script>
</body>
</html>

6. فایل استایل (style.css)

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 20px;
}
input {
  padding: 5px;
  font-size: 16px;
}
button {
  padding: 6px 10px;
  font-size: 16px;
}

7. اسکریپت اپ (app.js)

const list = document.getElementById("list");
const taskInput = document.getElementById("task");

function addTask() {
  const task = taskInput.value.trim();
  if (task) {
    const li = document.createElement("li");
    li.textContent = task;
    list.appendChild(li);
    taskInput.value = "";
  }
}

// ثبت سرویس‌ورکر
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js')
    .then(() => console.log("Service Worker Registered"));
}

 

 

8. فایل Manifest (manifest.json)

 

 

 

 

{
  "name": "PWA To-Do",
  "short_name": "To-Do",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "description": "A simple PWA To-Do app",
  "icons": [
    {
      "src": "icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

 

 

9. سرویس‌ورکر (sw.js)

 

 

 

const CACHE_NAME = "pwa-todo-cache-v1";
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/app.js',
  '/manifest.json'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      return cache.addAll(urlsToCache);
    })
  );
});

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

});

 

توضیح:

  • install → فایل‌ها را کش می‌کند برای استفاده آفلاین

  • fetch → درخواست‌ها را اول از کش و بعد از اینترنت می‌گیرد

 

 

10. اجرای پروژه روی HTTPS

PWA باید روی HTTPS اجرا شود (به جز localhost)
راه‌حل ساده:

  • اگر روی لوکال هستید → Live Server یا localhost

  • اگر آنلاین می‌گذارید → از Netlify, Vercel یا GitHub Pages استفاده کنید

 

 

11.تست و نصب PWA

  1. پروژه را روی مرورگر Chrome باز کنید

  2. در نوار آدرس، آیکون نصب (📥) را بزنید

  3. اپ روی سیستم یا موبایل نصب می‌شود و مثل اپ نیتیو باز می‌شود

12.امکانات پیشرفته PWA

  • Push Notification (ارسال نوتیفیکیشن)

  • Background Sync (همگام‌سازی پس‌زمینه)

  • Advanced Caching Strategies (استراتژی‌های کش مثل stale-while-revalidate)

  • Access to Native APIs (مثل دوربین، GPS، فایل‌ها)

 

جمع‌بندی:

PWA ترکیبی از وب و اپلیکیشن موبایل است که هم سبک و سریع است، هم قابلیت نصب و کار آفلاین دارد. با یک فایل manifest و یک service worker ساده، می‌توانید سایت خود را به یک اپلیکیشن واقعی تبدیل کنید.

 

منابع پیشنهادی