کتاب Vite و PWA: تبدیل وبسایت به اپلیکیشن پیشرو با فرمت AZW3 برای کتابخوان کیندل و فرمت EPUB
Vite و PWA: تبدیل وبسایت به اپلیکیشن پیشرو | جهشی بزرگ در توسعه وب! Vite و PWA: تبدیل وبسایت به اپلیکیشن پیشرو | جهشی بزرگ در توسعه وب! معرفی دوره آیا میخواهید وبسایتهای خود را به اپلیکیشنهای سر...
🎓 دوره آموزشی جامع
📚 اطلاعات دوره
عنوان دوره: دوره Vite و PWA: تبدیل وبسایت به اپلیکیشن پیشرو
موضوع کلی: برنامه نویسی
موضوع میانی: وایت (Vite)
📋 سرفصلهای دوره
- 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
تگها:
App Development
Build Tools
Faster Websites
Front-End Development
JavaScript
Modern Web
performance optimization
Progressive Web App
PWA
SEO
Vite
ViteJS
Web Development
برنامه نویسی
وب اپلیکیشن
نظرات
هنوز نظری ثبت نشده است.
وارد شوید تا نظر ثبت کنید.