آموزش Angular: ساخت اپلیکیشن‌های وب پیشرونده (PWA) - آخرین آپدیت

مقدمه Introduction

• ساخت یک اپلیکیشن وب پیشرونده با انگولار Build a progressive web app with Angular

• پیش‌نیازها و آنچه باید بدانید What you should know

• راهنمای استفاده از فایل‌های تمرینی Using the exercise files

1. اپلیکیشن‌های وب پیشرونده (PWA) 1. Progressive Web Apps

• دموی اجرا در ویندوز و macOS Windows and macOS demo

• معماری پیشرونده Progressive architecture

• دموی اجرا در اندروید، iOS و iPadOS Android, iOS, and iPadOS demo

• وضعیت PWAها در دنیای امروز PWAs today

• اپلیکیشن وب پیشرونده چیست؟ What is a progressive web app?

2. آماده‌سازی اپلیکیشن انگولار 2. Preparing the Angular App

• اجرای اپلیکیشن Running the app

• ساخت سرویس‌ها: مکان‌یابی و نقشه‌ها Creating services: Geolocation and maps

• مرور تکنولوژی‌های مورد استفاده Technology review

• راه‌اندازی پروژه پایه Setting up the basic project

• ساخت سرویس‌ها: مدیریت داده‌ها Creating services: Data

• ایجاد کلاس‌های منطق کسب‌وکار (Business Logic) Creating the business logic classes

3. طراحی رابط کاربری (UI) 3. Creating the User Interface

• افزودن مکان‌های جغرافیایی Adding place location

• ساخت کامپوننت‌ها: بخش قهوه Creating components: Coffee

• استفاده از Angular Material Using Angular material

• استایل‌دهی به کامپوننت قهوه Styling coffee component

• ساخت کامپوننت‌های صفحه Creating the page components

• ساخت کامپوننت‌ها: لیست Creating components: List

• افزودن سیستم امتیازدهی قهوه Adding coffee ratings

• افزودن مسیرها (Routes) به پروژه Adding routes to the project

4. اتصال به وب‌سرویس‌ها 4. Connecting to Web Services

• ویرایش اطلاعات یک آیتم قهوه Editing a coffee entry

• اتصال اکشن‌های موبایلی Connecting mobile actions

• اتصال فرم به سرویس Connecting the form with the service

• اتصال انگولار به ماژول HTTP Connecting Angular with http module

• ساخت یک RESTful API Creating a RESTful API

5. ساخت یک PWA قابل نصب 5. Creating an Installable PWA

• ساخت عنوان پویا و نوار وضعیت (Status Bar) Making a dynamic title and status bar

• ایجاد میان‌برهای اپلیکیشن (App Shortcuts) Creating app shorcuts

• استفاده از حالت نمایش رابط کاربری مینیمال Using minimal-UI display mode

• تعریف آیکون‌ها و Maskable Icons Defining icons and maskable icons

• دعوت از کاربر برای نصب اپلیکیشن Inviting the user to install the app

• بهبود تجربه کاربری اپلیکیشن Enhancing the app experience

• بررسی Web App Manifest The Web App Manifest

6. مدیریت حالت آفلاین با سرویس ورکرها 6. Going offline with service workers

• ارائه خدمات اپلیکیشن در حالت آفلاین Serving the app while offline

• پشتیبانی از به‌روزرسانی‌های اپلیکیشن Supporting app updates

• سفارشی‌سازی ngsw manifest Customizing ngsw-manifest

• سرویس ورکر (Service Worker) چیست؟ What is a service worker?

• افزودن اعلان‌های Push وب Adding web push notifications

• به‌روزرسانی UI بر اساس تغییر وضعیت شبکه Update UI on network status change

• اعتبارسنجی با استفاده از DevTools Validating with DevTools

جمع‌بندی Conclusion

• ادامه مسیر یادگیری اپلیکیشن‌های وب پیشرونده Continue learning progressive web apps