آموزش معرفی وب اپلیکیشن های PWA یکی دیگر از آموزش های گروه آموزشی پرووید می باشد که در این قسمت آن را به شما معرفی می کنیم. این بسته آموزشی نیز یکی از دوره های آموزشی دیگر که در حوزه فارسی سازی آموزش های انگلیسی تنظیم شده است می باشد. عنوان این بسته آموزشی، مباحث اولیه در ساختن اپلیکیشن های PWA است که با نام اصلی Progressive Web Apps – The Big Picture از شرکت Pluralsight منتشر شده است.

مقایسه وب اپلیکیشن های PWA و اپلیکیشن های Native

وب اپلیکیشن های PWA نسبت به اپلیکیشن های native معمولی در چندین جنبه کلیدی تقاوت دارند. برخلاف اپلیکیشن های native معمولی که معمولاً از طریق app store پخش می‌شوند، وب اپلیکیشن های PWA می‌توانند مستقیماً از طریق مرورگرهای وب مورد دسترسی قرار بگیرند این موضوع نیاز به دانلود و نصب این نوع از اپلیکیشن ها را توسط کاربران را از بین می‌برد. وب اپلیکیشن های PWA فرآیند نصب را با امکان پذیر کردن نصب شدن برنامه با چند کلیک به صفحه اصلی دستگاه ساده‌تر می‌کنند و تجربه کاربری سریعتر و مستقیم‌تری را فراهم می نمایند. یک تفاوت قابل توجه دیگر، قابلیت آفلاین وب اپلیکیشن های PWAاست که از طریق service worker ها که منابع را کش می‌کنند، امکان پذیر می‌شود. این قابلیت مهم این امکان را فراهم می‌کند که وب اپلیکیشن های PWAحتی در شرایط ضعیف شکبه و یا عدم وجود اتصال به اینترنت نیز به کار خود ادامه دهند و تجربه کاربری مقاومتری را فراهم کنند. به علاوه، وب اپلیکیشن های PWA در طراحی responsive هستند که این خود باعث یک تجربه کاربری یکنواخت تر و بهینه تر در دستگاه‌ها و اندازه‌های مختلف صفحه های نمایش می‌ شود. در حالی که برنامه‌های سنتی اغلب نیازمند codebase های جداگانه برای پلتفرم‌های مختلف هستند، وب اپلیکیشن های PWA در ذات خود چندپلتفرمی بودن را دارند و به توسعه‌دهندگان این امکان را می‌دهند که یک codebase تک را ایجاد کنند و سپس به سادگی بر روی دستگاه‌ها و سیستم‌عامل‌های مختلف استفاده نمایند. این تفاوت‌ها وب اپلیکیشن های PWA را به یک جایگزین مدرن، دسترسی‌پذیرتر، کاربرپسندتر و انعطاف‌پذیرتر و همه منظوره برای برنامه‌های سنتی تبدیل کرده است.

چگونه با زبان جاوا اسکریپت اپلیکیشن های PWA بسازیم؟

ایجاد وب اپلیکیشن های PWA با استفاده از جاوااسکریپت شامل پیاده‌سازی مجموعه‌ای از فناوری‌ها و بهترین رویکردها می‌شود. در ابتدا و به عنوان اولین مرحله، باید اطمینان حاصل کرد که برنامه وب مورد نظر با یک طراحی واکنش‌پذیر و responsive ساخته شده باشد تا با انواع مختلف دستگاه‌ها سازگار باشد. سپس بایستی یک service worker را پیاده سازی کرد. یک service worker در واقع یک فایل جاوااسکریپت است که به عنوان یک پروکسی بین مرورگر و شبکه عمل می‌کند و امکاناتی از قبیل کار کردن آفلاین و کش کردن منابع را فراهم می کند. سپس بایستی از مانیفست برنامه وب (Web App Manifest) استفاده کرد. این مانیفست در واقع یک فایل JSON است و شامل متادیتاهایی در مورد وب اپلیکیشن PWA شما می باشد. این متادیتاها شامل مواردی از قبیل آیکون‌ها، نام و توضیحات می باشد. این فایل مانیفست برای فراهم کردن امکان نصب برنامه بر روی صفحه اصلی دستگاه‌های کاربران بسیار حائز اهمیت است. ضمناً، از پروتکل HTTPS برای اطمینان از ارتباط امن و پیاده سازی ملزومات PWA ها استفاده کنید، زیرا بسیاری از ویژگی‌های PWA ها مانند service worker ها، تنها در ارتباطات امن در دسترس هستند. علاوه بر این، عملکرد برنامه را با کمینه ‌سازی زمان بارگذاری اولیه برنامه، استفاده از بارگذاری تنبل وارانه و بهینه‌سازی تصاویر بهینه‌سازی کنید. از Cache API برای مدیریت کارآمد منابع کش‌ شده و اطمینان از یک تجربه کاربری آفلاین بدون مشکل استفاده کنید. در قدم های بعدی بایستی push notification ها را پیاده‌سازی کنید تا با کاربران در زمانی که برنامه فعال نیست، در تعامل باشید. در نهایت، برنامه‌ی PWA خود را در مرورگرها و دستگاه‌های مختلف تست کنید تا تجربه یکنواخت و قابل اعتمادی برای کاربران فراهم شود. با ترکیب این عناصر و رعایت اصول PWA، می‌توانید یک برنامه وب با عملکردی بهبودیافته، امکانات کار کردن آفلاین و تجربه نصب کاربرپسند را ایجاد کنید.

سرفصل مطالب آموزش ویدئویی آموزش ویدئویی معرفی وب اپلیکیشن های PWA

فصل اول: مرور دوره

• معرفی دوره آموزشی

فصل دوم: شروع به کار با Progressive Web App ها

• مقدمه
• سلام بر دنیای PWA ها
• ویژگی‌های PWAها
• بررسی عملی برنامه‌های PWA
• چه موقع از PWA ها استفاده کنیم؟
• جمع بندی

فصل سوم: ایجاد تجربه برنامه برای موبایل و دسکتاپ

• مقدمه
• بررسی معیارهای PWA
• بررسی تجربه برنامه و یا App Experience
• کار کردن با صفحات در یک PWA
• بررسی پیشرفت تدریجی و یا Progressive Enhancement
• آیکون
• توانمندی‌ها
• محدودیت‌ها
• جمع بندی

فصل چهارم: برنامه‌نویسی PWA با ابزارهای وب

• مقدمه
• معرفی Service Worker ها
• کش کردن و سرو کردن منابع در PWA
• افزودن Service Worker به یک پروژه وب
• ساختن PWA ها با Angular
• ساختن PWA ها با React
• حضور PWA ها
• جمع بندی

فصل پنجم: توزیع برنامه به کاربران شما

• مقدمه
• بررسی Distribution Model ها
• نصب کردن از طریق مرورگرها
• ایجاد کردن App Launcher ها
• بررسی مدل Enterprise Distribution
• توزیع از طریق App Store ها
• جمع بندی

فصل ششم: مسیر پیش روی ما برای ساختن PWA ها

• مقدمه
• سوالاتی که باید پاسخ داد
• گونه یک پروژه را شروع کنیم
• جمع بندی