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

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

شروع شدن Getting Started

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

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

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

• نسخه آزمایشی 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

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

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

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

• بسته شدن Wrap Up

کارگران خدماتی 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

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

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

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

• بسته شدن Wrap Up

وعده و واکشی 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

• بسته شدن Wrap Up

کارگران خدمات - ذخیره سازی 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

• بسته شدن Wrap Up

کارگران خدمات - ذخیره سازی پیشرفته 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

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

• روشی بهتر برای ارائه فایل های بازگشتی 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

IndexedDB و Dynamic Data IndexedDB and Dynamic Data

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

• درک اصول Understanding the Basics

• راه اندازی 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

ایجاد یک رابط کاربری پاسخگو (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

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

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

• Viewport & Scaling The Viewport & Scaling

• بسته شدن Wrap Up

همگام سازی پس زمینه 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

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

• رفع خطاها Fixing Errors

• بسته شدن Wrap Up

اطلاعیه های فشار وب 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

ویژگی های دستگاه بومی 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

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

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

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

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

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

• بسته شدن Wrap Up

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

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

• درک اصول Understanding the Basics

• نصب 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 Synchronization 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

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

خلاصه دوره Course Roundup

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