آموزش برنامه های وب پیشرو (PWA) - راهنمای کامل

Progressive Web Apps (PWA) - The Complete Guide

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
توضیحات دوره: با استفاده از دوربین دستگاه، اعلان‌های فشاری و موارد دیگر، یک برنامه وب پیشرفته (PWA) بسازید که شبیه برنامه‌های iOS و Android باشد. اتصال به اینترنت (اول-اول) از ویژگی های دستگاه مانند دوربین و موقعیت جغرافیایی در برنامه های وب خود استفاده کنید از اعلان های فشار وب برای افزایش تعامل کاربر با برنامه های وب خود استفاده کنید.

برنامه‌های وب پیشرو (PWA) چیز بزرگ بعدی در توسعه وب هستند زیرا بدون نیاز به نصب برنامه از فروشگاه برنامه/فروشگاه، تجربیاتی شبیه به برنامه تلفن همراه را برای کاربران شما به ارمغان می‌آورند.

شما هنوز یک برنامه وب (HTML، CSS، جاوا اسکریپت) ایجاد می‌کنید، اما این دوره به شما یاد می‌دهد که چگونه ویژگی‌هایی مانند دسترسی به دوربین، سرویس‌دهندگان برای پشتیبانی آفلاین، اعلان‌های فشاری و موارد دیگر را اضافه کنید. این بهترین‌های هر دو جهان را با هم ترکیب می‌کند: شما تجارب سریع، جذاب و قابل اعتماد ارائه می‌دهید در حالی که هنوز دسترسی و دسترسی به یک صفحه وب را دارید.

"برنامه وب پیشرو" به سادگی اصطلاحی است که تمام ویژگی هایی را که به شما امکان می دهد تجربیاتی شبیه به تلفن همراه ارائه دهید را خلاصه می کند. موضوع بسیار پرطرفدار است و همچنین موضوعی است که باید بماند! نه تنها به شدت توسط Google تبلیغ می شود (در واقع بسیاری از گفتگوها در Google I/O 2017، کنفرانس توسعه دهندگان Google، به PWA ها اختصاص داده شد، بلکه به سرعت توسط شرکت های بزرگی مانند توییتر یا واشنگتن پست نیز پذیرفته شد.

داشتن مهارت‌های ساخت و بهینه‌سازی این نوع برنامه‌های وب در حال حاضر یک مهارت مهم و بسیار مورد نیاز برای توسعه‌دهندگان وب مدرن است، روندی که تنها در حال افزایش است! بنابراین، یادگیری نحوه ساخت PWA به شما یک مزیت رقابتی می دهد!

در جزئیات، این دوره همه چیزهایی را که برای ساختن PWA های شگفت انگیز نیاز دارید را پوشش می دهد - که منجر به کسب امتیاز 100 (از 100) در ابزار حسابرسی PWA Google "Lighthouse" می شود:

  • توضیحات مفصل در مورد اینکه PWA دقیقا چیست

  • نحوه استفاده از مانیفست برنامه برای نصب برنامه وب خود در صفحه اصلی دستگاه

  • استفاده از کارکنان خدمات برای ارائه پشتیبانی آفلاین با ذخیره دارایی‌ها

  • استراتژی‌های استفاده از سرویس پیشرفته و ذخیره‌سازی حافظه

  • یک تازه‌سازی در Promises و Fetch API زیرا هر دو مفهوم به‌شدت در PWA استفاده می‌شوند

  • نحوه بهبود تعامل کاربر با افزودن اعلان‌های فشار

  • روشی برای همگام سازی داده ها در پس زمینه، حتی اگر اتصال قطع شود

  • نحوه دسترسی به ویژگی‌های دستگاه بومی مانند دوربین یا موقعیت جغرافیایی

  • استفاده از Workbox برای تسهیل مدیریت کارکنان خدمات

  • توضیحاتی در مورد نحوه تبدیل پروژه SPA بعدی خود به PWA

  • و بیشتر

همه این موارد البته با ساخت یک پروژه دوره عملی می شوند. برای اطمینان از اینکه می توانید دانش را در هر یک از پروژه های خود به کار ببرید، پروژه دوره هیچ چارچوب جاوا اسکریپتی را در نظر نمی گیرد بلکه بر ویژگی های اصلی ذکر شده در بالا تمرکز می کند!

بنابراین این دوره چیزهای زیادی برای ارائه دارد، چگونه می توان تشخیص داد که برای شما مناسب است؟

اگر ...

قطعاً انتخاب درستی است
  • ... شما در حال حاضر یک توسعه دهنده وب هستید (مهم نیست که تجربه داشته باشید یا هنوز در تجارت جدید هستید) و می خواهید برای آینده آماده شوید

  • ... از کار با HTML، CSS و جاوا اسکریپت لذت می برید و می خواهید از قدرت کاملی که فناوری های وب و مرورگر ارائه می دهند استفاده کنید

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

برای اینکه از دوره بیشترین بهره را ببرید چه چیزی باید بدانید؟

  • شما باید حداقل اصول اولیه HTML، CSS و جاوا اسکریپت را بدانید

  • به دانش پیشرفته ای از این فناوری ها نیازی نیست

  • نیازی به دانستن هیچ چارچوب جاوا اسکریپتی مانند Angular یا React ندارید - PWA ها با هر برنامه جاوا اسکریپتی کار می کنند، حتی اگر اصلاً از فریم ورک استفاده نکنید (در واقع، این چیزی است که ما در دوره آموزشی خواهیم ساخت!)

خیلی خوشحالم که در این دوره به شما خوش آمد بگویم و این سفر را با شما آغاز کنم!

حداکثر


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

شروع شدن Getting Started

  • درباره این دوره About this Course

  • برنامه های وب پیشرو چیست؟ What are Progressive Web Apps?

  • به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

  • PWA ها در مقابل برنامه های موبایل بومی PWAs vs Native Mobile Apps

  • Node.js دانلود کنید Node.js Download

  • نسخه آزمایشی PWA و آنچه در این دوره خواهیم ساخت A Demo PWA & What We'll Build in this Course

  • اولین برنامه وب پیشرو ما Our First Progressive Web App

  • بلوک های ساختمان اصلی PWA PWA Core Building Blocks

  • مقایسه PWA و SPA Comparing PWAs and SPAs

  • «تقویت پیشرونده» چیست؟ What is "Progressive Enhancement"?

  • طرح کلی دوره Course Outline

  • راه اندازی پروژه دوره Course Project Setup

  • چگونه از این دوره بیشترین بهره را ببرید How to get the Most out of this Course

درک مانیفست برنامه Understanding the App Manifest

  • معرفی ماژول Module Introduction

  • استفاده از مانیفست برنامه برای نصب شدن برنامه Using an App Manifest to Make your App Installable

  • افزودن مانیفست Adding the Manifest

  • آشنایی با ویژگی‌های مانیفست برنامه Understanding App Manifest Properties

  • افزودن ویژگی ها به مانیفست برنامه Adding Properties to the App Manifest

  • پشتیبانی از PWA و مرورگر PWAs and Browser Support

  • با استفاده از ابزارهای توسعه دهنده کروم Using the Chrome Developer Tools

  • شبیه سازی وب اپلیکیشن در شبیه ساز Simulating the Web App on an Emulator

  • آماده سازی دستگاه شبیه سازی شده برای همه ویژگی های PWA Preparing the Emulated Device for ALL PWA Features

  • نصب برنامه وب - پیش نیازها Installing the Web App - Prerequisites

  • درک manifest.json Understanding manifest.json

  • افزودن خواص برای سافاری Adding Properties for Safari

  • افزودن خواص برای اینترنت اکسپلورر Adding Properties for the Internet Explorer

  • بسته شدن Wrap Up

  • منابع و لینک های مفید Useful Resources & Links

کارگران خدماتی The Service Workers

  • معرفی ماژول Module Introduction

  • چرا کارگران خدماتی شگفت انگیز هستند! Why Service Workers Are Amazing!

  • درک رویدادهای کارگر خدمات Understanding Service Worker Events

  • چرخه حیات کارگر خدماتی The Service Worker Lifecycle

  • پشتیبانی مرورگر Service Worker Service Worker Browser Support

  • ثبت نام کارگر خدماتی Registering a Service Worker

  • واکنش به رویدادهای ورودی (در SW) Reacting to Incoming Events (in SW)

  • به روز رسانی و فعال سازی کارکنان خدمات Updating & Activating Service Workers

  • رویدادهای غیر چرخه زندگی Non-Lifecycle Events

  • بنر نصب برنامه و Chrome 68+ The App Install Banner & Chrome 68+

  • دریافت آن «بنر نصب برنامه» Getting that "App Install Banner"

  • اتصال ابزارهای برنامه‌نویس کروم به یک دستگاه واقعی/شبیه‌سازی‌شده Connecting Chrome Developer Tools to a Real/ Emulated Device

  • آزمایش برنامه روی دستگاه واقعی (و نصب برنامه!) Testing the App on Real Device (and Installing the App!)

  • به تعویق انداختن بنر نصب برنامه Deferring the App Install Banner

  • بسته شدن Wrap Up

  • سوالات متداول کارگر خدمات Service Worker FAQ

  • منابع و لینک های مفید Useful Resources & Links

وعده و واکشی Promise and Fetch

  • معرفی ماژول Module Introduction

  • کد Async در جاوا اسکریپت Async Code in JavaScript

  • وعده ها - مبانی Promises - Basics

  • رد وعده ها Rejecting Promises

  • جایی که ما از Promises در پروژه خود استفاده می کنیم Where we Use Promises in our Project

  • واکشی - مبانی Fetch - Basics

  • ارسال درخواست پست از طریق Fetch Sending Post Requests via Fetch

  • Fetch و CORS Fetch and CORS

  • مقایسه Fetch و Ajax Comparing Fetch and Ajax

  • افزودن Polyfills (برای پشتیبانی از مرورگر قدیمی) Adding Polyfills (for Legacy Browser Support)

  • کارگران واکشی و خدماتی Fetch & Service Workers

  • Time to Practice - Promises & Fetch API Time to Practice - Promises & Fetch API

  • [اختیاری] راه حل تکلیف [OPTIONAL] Assignment Solution

  • بسته شدن Wrap Up

  • منابع و لینک های مفید Useful Resources & Links

کارگران خدمات - ذخیره سازی Service Workers - Caching

  • معرفی ماژول Module Introduction

  • چرا Caching؟ Why Caching?

  • آشنایی با Cache API Understanding the Cache API

  • پشتیبانی مرورگر Browser Support

  • تنظیم پروژه دوره Adjusting the Course Project

  • شناسایی موارد (پیش) قابل ذخیره سازی Identifying (Pre-)Cacheable Items

  • ذخیره سازی استاتیک/پیش کش Static Caching/ Precaching

  • بازیابی موارد از حافظه پنهان Retrieving Items from the Cache

  • افزودن و بازیابی چندین فایل (به/از کش) Adding & Retrieving Multiple Files (to/ from Cache)

  • کش چند فایل با addAll Cache Multiple Files with addAll

  • حافظه پنهان پویا - مبانی Dynamic Caching - The Basics

  • پیاده سازی حافظه پنهان پویا Implementing Dynamic Caching

  • رسیدگی به خطاها Handling Errors

  • اضافه کردن نسخه کش Adding Cache Versioning

  • نسخه های مختلف کش و پاکسازی Different Cache Versions & Cleanup

  • بهینه سازی مدیریت کش Optimizing Cache Management

  • زمان تمرین: کارگران خدمات و ذخیره سازی Time to Practice: Service Workers & Caching

  • [اختیاری] راه حل تکلیف [OPTIONAL] Assignment Solution

  • بسته شدن Wrap Up

  • منابع و لینک های مفید Useful Resources & Links

کارگران خدمات - ذخیره سازی پیشرفته Service Workers - Advanced Caching

  • معرفی ماژول Module Introduction

  • آماده سازی ماژول: اضافه کردن یک دکمه Module Preparation: Adding a Button

  • ارائه "کش بر حسب تقاضا" Offering "Cache on Demand"

  • ارائه یک صفحه بازگشتی آفلاین Providing an Offline Fallback Page

  • استراتژی: کش با شبکه بازگشتی Strategy: Cache with Network Fallback

  • استراتژی: فقط حافظه پنهان Strategy: Cache Only

  • استراتژی: فقط شبکه Strategy: Network Only

  • استراتژی: شبکه با Cache Backback Strategy: Network with Cache Fallback

  • استراتژی: کش و سپس شبکه Strategy: Cache then Network

  • Cache سپس Network & Dynamic Caching Cache then Network & Dynamic Caching

  • کش و سپس شبکه با پشتیبانی آفلاین Cache then Network with Offline Support

  • استراتژی های کش و "مسیریابی" Cache Strategies & "Routing"

  • فقط اعمال کش Applying Cache Only

  • زمان تمرین - ذخیره سازی پیشرفته Time to Practice - Advanced Caching

  • [اختیاری] راه حل تکلیف [OPTIONAL] Assignment Solution

  • روشی بهتر برای تجزیه URL های کش استاتیک A Better Way Of Parsing Static Cache URLs

  • ایجاد تطابق مسیر دقیق تر Making Route Matching More Precise

  • روشی بهتر برای ارائه فایل های بازگشتی A Better Way Of Serving Fallback Files

  • API درخواست ارسال و کش Post Request and Cache API

  • تمیز کردن/برش کش Cleaning/ Trimming the Cache

  • خلاص شدن از شر یک کارگر خدماتی Getting Rid of a Service Worker

  • آماده سازی پروژه برای مراحل بعدی Preparing the Project for the Next Steps

  • بسته شدن Wrap Up

  • منابع و لینک های مفید Useful Resources & Links

IndexedDB و Dynamic Data IndexedDB and Dynamic Data

  • معرفی ماژول Module Introduction

  • درک اصول Understanding the Basics

  • طرح بندی کنسول Firebase تغییر کرد Changed Firebase Console Layout

  • راه اندازی Firebase Setting Up Firebase

  • اتصال Frontend به Backend Connecting Frontend to Backend

  • حافظه پنهان پویا در مقابل ذخیره محتوای پویا Dynamic Caching vs. Caching Dynamic Content

  • معرفی IndexedDB Introducing IndexedDB

  • پشتیبانی از مرورگر IndexedDB IndexedDB Browser Support

  • افزودن فایل IDB Adding the IDB File

  • ذخیره پست های واکشی شده در IndexedDB Storing Fetched Posts in IndexedDB

  • استفاده از IndexedDB در Service Worker Using IndexedDB in the Service Worker

  • خواندن داده ها از IDB Reading Data from IDB

  • پاک کردن IDB و مدیریت عدم تطابق سرور و مشتری Clearing IDB & Handling Server-Client Mismatch

  • پیاده سازی روش Clear Database Implementing the Clear Database Method

  • حذف موارد منفرد از پایگاه داده Deleting Single Items from the Database

  • IndexedDB و استراتژی های ذخیره سازی IndexedDB and Caching Strategies

  • بسته شدن Wrap Up

  • منابع و لینک های مفید Useful Resources & Links

ایجاد یک رابط کاربری پاسخگو (UI) Creating a Responsive User Interface (UI)

  • معرفی ماژول Module Introduction

  • طراحی ریسپانسیو در این دوره Responsive Design in this Course

  • درک طراحی واکنشگرا در پروژه ما Understanding Responsive Design in our Project

  • CSS و پرسش های رسانه ای CSS and Media Queries

  • آیا می خواهید بیشتر از تصاویر خود را ببینید؟ Want to see more of your Images?

  • استفاده از تصاویر به صورت واکنشگرا Using Images in a Responsive Way

  • اضافه کردن انیمیشن ها Adding Animations

  • Viewport & Scaling The Viewport & Scaling

  • بسته شدن Wrap Up

  • منابع و لینک های مفید Useful Resources & Links

همگام سازی پس زمینه Background Sync

  • معرفی ماژول Module Introduction

  • همگام سازی پس زمینه چگونه کار می کند؟ How does Background Sync Work?

  • افزودن تنظیمات اولیه به پروژه ما Adding the Basic Setup to our Project

  • ثبت یک کار همگام سازی Registering a Synchronization Task

  • ذخیره پست ما در IndexedDB Storing our Post in IndexedDB

  • اضافه کردن یک بازگشت به عقب Adding a Fallback

  • همگام سازی داده ها در Service Worker Syncing Data in the Service Worker

  • درک همگام سازی دوره ای Understanding Periodic Sync

  • باید بخوانید: Firebase Cloud Functions & Billing MUST READ: Firebase Cloud Functions & Billing

  • اضافه کردن کد سمت سرور Adding Server Side Code

  • رفع خطاها Fixing Errors

  • بسته شدن Wrap Up

  • منابع و لینک های مفید Useful Resources & Links

اطلاعیه های فشار وب Web Push Notifications

  • معرفی ماژول Module Introduction

  • چرا ما به اطلاعیه های فشاری وب نیاز داریم؟ Why we need Web Push Notifications

  • نحوه عملکرد Push & Notifications How Push & Notifications Work

  • نمایش اعلان ها - ابتدا برخی نظریه ها Displaying Notifications - Some Theory First

  • پشتیبانی مرورگر Browser Support

  • درخواست مجوزها Requesting Permissions

  • نمایش اعلان ها Displaying Notifications

  • اعلان‌های داخل سرویس‌کار Notifications from Within the Service Worker

  • درک گزینه های اعلان ها Understanding Notifications' Options

  • گزینه های پیشرفته Advanced Options

  • افزودن اقدامات به اعلان ها Adding Actions to Notifications

  • واکنش به تعامل اعلان - کلیک ها Reacting to Notification Interaction - Clicks

  • واکنش به تعامل اعلان - بسته شدن Reacting to Notification Interaction - Closing

  • از اعلان‌ها تا پیام‌های فشاری From Notifications to Push Messages

  • ایجاد اشتراک Push Creating a Push Subscription

  • ذخیره اشتراک ها Storing Subscriptions

  • اتصال سرور و کلاینت (PWA) Connecting Server & Client (PWA)

  • ارسال پیام های فشاری از سرور Sending Push Messages from the Server

  • گوش دادن به پیام های فشاری Listening to Push Messages

  • نمایش اعلان‌های فشاری در یک دستگاه واقعی Displaying Push Notifications on a Real Device

  • باز کردن یک صفحه پس از تعامل با کاربر Opening a Page upon User Interaction

  • بهبود کد ما Improving our Code

  • بسته شدن Wrap Up

  • منابع و لینک های مفید Useful Resources & Links

ویژگی های دستگاه بومی Native Device Features

  • معرفی ماژول Module Introduction

  • آماده سازی پروژه Preparing the Project

  • دریافت دسترسی DOM Getting DOM Access

  • ایجاد Polyfills خودمان Creating our own Polyfills

  • دریافت تصویر ویدیویی Getting the Video Image

  • وصل کردن دکمه ضبط Hooking Up the Capture Button

  • ذخیره تصویر در سرور Storing the Image on a Server

  • پذیرش نمونه آپلود فایل با Firebase Accepting File Upload Example with Firebase

  • باید بخوانید: تغییرات لازم در کد عملکرد ابری MUST READ: Required Changes to Cloud Function Code

  • تست دوربین و آپلود Testing the Camera & Upload

  • پیاده سازی یک فال بک Implementing a Fallback

  • گرفتن موقعیت کاربر Getting the User Position

  • رفع اشکالات Fixing Bugs

  • تست برنامه روی یک دستگاه واقعی Testing the App on a Real Device

  • بسته شدن Wrap Up

  • منابع و لینک های مفید Useful Resources & Links

مدیریت کارکنان خدمات با جعبه کار Service Worker Management with Workbox

  • معرفی ماژول Module Introduction

  • درک اصول Understanding the Basics

  • نسخه Workbox مورد استفاده در این دوره The Workbox Version Used In This Course

  • نصب Workbox و استفاده از آن Installing Workbox & Using It

  • پیکربندی جعبه کاری پیش کش Configuring Workbox Precaching

  • سفارشی کردن سرویس کارگر Customizing the Service Worker

  • پیاده سازی مسیریابی با روتر Workbox Implementing Routing with the Workbox Router

  • گسترش حافظه پنهان پویا Expanding Dynamic Caching

  • گزینه ها و راه اندازی استراتژی ها Options and Setting Up Strategies

  • کنترل کننده های سفارشی (مثال: برای IndexedDB) Custom Handlers (Example: For IndexedDB)

  • ارائه نسخه بازگشتی HTML آفلاین Providing an Offline HTML Fallback

  • مدیریت همگام سازی پس زمینه و اعلان های فشاری Handling Background Synchronisation and Push Notifications

  • آشنایی با اسناد ورک باکس Understanding the Workbox Documentation

  • افزایش گردش کار ساخت Enhancing the Build Workflow

  • اجرای برنامه ما بر روی یک سرور واقعی Running our App on a Real Server

  • حسابرسی صفحه وب ما با Lighthouse Auditing our Webpage with Lighthouse

  • بسته شدن Wrap Up

  • منابع و لینک های مفید Useful Resources & Links

SPA ها و PWA ها SPAs and PWAs

  • معرفی ماژول Module Introduction

  • با create-react-app واکنش نشان دهید React with create-react-app

  • یک یادداشت کلی در مورد SPA و PWA A General Note about SPAs and PWAs

  • زاویه ای با CLI Angular with the CLI

  • Vue با Vue CLI Vue with Vue CLI

  • بسته شدن Wrap Up

  • منابع و لینک های مفید Useful Resources & Links

خلاصه دوره Course Roundup

  • خلاصه دوره Course Roundup

  • امتیاز: محتوای بیشتر! Bonus: More Content!

نمایش نظرات

نظری ارسال نشده است.

آموزش برنامه های وب پیشرو (PWA) - راهنمای کامل
خرید اشتراک و دانلود خرید تکی و دانلود | 160,000 تومان (5 روز مهلت دانلود) زمان تقریبی آماده سازی لینک دانلود این دوره آموزشی حدود 5 تا 24 ساعت می باشد.
جزییات دوره
15.5 hours
208
Udemy (یودمی) udemy-small
27 آبان 1401 (آخرین آپدیت رو دریافت می‌کنید، حتی اگر این تاریخ بروز نباشد.)
61,002
4.5 از 5
دارد
دارد
دارد

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Academind by Maximilian Schwarzmüller Academind by Maximilian Schwarzmüller

آموزش آنلاین

Maximilian Schwarzmüller Maximilian Schwarzmüller

دارای گواهینامه AWS، توسعه دهنده وب و مدرس حرفه ای

Udemy (یودمی)

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

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