راهنمای سریع PWA: برنامه React خود را قابل نصب کنید

Summarize this content to 400 words in Persian Lang
آیا می خواهید برنامه وب خود را شبیه به یک برنامه تلفن همراه واقعی کنید؟ PWA (برنامه وب پیشرو) پاسخ است!

پیش نیازها 📋

این راهنما برای برنامه های React ساخته شده با Vite است. برخی از فریم ورک‌ها مانند Next.js و Gatsby دارای پشتیبانی داخلی PWA هستند، بنابراین بهترین گزینه را برای پروژه خود انتخاب کنید.

آنچه خواهید ساخت 🧑‍💻

پس از دنبال کردن این راهنما، برنامه React شما:

قابل نصب بر روی هر دستگاهی باشد
بدون اینترنت کار کنید
شبیه یک برنامه بومی به نظر برسید و احساس کنید

یادداشت های پشتیبانی مرورگر

Chrome/Edge/Firefox: پشتیبانی کامل از PWA
سافاری: پشتیبانی محدود PWA

بیایید شروع کنیم!

مرحله 1. یک پروژه React جدید ایجاد کنید

npm create vite@latest my-pwa-app
cd my-pwa-app
npm install

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

**اگر قبلاً برنامه خود را دارید، از این مرحله رد شوید.

مرحله 2. بسته PWA را نصب کنید

npm install vite-plugin-pwa -D

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

💡 vite-plugin-pwa افزونه به صورت داخلی مدیریت می کند:

مانیفست برنامه وب – نحوه نمایش و رفتار برنامه شما را مشخص می کند
Service Worker – باعث می شود برنامه شما به صورت آفلاین کار کند

مرحله 3. PWA را پیکربندی کنید

به روز رسانی vite.config.js:

import { defineConfig } from ‘vite’
import react from ‘@vitejs/plugin-react’
import { VitePWA } from ‘vite-plugin-pwa’

const manifestIcons = [
{
src: ‘pwa-192.png’,
sizes: ‘192×192’,
type: ‘image/png’,
},
{
src: ‘pwa-512.png’,
sizes: ‘512×512’,
type: ‘image/png’,
}
]

export default defineConfig({
plugins: [
react(),
VitePWA({
registerType: ‘autoUpdate’,
manifest: {
name: ‘My Awesome App’,
short_name: ‘PWA App’,
icons: manifestIcons,
}
})
] })

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 4. نمادهای برنامه را اضافه کنید

دو آیکون ایجاد کنید و آنها را در خود قرار دهید public پوشه:

192×192 پیکسل (نامش را بگذارید pwa-192.png)
512×512 پیکسل (نامش را بگذارید pwa-512.png)

برای ایجاد نمادها به کمک نیاز دارید؟ Favicon.io یا PWA Asset Generator را امتحان کنید.

مرحله 5. PWA خود را تست کنید

# Development mode
npm run dev # http://localhost:5173

# Production mode
npm run build
npm run preview # http://localhost:4173

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

💡حالت تولید برای تست ویژگی های کامل PWA توصیه می شود.

چک لیست تست

بررسی نصب:

در کروم باز کنید
به دنبال نماد نصب در نوار آدرس بگردید
Chrome DevTools را باز کنید (F12) ← برگه برنامه ← کارگران خدمات برای تایید ثبت نام

تست حالت آفلاین:

برنامه را نصب کنید
در تب ابزارهای برنامه‌نویس Chrome → Network، «آفلاین» را علامت بزنید.
برنامه هنوز باید کار کند!

عیب یابی

آیکون نصب ندارید؟ – از ساخت تولید استفاده کنید
تغییرات نشان داده نمی شود؟ – کش مرورگر را پاک کنید
مسیرهای نماد را در پوشه عمومی دوبار بررسی کنید

مراحل بعدی 🐾

این تازه شروع است – کارهای بسیار بیشتری می توانید با PWA انجام دهید. کاوش:

اعلان های فشاری
همگام سازی داده های آفلاین
درخواست نصب سفارشی

منابع:

همین! اکنون می دانید که چگونه یک برنامه وب پیشرفته (PWA) ایجاد کنید 🥳

کد نویسی مبارک ❤️

npm create vite@latest my-pwa-app
cd my-pwa-app
npm install

npm install vite-plugin-pwa -D

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'

const manifestIcons = [
  {
    src: 'pwa-192.png',
    sizes: '192x192',
    type: 'image/png',
  },
  {
    src: 'pwa-512.png',
    sizes: '512x512',
    type: 'image/png',
  }
]

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My Awesome App',
        short_name: 'PWA App',
        icons: manifestIcons,
      }
    })
  ]
})

# Development mode
npm run dev         # http://localhost:5173

# Production mode
npm run build
npm run preview     # http://localhost:4173