دوره ای که تمام جنبه های توسعه برنامه های وب پیشرفته مدرن را تجزیه می کند.
این دوره اصول توسعه برنامه های وب پیشرو را در قطعاتی ساده و قابل درک پوشش می دهد. در ماژول‌های زیر، می‌آموزید که برنامه وب پیشرفته چیست، چگونه می‌توانید یک برنامه ایجاد کنید یا محتوای وب موجود خود را ارتقا دهید، و چگونه همه قطعات را برای یک برنامه آفلاین و قابل نصب اضافه کنید. از پنجره منو برای پیمایش ماژول ها استفاده کنید. (منو در سمت چپ روی دسکتاپ یا پشت منوی همبرگر در تلفن همراه است.)
شما اصول PWA مانند Web App Manifest، Service Workers، نحوه طراحی با در نظر گرفتن یک برنامه، نحوه استفاده از ابزارهای دیگر برای آزمایش و اشکال زدایی PWA خود را خواهید آموخت. پس از این اصول، در مورد ادغام با پلتفرم و سیستم عامل، نحوه بهبود تجربه نصب و استفاده از PWA و نحوه ارائه یک تجربه آفلاین خواهید آموخت.
هر ماژول شامل دموهای تعاملی و خودارزیابی هایی است تا دانش خود را آزمایش کنید. شما می‌توانید هنگام بازی با کد، نسخه‌های نمایشی را روی تلفن همراه، تبلت یا لپ‌تاپ خود آزمایش و امتحان کنید تا به اصول سازنده یک برنامه وب پیشرفته پی ببرید.
این دوره برای توسعه دهندگان وب مبتدی و پیشرفته ایجاد شده است. می‌توانید این مجموعه را از ابتدا تا انتها مرور کنید تا به درک کلی از PWA از بالا به پایین دست پیدا کنید، یا می‌توانید از آن به عنوان مرجع برای موضوعات خاص استفاده کنید. برای کسانی که تازه وارد توسعه وب شده اند، به یک پایه در HTML، CSS و جاوا اسکریپت نیاز دارند تا دنبال شوند. آموزش CSS و دوره های HTML و JavaScript در MDN را بررسی کنید.
در اینجا چیزی است که یاد خواهید گرفت:
شروع شدن
اگر می‌خواهید یک برنامه وب پیشرفته بسازید، ممکن است این سوال برای شما پیش بیاید که از کجا شروع کنید، آیا می‌توان یک وب‌سایت را بدون شروع از ابتدا به یک PWA ارتقا داد، یا اینکه چگونه از یک برنامه مخصوص پلتفرم به یک PWA حرکت کنید. این مقاله به شما در پاسخ به این سوالات کمک می کند.
پایه ها
همه برنامه‌های وب پیشرو در هسته خود، وب‌سایت‌های مدرنی هستند، بنابراین مهم است که وب‌سایت شما پایه و اساس محکمی در طراحی واکنش‌گرا، موبایل و همه چیز، طراحی ذاتی و عملکرد وب داشته باشد.
طراحی اپلیکیشن
یکی از تفاوت های کلیدی بین برنامه های وب پیشرفته و وب سایت ها و برنامه های وب کلاسیک، قابلیت نصب است. این یک تجربه مستقل را ایجاد می کند که بیشتر با پلتفرم و سیستم عامل یکپارچه شده است. نصب، انعطاف‌پذیری و مسئولیت جدید را امکان‌پذیر می‌سازد، زیرا ما رابط کاربری مرورگر در اطراف محتوای خود نخواهیم داشت.
دارایی ها و داده ها
برنامه وب پیشرو یک وب سایت است. همه دارایی‌های آن مانند وب هستند، اما با ابزارهای جدید به منظور بارگیری سریع آن دارایی‌ها در زمان آنلاین و در دسترس بودن در حالت آفلاین.
کارگران خدماتی
کارکنان خدمات بخش اساسی یک PWA هستند. آنها بارگذاری سریع (بدون توجه به شبکه)، دسترسی آفلاین، اعلان های فشار و سایر قابلیت ها را فعال می کنند.
ذخیره سازی
می‌توانید از Cache Storage API برای دانلود، ذخیره، حذف یا به‌روزرسانی دارایی‌ها در دستگاه استفاده کنید. سپس این دارایی ها را می توان بدون نیاز به درخواست شبکه در دستگاه ارائه کرد.
در حال خدمت کردن
با استفاده از رویداد واکشی کارگر سرویس، می‌توانید درخواست‌های شبکه را رهگیری کرده و با استفاده از تکنیک‌های مختلف، پاسخی را ارائه دهید.
جعبه کار
Workbox مجموعه ای از ماژول ها است که تعاملات متداول سرویس دهنده مانند مسیریابی و کش را ساده می کند. هر ماژول به جنبه خاصی از توسعه کارگر خدماتی می پردازد. هدف Workbox این است که استفاده از کارکنان خدمات را تا حد امکان آسان کند و در عین حال انعطاف پذیری را برای پاسخگویی به نیازهای برنامه کاربردی پیچیده در صورت نیاز فراهم کند.
داده های آفلاین
برای ایجاد یک تجربه آفلاین جامد، باید مدیریت ذخیره سازی را پیاده سازی کنید. ابزارهایی مانند IndexedDB، Cache، Storage Manager، Persistent Storage و Content Indexing می توانند کمک کنند.
نصب و راه اندازی
دسترسی به برنامه های نصب شده آسان است و می توانند از ادغام های عمیق تر با سیستم عامل بهره ببرند. یاد بگیرید که PWA خود را قابل نصب کنید و از این مزایا بهره مند شوید.
مانیفست برنامه وب
مانیفست برنامه وب یک فایل JSON است که نحوه برخورد با PWA را به عنوان یک برنامه نصب شده، از جمله ظاهر و احساس و رفتار اساسی در سیستم عامل، تعریف می کند.
اعلان نصب
برای سایت‌هایی که معیارهای نصب PWA را پاس می‌کنند، مرورگر رویدادی را راه‌اندازی می‌کند تا از کاربر بخواهد آن را نصب کند. خبر خوب این است که می‌توانید از این رویداد برای سفارشی کردن درخواست خود استفاده کنید و کاربران را به نصب برنامه خود دعوت کنید.
به روز رسانی
به احتمال زیاد PWA شما نیاز به به روز رسانی دارد. این فصل ابزارهایی را برای به روز رسانی بخش های مختلف PWA، از دارایی ها گرفته تا ابرداده، در اختیار شما قرار می دهد.
بهبودها
کاربر شما انتظار تجربه خوبی دارد. در این فصل، نحوه بهبود PWA خود را با صفحه‌های اسپلش، میانبرهای برنامه و نحوه عملکرد جلسات خواهید دید.
تشخیص
شناسایی نحوه تعامل کاربران با برنامه شما در شخصی سازی و بهبود تجربه کاربری مفید است. به عنوان مثال، می توانید بررسی کنید که آیا برنامه شما قبلاً روی دستگاه کاربر نصب شده است یا خیر و ویژگی هایی مانند انتقال ناوبری به برنامه مستقل از مرورگر را اجرا کنید.
یکپارچه سازی سیستم عامل
PWA شما اکنون خارج از مرورگر کار می کند. این فصل نحوه ادغام بیشتر با سیستم عامل را پس از نصب برنامه توسط کاربران پوشش می دهد.
مدیریت پنجره
یک PWA خارج از مرورگر پنجره خود را مدیریت می کند. در این فصل، API ها و قابلیت های مدیریت یک پنجره در سیستم عامل را خواهید فهمید.
ویژگی های تجربی
قابلیت های PWA وجود دارد که هنوز در دست ساخت هستند و شما می توانید بخشی از توسعه آنها باشید. در این فصل با پروژه Fugu، نحوه ثبت نام برای آزمایش اولیه و نحوه استفاده از APIهای آزمایشی آشنا خواهید شد.
ابزارها و اشکال زدایی
ما ابزارهای موجود برای توسعه، اشکال زدایی و آزمایش برنامه های وب پیشرو شما را بررسی خواهیم کرد.
معماری
شما هنگام توسعه یک PWA تصمیم می گیرید، مانند اینکه آیا یک برنامه تک صفحه ای ایجاد کنید یا یک برنامه چند صفحه، و اینکه آیا آن را در ریشه دامنه خود یا در یک پوشه میزبانی می کنید.
مدیریت پیچیدگی
ساده نگه داشتن یک برنامه وب می تواند به طرز شگفت آوری پیچیده باشد. در این ماژول، شما یاد خواهید گرفت که چگونه API های وب با threading کار می کنند و چگونه می توانید از آن برای الگوهای رایج PWA مانند مدیریت حالت استفاده کنید.
توانایی ها
PWA ها فقط به صفحه نمایش گره نمی خورند. این فصل در مورد قابلیت هایی است که یک PWA امروزه از نظر سخت افزار، حسگرها و استفاده از پلتفرم دارد.
نتیجه
مراحل و منابع بعدی
بنابراین، آیا برای یادگیری PWA آماده هستید؟