آموزش جامع Angular Progressive Web Apps (PWA) و کتاب الکترونیکی رایگان - آخرین آپدیت

دانلود Angular Progressive Web Apps (PWA) MasterClass & FREE E-Book

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:

راهنمای عملی برنامه‌های وب پیش‌رونده Angular (PWA)

کد در مخزن گیت‌هاب با فایل‌های ZIP قابل دانلود برای هر بخش

یادگیری جزئیات چندین ویژگی که توسط Angular Service Worker ارائه می‌شود

یادگیری نحوه تبدیل برنامه Angular خود به PWA

قابلیت دانلود و نصب برنامه Angular خود

قابلیت نصب یک کلیکی برنامه Angular شما با App Manifest

افزودن Application Shell برای بهبود عملکرد راه‌اندازی اولیه

افزودن Push Notifications با استفاده از Angular Service Worker

بهبود عملکرد برنامه با Caching داده‌های برنامه

یادگیری اصول اولیه Service Worker

یادگیری چرخه عمر Service Worker به طور کامل

اشکال‌زدایی Service Worker با استفاده از Chrome Dev Tools

پیش‌نیازها: صرفاً دانش قبلی از Angular و Typescript

این دوره به طور خلاصه - بخش ۱: Angular Service Worker (شامل کتاب الکترونیکی Typescript Jumpstart)

در بخش اول دوره، مستقیماً به Angular Service Worker و پشتیبانی داخلی PWA در Angular CLI خواهیم پرداخت. ما یک برنامه Angular ساده را به عنوان نقطه شروع در نظر می‌گیریم و با افزودن ویژگی‌های PWA به آن، آن را به یک برنامه وب پیش‌رونده تبدیل خواهیم کرد.

با افزودن Angular Service Worker، ویژگی دانلود و نصب برنامه را راه‌اندازی خواهیم کرد. در مورد مدیریت نسخه برنامه صحبت خواهیم کرد و استراتژی‌های مختلف Caching موجود برای Caching نه تنها بسته‌های برنامه، بلکه داده‌های برنامه را نیز یاد خواهیم گرفت.

سپس با استفاده از Angular CLI و Angular Universal، یک Application Shell اضافه می‌کنیم و با استفاده از App Manifest، برنامه را به صورت یک کلیکی قابل نصب می‌کنیم. در نهایت، برای تجربه کامل شبیه به اپلیکیشن موبایل PWA، Push Notifications را با استفاده از Angular Service Worker به برنامه اضافه خواهیم کرد.

این دوره به طور خلاصه - بخش ۲: مبانی Service Worker

در این بخش دوم، در مورد برنامه‌های وب پیش‌رونده به طور کلی (شامل Service Workers، App Manifest و Cache Storage API) یاد خواهید گرفت و از این APIها برای پیاده‌سازی چندین ویژگی شبیه به برنامه‌های نیتیو استفاده خواهید کرد: نصب با یک کلیک، پشتیبانی آفلاین، دانلود و نصب برنامه، Caching داده‌های برنامه و موارد دیگر.

همچنین مبانی وب Service Worker را از اصول اولیه با استفاده مستقیم از APIهای مرورگر یاد خواهیم گرفت و در هر مرحله با استفاده از ابزارهای داخلی Chrome Dev Tools برای PWA، درک خود را تأیید خواهیم کرد.

دانش آموخته شده در این بخش ماندگاری طولانی دارد، زیرا مربوط به مبانی مرورگر و نحوه کار وب PWA جدید به طور کلی است، بنابراین همه چیزهایی که در اینجا یاد گرفته می‌شود، همچنان برای هر پلتفرم توسعه دیگری غیر از Angular نیز قابل استفاده است.

چرا PWA؟ آینده وب را همین امروز بسازید

آینده وب به وضوح در یک جهت پیش می‌رود: برنامه‌های وب پیش‌رونده! با پشتیبانی آتی Safari و قابلیت نصب مستقیم PWA در دسکتاپ ویندوز، PWAها نسل جدیدی از برنامه‌های وب هستند که شکاف بین برنامه‌های نیتیو را پر می‌کنند: این امر حتی در آینده نزدیک شامل مواردی مانند بلوتوث و پرداخت نیز خواهد شد.

PWAها ظاهری شبیه به برنامه‌های نیتیو دارند، اما هیچ App Store و مشکلات مربوط به آن وجود ندارد: در عوض، یک برنامه وب اکنون می‌تواند با یک کلیک مستقیم به دسکتاپ یا صفحه اصلی کاربر نصب شود!

برنامه بلافاصله در پس‌زمینه خود را نصب می‌کند، بنابراین مگر اینکه نسخه جدیدی موجود باشد، نیازی به دانلود مجدد آن نیست.

برنامه با سرعتی چشمگیر اجرا می‌شود که تا به امروز فقط برنامه‌های نیتیو قادر به انجام آن بودند: PWA قابلیت همگام‌سازی پس‌زمینه و اعلان را دارد و به صورت آفلاین کار می‌کند.

PWAها مختص موبایل نیستند: هر برنامه‌ای می‌تواند از راه‌اندازی سریع‌تر بهره‌مند شود! پشتیبانی PWA Angular CLI و Angular Service Worker، ویژگی‌های PWA را به سطح دیگری می‌برد: ما قادر خواهیم بود به طور قابل اعتماد ویژگی‌های PWA را به برنامه خود به شیوه‌ای شفاف از طریق Angular CLI، به عنوان بخشی از فرآیند ساخت نسخه تولید، اضافه کنیم.

اما همچنان برای درک نحوه کارکرد ویژگی‌های PWA از درون، برای رفع هرگونه مشکل، تعامل با Angular Service Worker یا پیکربندی Angular CLI، به درک این موضوع نیاز خواهیم داشت.

مرور کلی دوره

در بخش اول، ویژگی‌های PWA را یکی یکی بررسی خواهیم کرد. این ویژگی‌ها برای استفاده مشترک طراحی شده‌اند، بنابراین استفاده از آن‌ها برای پیاده‌سازی یک مورد استفاده مشخص، بهترین راه برای یادگیری آن‌هاست. جزء اصلی یک PWA Service Worker است، بنابراین این نقطه شروع ماست.

ما تمام جزئیات چرخه عمر Service Worker، نحوه مدیریت نسخه‌های مختلف Service Worker توسط مرورگر را یاد خواهیم گرفت و درباره خطاهای نصب و فعال‌سازی Service Worker اطلاعات کسب خواهیم کرد. سپس یک Service Worker خواهیم ساخت که به برنامه قابلیت نمایش یک صفحه آفلاین هنگام قطع بودن شبکه را با استفاده از Cache API می‌دهد.

بیشتر APIهای PWA مبتنی بر Promise هستند، بنابراین برای خواناتر شدن کد، در مثال‌های خود از Async / Await استفاده خواهیم کرد. سپس پیاده‌سازی دانلود و نصب برنامه را انجام خواهیم داد: خواهیم دید که چگونه می‌توانیم از Service Worker برای دانلود کامل یک نسخه از وب‌سایت در موبایل یا دسکتاپ کاربر استفاده کنیم و چگونه نسخه‌های مختلف برنامه را نصب کنیم.

ما مزایای عملکردی Caching کامل برنامه به صورت محلی را با شبیه‌سازی شبکه کند، نمایش خواهیم داد و یاد خواهیم گرفت که چگونه نسخه‌های قبلی برنامه را پاک کنیم. همچنین یاد خواهیم گرفت که چگونه داده‌های UI-خاص و داده‌های View Model مشتق شده را در سمت کلاینت با استفاده از Indexed DB و Service Worker Caching کنیم و همچنین چگونه Background Sync را پیاده‌سازی کنیم.

بخش بعدی دوره به App Manifest و نحوه پیکربندی تجربه نصب یک کلیکی که به دنبال آن هستیم، اختصاص داده خواهد شد. پس از آن، برنامه خود را با ابزار Lighthouse بررسی کرده و گزارش تولید شده را تجزیه و تحلیل خواهیم کرد.

آخرین بخش از این بخش مبانی PWA به Web Push و Notifications اختصاص دارد. در این بخش، یک سرور Node با قابلیت Web Push راه‌اندازی خواهیم کرد و سپس آن را به Service Worker خود متصل می‌کنیم تا Notifications شبیه به موبایل را پیاده‌سازی کنیم.

در این دوره چه چیزی یاد خواهید گرفت؟

نحوه کارکرد ویژگی‌های مرورگر PWA به طور کلی، نه فقط در زمینه یک برنامه Angular را یاد خواهید گرفت. نحوه تجزیه و تحلیل و رفع اشکال PWAها با استفاده از Chrome PWA Dev Tools را خواهید دانست. همچنین نحوه استفاده از Angular Service Worker و تمام ویژگی‌های PWA Angular CLI را برای ساخت برنامه‌های وب مجهز به PWA یاد خواهید گرفت.

در پایان این دوره قادر به انجام چه کارهایی خواهید بود؟

قادر به طراحی، توسعه و رفع اشکال PWAها خواهید بود و همچنین یاد خواهید گرفت که چگونه به سرعت ویژگی‌های PWA را به یک برنامه Angular با استفاده از Angular CLI و Angular Service Worker اضافه کنید.

دروس رایگان دوره را در زیر مشاهده کنید و از دوره لذت ببرید!


سرفصل ها و درس ها

کارگر خدمات زاویه ای Angular Service Worker

  • نمای کلی دوره برنامه‌های پیشرونده وب Angular Angular Progressive Web Apps Course Helicopter View

  • نسخه‌های نرم‌افزار پیشنهادی Recommended Software Versions

  • کتاب الکترونیکی Jumpstart TypeScript The Typescript Jumpstart Ebook

  • شروع دوره – نصب Node، NPM، IDE و کد بخش Service Workers Course Kick-Off - Install Node, NPM, IDE And Service Workers Section Code

  • نحوه تبدیل یک برنامه Angular به PWA How To Convert an Angular Application Into a PWA

  • نحوه تبدیل یک برنامه زاویه ای به PWA How To Convert an Angular Application Into a PWA

  • نحوه اجرای سرویس ورکر Angular در حالت Production How To Run The Angular Service Worker In Production Mode

  • نحوه اجرای Angular Service Worker در حالت تولید How To Run The Angular Service Worker In Production Mode

  • سرویس ورکر Angular – چگونه کار می‌کند؟ Angular Service Worker - How Does it Work?

  • مدیریت نسخه سرویس ورکر – چگونه کار می‌کند؟ Service Worker Version Management - How Does it Work?

  • مدیریت نسخه Service Worker - چگونه کار می کند؟ Service Worker Version Management - How Does it Work?

  • سوئیچ قطع سرویس ورکر Angular The Angular Service Worker Kill Switch

  • سیاست کش عملکرد – ابتدا کش، سپس شبکه Performance Caching Policy - Cache First, Network Last

  • سیاست کش تازگی – ابتدا شبکه، سپس کش Freshness Caching Policy - Network First, Cache Last

  • سیاست ذخیره سازی تازه - شبکه اول، آخرین کش Freshness Caching Policy - Network First, Cache Last

سرویس ورکر Angular Angular Service Worker

  • نمای هلیکوپتر دوره برنامه های وب پیشرو زاویه ای Angular Progressive Web Apps Course Helicopter View

  • نسخه های نرم افزاری پیشنهادی Recommended Software Versions

  • تایپ اسکریپت Jumpstart کتاب الکترونیکی The Typescript Jumpstart Ebook

  • شروع دوره - کد بخش Node، NPM، IDE و Service Workers را نصب کنید Course Kick-Off - Install Node, NPM, IDE And Service Workers Section Code

  • Angular Service Worker - چگونه کار می کند؟ Angular Service Worker - How Does it Work?

  • سوئیچ کشنده سرویس انگولار The Angular Service Worker Kill Switch

  • سیاست ذخیره سازی عملکرد - ابتدا حافظه پنهان، آخرین شبکه Performance Caching Policy - Cache First, Network Last

App Manifest - افزودن برنامه به صفحه اصلی App Manifest - Add Application To Home Screen

  • Manifest برنامه – قابل نصب با یک کلیک کردن PWA App Manifest - Making a PWA One-Click Installable

Manifest برنامه – افزودن برنامه به صفحه اصلی App Manifest - Add Application To Home Screen

  • App Manifest - ساختن PWA با یک کلیک قابل نصب App Manifest - Making a PWA One-Click Installable

پوسته کاربردی Angular The Angular Application Shell

  • Shell برنامه چیست، چه مشکلی را حل می‌کند؟ What is an Application Shell, What Problem Does it Solve?

  • آشنایی با رابطه بین App Shell و Angular Universal Learn the Relation Between the App Shell and Angular Universal

  • یادگیری نحوه رندر شدن App Shell با استفاده از Angular Router Learn How the App Shell is Rendered Using the Angular Router

  • نحوه رندر شدن App Shell با استفاده از روتر Angular را بیاموزید Learn How the App Shell is Rendered Using the Angular Router

  • App Shell در عمل – مشاهده مزایای عملکرد The App Shell In Action - View Performance Benefits

  • پوسته برنامه در عمل - مزایای عملکرد را مشاهده کنید The App Shell In Action - View Performance Benefits

Shell برنامه Angular The Angular Application Shell

  • Application Shell چیست، چه مشکلی را حل می کند؟ What is an Application Shell, What Problem Does it Solve?

  • ارتباط بین App Shell و Angular Universal را بیاموزید Learn the Relation Between the App Shell and Angular Universal

Push Notifications Push Notifications

  • شروع بخش جدید – نوتیفیکیشن‌های Push New Section Kickoff - Push Notifications

  • شناسایی سرور – تولید کلید VAPID با کتابخانه web-push Server Identification - Generating a VAPID key with the web-push library

  • شناسایی سرور - ایجاد یک کلید VAPID با کتابخانه web-push Server Identification - Generating a VAPID key with the web-push library

  • کلید عمومی VAPID و کلید خصوصی - تفاوت ها را بیاموزید VAPID Public Key and Private Key - Learn the Differences

  • کلید عمومی و کلید خصوصی VAPID – آشنایی با تفاوت‌ها VAPID Public Key and Private Key - Learn the Differences

  • نوتیفیکیشن‌های Push چگونه کار می‌کنند؟ ارائه‌دهندگان سرویس Push مخصوص مرورگر How do Push Notifications Work? Browser-specific Push Service Providers

  • درخواست نوتیفیکیشن Push – تکمیل پیاده‌سازی Push Notifications Request - Implementation Completed

  • نحوه نمایش مجدد پاپ‌آپ Allow یا Deny Notifications How To Display The Allow or Deny Notifications Popup Again

  • نحوه نمایش مجدد بازشو Allow or Deny Notifications How To Display The Allow or Deny Notifications Popup Again

  • نوتیفیکیشن Push در Node – پیاده‌سازی سرور با web-push Push Notification in Node - Server Implementation With web-push

  • مشاهده نوتیفیکیشن‌های Web Push در عمل View Web Push Notifications In Action

  • مشاهده اعلان‌های فشار وب در عمل View Web Push Notifications In Action

نوتیفیکیشن‌های Push Push Notifications

  • بخش جدید شروع - اعلان‌های فشاری New Section Kickoff - Push Notifications

  • Push Notifications چگونه کار می کند؟ ارائه دهندگان سرویس فشار خاص مرورگر How do Push Notifications Work? Browser-specific Push Service Providers

  • درخواست Push Notifications - پیاده سازی تکمیل شد Push Notifications Request - Implementation Completed

  • Push Notification در Node - پیاده سازی سرور با web-push Push Notification in Node - Server Implementation With web-push

اصول کارگر خدماتی Service Worker Fundamentals

  • سرویس ورکرها به طور خلاصه – ثبت نام سرویس ورکر Service Workers In a Nutshell - Service Worker Registration

  • سرویس ورکرها Hello World – چرخه حیات بخش ۱ و ابزارهای توسعه Chrome برای PWA Service Workers Hello World - Lifecycle Part 1 and PWA Chrome Dev Tools

  • Service Workers Hello World - Lifecycle Part 1 و PWA Chrome Dev Tools Service Workers Hello World - Lifecycle Part 1 and PWA Chrome Dev Tools

  • سرویس ورکرها و نسخه‌بندی برنامه – فازهای چرخه حیات Install & Activate Service Workers and Application Versioning - Install & Activate Lifecycle Phases

  • کارکنان خدمات و نسخه‌سازی برنامه - مراحل چرخه حیات را نصب و فعال کنید Service Workers and Application Versioning - Install & Activate Lifecycle Phases

  • دانلود صفحه آفلاین – فاز نصب سرویس ورکر Downloading The Offline Page - The Service Worker Installation Phase

  • دانلود صفحه آفلاین - مرحله نصب Service Worker Downloading The Offline Page - The Service Worker Installation Phase

  • معرفی Cache Storage PWA API Introduction to the Cache Storage PWA API

  • مقدمه‌ای بر API کش ذخیره‌سازی PWA Introduction to the Cache Storage PWA API

  • مشاهده قابلیت‌های رهگیری HTTP سرویس ورکرها در عمل View Service Workers HTTP Interception Features In Action

  • مدیریت خطای سرویس ورکرها – ارائه صفحه آفلاین Service Workers Error Handling - Serving The Offline Page

  • رسیدگی به خطای کارگران خدمات - ارائه صفحه آفلاین Service Workers Error Handling - Serving The Offline Page

مبانی سرویس ورکر Service Worker Fundamentals

  • کارگران خدمات به طور خلاصه - ثبت نام کارگران خدمات Service Workers In a Nutshell - Service Worker Registration

  • مشاهده ویژگی‌های رهگیری HTTP کارگران خدمات در عمل View Service Workers HTTP Interception Features In Action

کارگران خدماتی در عمل Service Workers In Practice

  • مقدمه بخش – سرویس ورکرها و دانلود و نصب برنامه Section Introduction - Service Workers and Application Download and Installation

  • معرفی بخش - دانلود و نصب اپلیکیشن و کارگران خدمات Section Introduction - Service Workers and Application Download and Installation

  • دانلود برنامه در پس‌زمینه با استفاده از سرویس ورکرها Downloading an Application In The Background Using Service Workers

  • استفاده از سرویس ورکرها برای پیاده‌سازی استراتژی Fetch ابتدا کش، سپس شبکه Using Service Workers To Implement a Cache Then Network Fetch Strategy

  • استفاده از Service Workers برای اجرای یک کش و سپس شبکه واکشی استراتژی Using Service Workers To Implement a Cache Then Network Fetch Strategy

  • مدیریت نسخه سرویس ورکر در عمل Service Worker Version Management in Action

  • مدیریت نسخه Service Worker - حذف نسخه های قبلی برنامه Service Worker Version Management - Deleting Previous Application Versions

  • مدیریت نسخه سرویس ورکر – حذف نسخه‌های قبلی برنامه Service Worker Version Management - Deleting Previous Application Versions

  • مزایای عملکرد سرویس ورکر نسبت به اتصال کند Performance Benefits of a Service Worker over a Slow Connection

  • چرخه حیات سرویس ورکر – درک رفتار پیش‌فرض Service Worker Lifecycle - Understanding The Default Behavior

  • شخصی‌سازی چرخه حیات سرویس ورکر – فعال‌سازی زودهنگام با clients.claim() Service Worker Lifecycle Customization -Early Activation with clients.claim()

  • سفارشی‌سازی چرخه عمر کارگر سرویس -فعال‌سازی اولیه با clients.claim() Service Worker Lifecycle Customization -Early Activation with clients.claim()

  • شخصی‌سازی چرخه حیات سرویس ورکر با skipWaiting() Service Worker Lifecycle Customization with skipWaiting()

  • سفارشی سازی چرخه عمر سرویس کارگر - نسخه های جدید را به صورت دستی بررسی کنید Service Worker Lifecycle Customization - Manually Check For New Versions

  • شخصی‌سازی چرخه حیات سرویس ورکر – بررسی دستی نسخه‌های جدید Service Worker Lifecycle Customization - Manually Check For New Versions

سرویس ورکرها در عمل Service Workers In Practice

  • دانلود یک برنامه در پس زمینه با استفاده از Service Workers Downloading an Application In The Background Using Service Workers

  • Service Worker نسخه مدیریت در عمل Service Worker Version Management in Action

  • مزایای عملکرد یک کارگر خدماتی از طریق اتصال آهسته Performance Benefits of a Service Worker over a Slow Connection

  • چرخه عمر کارگر خدمات - درک رفتار پیش فرض Service Worker Lifecycle - Understanding The Default Behavior

  • سفارشی سازی چرخه عمر Service Worker با skipWaiting() Service Worker Lifecycle Customization with skipWaiting()

نتیجه Conclusion

  • سخنرانی پاداش Bonus Lecture

  • درس اضافی (به‌روز شده در جولای ۲۰۲۵) Bonus Lecture (Updated July 2025)

  • سخنرانی پاداش Bonus Lecture

  • نتیجه‌گیری دوره و نکات کلیدی Course Conclusion and Key Takeaways

نتیجه‌گیری Conclusion

  • نتیجه گیری دوره و نکات کلیدی Course Conclusion and Key Takeaways

نمایش نظرات

آموزش جامع Angular Progressive Web Apps (PWA) و کتاب الکترونیکی رایگان
جزییات دوره
3.5 hours
43
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
5,707
4.3 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Angular University Angular University

پرفروش ترین دوره های انگولار | بیش از 100 هزار دانش آموز | 16 دوره