آموزش مقدماتی PWA
در کمتر از ۱۵ دقیقه، مفاهیم پایه اپلیکیشن وب پیشرو (PWA) را یاد بگیرید. Manifest، Service Worker، نصب‌پذیری و کار آفلاین — با مثال‌های ساده.
۱ PWA چیست؟
PWA (Progressive Web App — اپلیکیشن وب پیشرو) یک وب‌سایت است که مانند یک اپلیکیشن موبایل عمل می‌کند. می‌تواند روی صفحه اصلی گوشی نصب شود، آفلاین کار کند، و تجربه‌ای شبیه اپ‌های نیتیو ارائه دهد.
PWA از فناوری‌های وب استاندارد (HTML، CSS، JavaScript) ساخته می‌شود، اما ویژگی‌هایی دارد که آن را از یک وب‌سایت معمولی متمایز می‌کند:
- نصب‌پذیر: می‌توان آن را روی صفحه اصلی نصب کرد.
- آفلاین: بدون اینترنت هم کار می‌کند.
- سریع: با کش هوشمند، بارگذاری سریع‌تری دارد.
- یک کد، همه‌جا: روی موبایل، تبلت و دسکتاپ کار می‌کند.
۲ Web App Manifest — شناسنامه PWA
Manifest یک فایل JSON است که به مرورگر می‌گوید PWA شما چه نامی دارد، چه آیکونی، و چطور باید نمایش داده شود. بدون این فایل، مرورگر نمی‌تواند PWA را نصب کند.
{
"name": "کالاکن",
"short_name": "کالاکن",
"start_url": "/",
"display": "standalone",
"theme_color": "#16a34a",
"background_color": "#ffffff",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
برای اتصال Manifest به HTML، این خط را در <head> اضافه کنید:
۳ Service Worker — قلب آفلاین PWA
Service Worker یک اسکریپت است که در پس‌زمینه مرورگر اجرا می‌شود و بین صفحه و شبکه قرار می‌گیرد. این اسکریپت مسئول کش کردن فایل‌ها و ارائهٔ آن‌ها در حالت آفلاین است.
ساده‌ترین Service Worker:
const CACHE = "kalakan-v1";
const ASSETS = ["/", "/index.html", "/style.css"];
// نصب: کش کردن فایل‌ها
self.addEventListener("install", (e) => {
e.waitUntil(
caches.open(CACHE).then(cache => cache.addAll(ASSETS))
);
});
// درخواست‌ها: اول کش، بعد شبکه
self.addEventListener("fetch", (e) => {
e.respondWith(
caches.match(e.request).then(res => res || fetch(e.request))
);
});
برای فعال‌سازی، این کد را در فایل JavaScript اصلی اضافه کنید:
navigator.serviceWorker.register("/sw.js");
}
۴ نصب‌پذیری — نصب روی صفحه اصلی
وقتی یک وب‌سایت شرایط PWA را داشته باشد (Manifest + Service Worker + HTTPS)، مرورگر به کاربر پیشنهاد نصب می‌دهد. کاربر می‌تواند آن را روی صفحه اصلی (Home Screen) یا دسکتاپ نصب کند.
می‌توانید یک دکمهٔ نصب سفارشی هم اضافه کنید:
let installPrompt = null;
window.addEventListener("beforeinstallprompt", (e) => {
e.preventDefault();
installPrompt = e;
document.getElementById("installBtn").style.display = "block";
});
// کلیک روی دکمه
document.getElementById("installBtn").addEventListener("click", async () => {
if (!installPrompt) return;
const result = await installPrompt.prompt();
console.log(result.outcome); // "accepted" یا "dismissed"
});
beforeinstallprompt پشتیبانی نمی‌کند. کاربران آیفون باید دستی از منوی اشتراک‌گذاری («Add to Home Screen») استفاده کنند. بهتر است یک راهنمای تصویری برایشان نمایش دهید.
۵ مقایسه PWA و اپ نیتیو
PWA و اپ نیتیو هر کدام مزایا و معایب خودشان را دارند. انتخاب بستگی به نیاز پروژه دارد.
| ویژگی | PWA | اپ نیتیو |
|---|---|---|
| نصب | از مرورگر (بدون استور) | از استور |
| آفلاین | بله (Service Worker) | بله |
| دسترسی به سخت‌افزار | محدود | کامل |
| حجم | کوچک | بزرگ |
| به‌روزرسانی | خودکار | از استور |
| پشتیبانی iOS | محدود | کامل |
۶ چطور PWA بسازیم؟
مراحل ساخت یک PWA ساده:
- یک وب‌سایت ساده با HTML/CSS/JS بسازید.
- فایل
manifest.jsonرا ایجاد و به HTML متصل کنید. - فایل
sw.js(Service Worker) را بنویسید. - Service Worker را در JS اصلی ثبت کنید.
- سایت را روی HTTPS قرار دهید (الزامی).
- با DevTools → Application → Manifest بررسی کنید.
ابزارهای مفید:
- Lighthouse — در Chrome DevTools برای بررسی PWA
- PWABuilder — برای بسته‌بندی PWA برای استورها
- Workbox — کتابخانه گوگل برای ساده‌سازی Service Worker
آزمون کوتاه
۳ سوال — دانش خود را بسنجید!