ساخت اپلیکیشن پیش‌رونده (PWA) با Next.js – نصب‌پذیر، آفلاین، و نوتیفیکیشن‌دار

PWA چیست؟

اپلیکیشن پیش‌رونده (PWA) ترکیبی از بهترین ویژگی‌های وب و موبایل است:

• نصب‌پذیر: افزودن به صفحه اصلی مانند اپ بومی
• نوتیفیکیشن: تعامل با کاربر حتی در حالت بسته بودن سایت
• پشتیبانی آفلاین: عملکرد بدون اینترنت
• سریع و پاسخ‌گو: تجربه روان حتی در شبکه‌های کند
• بدون نیاز به اپ‌استور: به‌روزرسانی آنی بدون تأیید

مرحله ۱: ساخت Web App Manifest

فایل app/manifest.ts را ایجاد کنید:

export default function manifest() {
  return {
    name: 'Next.js PWA',
    short_name: 'NextPWA',
    description: 'A Progressive Web App built with Next.js',
    start_url: '/',
    display: 'standalone',
    background_color: '#ffffff',
    theme_color: '#000000',
    icons: [
      { src: '/icon-192x192.png', sizes: '192x192', type: 'image/png' },
      { src: '/icon-512x512.png', sizes: '512x512', type: 'image/png' },
    ],
  }
}

آیکون‌ها را در پوشه public/ قرار دهید.

مرحله ۲: افزودن Push Notifications

در app/page.tsx یک کامپوننت کلاینتی بسازید که:

• Service Worker را ثبت می‌کند
• کاربر را subscribe/unsubscribe می‌کند
• نوتیفیکیشن تستی ارسال می‌کند

مرحله ۳: نمایش پیام نصب در iOS

با بررسی userAgent و display-mode، پیام نصب را فقط در iOS و زمانی که اپ نصب نشده نمایش دهید.

مرحله ۴: Server Actions

در app/actions.ts توابع زیر را پیاده‌سازی کنید:

• subscribeUser: ذخیره subscription
• unsubscribeUser: حذف subscription
• sendNotification: ارسال نوتیفیکیشن با web-push

مرحله ۵: تولید کلیدهای VAPID

npm install -g web-push
web-push generate-vapid-keys

کلیدها را در .env.local ذخیره کنید:

NEXT_PUBLIC_VAPID_PUBLIC_KEY=...
VAPID_PRIVATE_KEY=...

مرحله ۶: ساخت Service Worker

در public/sw.js دو listener اضافه کنید:

• push: نمایش نوتیفیکیشن
• notificationclick: باز کردن صفحه سایت

مرحله ۷: تنظیمات امنیتی

در next.config.js هدرهای امنیتی زیر را اضافه کنید:

• X-Content-Type-Options: nosniff
• X-Frame-Options: DENY
• Referrer-Policy: strict-origin-when-cross-origin
• Content-Security-Policy برای /sw.js

مرحله ۸: تست محلی

next dev --experimental-https

بررسی کنید:

• HTTPS فعال باشد
• نوتیفیکیشن‌ها مجاز باشند
• Service Worker ثبت شده باشد
• Manifest معتبر باشد (DevTools → Application)

اختیاری: پشتیبانی آفلاین با Serwist

npm install serwist

برای مثال کامل، به مستندات Serwist + Next.js مراجعه کنید.