🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: Vite و PWA: تبدیل وب‌سایت به اپلیکیشن پیشرو

موضوع کلی: برنامه نویسی

موضوع میانی: وایت (Vite)

📋 سرفصل‌های دوره (100 موضوع)

• 1. مقدمه: وب مدرن و نیاز به ابزارهای نوین
• 2. وایت (Vite) چیست و چرا باید از آن استفاده کنیم؟
• 3. مقایسه وایت با ابزارهای دیگر (Webpack, Rollup)
• 4. اپلیکیشن پیشرو (PWA) چیست؟
• 5. مزایای کلیدی PWA: قابلیت نصب، عملکرد آفلاین، تعامل‌پذیری
• 6. پیش‌نیازهای دوره و نصب ابزارهای لازم (Node.js, npm/yarn/pnpm)
• 7. راه‌اندازی اولین پروژه وایت با `create-vite`
• 8. ساختار یک پروژه استاندارد وایت
• 9. اجرای سرور توسعه (Development Server)
• 10. آشنایی با Hot Module Replacement (HMR) در وایت
• 11. فایل `vite.config.js`: مرکز فرماندهی پروژه
• 12. مدیریت وابستگی‌ها: تفاوت `dependencies` و `devDependencies`
• 13. کار با ماژول‌های ES (ES Modules) به صورت نیتیو
• 14. وارد کردن (Importing) انواع فایل‌ها: CSS, JSON, تصاویر
• 15. مدیریت فایل‌های استاتیک و پوشه `public`
• 16. پیش‌پردازنده‌های CSS: کار با Sass/SCSS
• 17. پیش‌پردازنده‌های CSS: کار با Less و Stylus
• 18. استفاده از PostCSS و افزونه‌هایی مانند Autoprefixer
• 19. CSS Modules: ایزوله کردن استایل‌ها
• 20. بهینه‌سازی وابستگی‌ها (Dependency Pre-Bundling) با esbuild
• 21. متغیرهای محیطی (Environment Variables) و حالت‌ها (Modes)
• 22. استفاده از فایل‌های `.env`
• 23. دستور `vite build`: فرآیند ساخت نسخه نهایی
• 24. گزینه‌های پیکربندی Build در وایت
• 25. Glob Imports: وارد کردن چندین ماژول به صورت پویا
• 26. Dynamic Imports و Code Splitting خودکار
• 27. کار با Web Workers در وایت
• 28. پیکربندی سرور توسعه: پورت، پراکسی و HTTPS
• 29. Server-Side Rendering (SSR) در وایت: یک نگاه کلی
• 30. سیستم پلاگین در وایت: گسترش قابلیت‌ها
• 31. یکپارچه‌سازی وایت با React
• 32. یکپارچه‌سازی وایت با Vue.js
• 33. یکپارچه‌سازی وایت با Svelte
• 34. آشنایی با قالب‌های آماده (Templates) رسمی و کامیونیتی
• 35. نکات خاص کار با TypeScript در پروژه‌های وایت
• 36. سه ستون اصلی PWA: قابلیت، اطمینان، قابلیت نصب
• 37. آشنایی با فایل مانیفست اپلیکیشن وب (Web App Manifest)
• 38. آشنایی با سرویس ورکر (Service Worker)
• 39. چرخه حیات سرویس ورکر: ثبت، نصب، فعال‌سازی
• 40. HTTPS: پیش‌نیاز امنیتی برای PWA
• 41. ابزارهای توسعه‌دهنده مرورگر برای PWA (Lighthouse, Application Tab)
• 42. استراتژی‌های طراحی Responsive برای PWA
• 43. مفهوم App Shell: ساختار پایه اپلیکیشن
• 44. ساخت و اتصال فایل `manifest.json` به پروژه
• 45. ویژگی‌های اصلی مانیفست: `name`, `short_name`, `description`
• 46. تعریف آیکون‌ها برای پلتفرم‌های مختلف
• 47. کنترل ظاهر اپلیکیشن: `display`, `orientation`, `theme_color`
• 48. تنظیم صفحه شروع و محدوده (Scope) اپلیکیشن
• 49. افزودن قابلیت "افزودن به صفحه اصلی" (Add to Home Screen)
• 50. اعتبار‌سنجی و اشکال‌زدایی فایل مانیفست
• 51. ثبت (Registering) یک سرویس ورکر
• 52. رویداد `install`: پیش‌کش کردن (Precaching) منابع اصلی
• 53. رویداد `activate`: مدیریت کش‌های قدیمی و پاک‌سازی
• 54. رویداد `fetch`: رهگیری درخواست‌های شبکه
• 55. استراتژی کش Cache-First
• 56. استراتژی کش Network-First
• 57. استراتژی کش Stale-While-Revalidate
• 58. استراتژی کش Cache-Only و Network-Only
• 59. پیاده‌سازی صفحه آفلاین سفارشی (Offline Fallback Page)
• 60. مدیریت کش‌ها با Cache Storage API
• 61. ارتباط بین کلاینت و سرویس ورکر با `postMessage`
• 62. به‌روزرسانی سرویس ورکر و مدیریت نسخه‌های جدید
• 63. اشکال‌زدایی سرویس ورکر در مرورگر
• 64. محدودیت‌ها و ملاحظات امنیتی سرویس ورکرها
• 65. کتابخانه‌های کمکی: معرفی Workbox
• 66. معرفی `vite-plugin-pwa`: ابزار قدرتمند PWA برای وایت
• 67. نصب و پیکربندی اولیه `vite-plugin-pwa`
• 68. تولید خودکار فایل مانیفست با پلاگین
• 69. استراتژی‌های تولید سرویس ورکر: `GenerateSW`
• 70. پیکربندی `GenerateSW` برای پیش‌کش کردن منابع
• 71. تعریف قوانین کش در زمان اجرا (Runtime Caching) با `GenerateSW`
• 72. استراتژی‌های تولید سرویس ورکر: `InjectManifest`
• 73. چه زمانی از `InjectManifest` به جای `GenerateSW` استفاده کنیم؟
• 74. نوشتن فایل سرویس ورکر سفارشی برای `InjectManifest`
• 75. یکپارچه‌سازی Workbox با سرویس ورکر سفارشی
• 76. مدیریت به‌روزرسانی‌های PWA و نمایش اعلان به کاربر
• 77. پیاده‌سازی Prompt سفارشی برای نصب اپلیکیشن
• 78. حالت توسعه (Development) در مقابل حالت تولید (Production)
• 79. اشکال‌زدایی PWA ساخته‌شده با وایت
• 80. پیکربندی پیشرفته پلاگین: آیکون‌ها، زبان و ...
• 81. Push Notifications: مقدمه و جریان کار
• 82. دریافت مجوز اعلان از کاربر (Push API)
• 83. نمایش اعلان از طریق سرویس ورکر (Notifications API)
• 84. Background Sync: همگام‌سازی داده‌ها در پس‌زمینه
• 85. Periodic Background Sync: همگام‌سازی دوره‌ای
• 86. Web Share API: به اشتراک‌گذاری محتوا به صورت نیتیو
• 87. App Badging API: نمایش اعلان روی آیکون اپلیکیشن
• 88. App Shortcuts: تعریف میان‌برهای سریع برای اپلیکیشن
• 89. File Handling API: ثبت PWA به عنوان بازکننده فایل
• 90. تست عملکرد PWA با Google Lighthouse
• 91. استراتژی‌های تست واحد (Unit Testing) برای منطق سرویس ورکر
• 92. بهترین شیوه‌های استقرار یک PWA
• 93. پیکربندی هدرهای HTTP برای کش و امنیت
• 94. استقرار PWA بر روی پلتفرم‌هایی مانند Netlify یا Vercel
• 95. یکپارچه‌سازی با CI/CD برای ساخت و استقرار خودکار
• 96. بهینه‌سازی عملکرد (Performance) در PWA
• 97. ملاحظات امنیتی پیشرفته برای PWA
• 98. آینده PWA و قابلیت‌های جدید (Project Fugu)
• 99. جمع‌بندی دوره و مرور پروژه‌ نهایی
• 100. منابع بیشتر برای یادگیری و مشارکت در جامعه PWA

Vite و PWA: تبدیل وب‌سایت به اپلیکیشن پیشرو | جهشی بزرگ در توسعه وب!