رفتن به محتوای اصلی
مستندات نجوا

پیاده‌سازی پوش در PWA

وب‌سایت خود را به یک Progressive Web App قابل‌نصب تبدیل کنید تا پوش نوتیفیکیشن روی iOS هم کار کند.

روی iOS، پوش نوتیفیکیشن مرورگر فقط برای وب‌سایت‌هایی کار می‌کند که به‌صورت PWA (Progressive Web App) روی صفحهٔ اصلی گوشی نصب شده باشند. این راهنما حداقل تنظیماتی را نشان می‌دهد که برای قابل‌نصب شدن وب‌سایت لازم است.

منبع این راهنما

این محتوا از صفحهٔ عمومی مستندات فنی وب‌سرویس‌های نجوا منتقل شده و برای پروژه‌های Next.js نوشته شده است. اگر از فریم‌ورک دیگری استفاده می‌کنید، مفاهیم (manifest، متادیتا، سرویس ورکر) همان‌هاست؛ فقط محل قرار دادن فایل‌ها فرق می‌کند.

۱. الزامات اولیه

برای این‌که وب‌سایت شما قابلیت نصب به‌عنوان PWA را داشته باشد، سه شرط باید برقرار باشد:

  • وب‌سایت باید تحت پروتکل HTTPS اجرا شود.
  • فایل manifest.json باید در دسترس مرورگر قرار گیرد.
  • متادیتای مناسب در سند HTML قرار داده شوند.

۲. ساخت فایل manifest.json

فایل manifest.json باید در مسیر عمومی (public) پروژه قرار بگیرد و حاوی اطلاعات پایهٔ برنامه باشد:

{
  "name": "عنوان کامل برنامه",
  "short_name": "عنوان کوتاه",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4f4691",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
آیکون‌ها را در اندازهٔ استاندارد بگذارید

تصاویر آیکون باید در مسیر public/icons قرار داشته باشند و دقیقاً در ابعاد اعلام‌شده (۱۹۲×۱۹۲ و ۵۱۲×۵۱۲ پیکسل) باشند؛ در غیر این صورت بعضی مرورگرها آیکون برنامه را نشان نمی‌دهند.

۳. درج پیوند مانیفست در HTML

در پروژه‌های Next.js، فایل pages/_document.tsx (یا _document.js) باید به‌گونه‌ای اصلاح شود که فایل مانیفست و سایر متادیتاهای مرتبط درج شوند:

import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
  return (
    <Html lang="fa">
      <Head>
        <link rel="manifest" href="/manifest.json" />
        <meta name="theme-color" content="#4f4691" />
        <link rel="apple-touch-icon" href="/icons/icon-192.png" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

۴. پیکربندی افزونهٔ next-pwa

برای ساده‌سازی روند (ثبت خودکار سرویس ورکر و کش کردن دارایی‌ها)، استفاده از بستهٔ next-pwa توصیه می‌شود. این بسته قابلیت‌های PWA را با حداقل پیکربندی به پروژه اضافه می‌کند.

گام بعدی

پس از نصب‌پذیر شدن وب‌سایت روی iOS، برای دریافت توکن کاربران و ارسال پوش به دریافت توکن کاربر بروید.