PWA: اپلیکیشن‌های وب پیش‌رو با تجربه بومی

PWA (Progressive Web App) سایت وبی که مثل اپ کار میکنه. کاربر نصب میکنه، Offline کار میکنه، Push Notification میگیره.

PWA مزایا

نصب: بدون App Store
Offline: بدون اینترنت
Push Notification
سریع: Cache قوی
Cross-platform: یه بار بنویس، همه جا

Components

Manifest

manifest.json:
{
  "name": "SabaHost",
  "short_name": "Saba",
  "start_url": "/",
  "display": "standalone",
  "icons": [...]
}

Service Worker

JavaScript در Background. Cache و Fetch.

HTTPS

اجباری برای PWA.

Install

مرورگر Prompt Install نشون میده.

Service Worker Register

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

Cache Strategy

Cache First: از Cache، بعد Network
Network First: از Network، بعد Cache
Stale While Revalidate: از Cache نشون بده، در Background آپدیت

Workbox

کتابخانه Google برای PWA. راحت‌تر از خام.

Testing

Lighthouse در Chrome DevTools. PWA Score.

WordPress PWA

پلاگین PWA برای WordPress یا SuperPWA.

Push Notification

OneSignal پلاگین ساده.

Add to Home Screen

در iOS و Android خودکار.

App Shell

UI اصلی رو Cache کنید. لود فوری.

Web App Manifest Icons

192x192، 512x512 حداقل. مربع.

Splash Screen

در Android خودکار از Manifest.

Update Mechanism

Service Worker خودکار Update. کاربر Refresh.

Analytics

Google Analytics PWA رو رصد میکنه.

SEO

PWA به SEO ضرر نمیزنه. حتی سرعت بالا میره.

Native App vs PWA

PWA سریع‌تر توسعه. Native دسترسی بیشتر به hardware.

Frameworks

Vue PWA، React PWA، Angular PWA همه ساده.

Example

Twitter، Pinterest، Uber همه PWA دارن.

سباهاست

هاست سریع سباهاست + LiteSpeed = PWA عالی.

جمع‌بندی

PWA آینده وب هست. با سرمایه‌گذاری کم، تجربه‌ای مثل اپ ارائه دهید.