تجربه من از شروع کار با PWA(بخش اول)

سلام

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

خب اصلا PWAچیه؟ Progressive Web Applicationیا PWA یک وب اپلیکیشنه که با مرورگرهای مدرن سازگاری داره البته با مرورگرهای قدیمی هم کار میکنه ولی قابلیت هاش توی مرورگر های جدید بیشتره.

حالا مزایاش چیه؟ اول اینکه برای نصب به مارکت ها احتیاج نداره نصبش خیلی آسونه کاربر اونو به homeScreen گوشیش اضافه میکنه.

دوم اینکه به صورت آفلاین هم میتونه کار کنه و محتوایی رو به کاربر نشون بده در صورتی که کاربر اینترنتش قطع شد از محتوای آفلاین استفاده میکنه.

سوم اینکه کاملا رسپانسیو هستش و سرعت خوبی داره.

خب برای شروع من یک پوشه جدید ساختم و یک پروژه htmlجدید ساختم که از materialize برای css استفاده کردم.هیچ ایده ای برای ساخت نداشتم برای همین یه پروژه ساده ایجاد کردم تا کم کم ببرمش جلو.قیافه اولیه اش هم این شکلیه زیاد چیز جالبی نیست :))

خب بعد اینکه پروژه خودمونو با HTML و CSS ساختیم ( البته من برای باز بسته شدن منو سمت راست از جاوا اسکریپت استفاده کردم) چندتا کار باید انجام بدیم.اولیش اینه که شما برای اجرا گرفتن احتیاج به یک سرور مجازی دارین که از هرکدوم که باهاش راحتین میتونین استفاده کنین.اگر از vs code استفاده میکنید میتونید (live server extension) نصب کنید.دومیش هم یک شبیه ساز برای اجرا گرفتن روی گوشی.که بازم بستگی به سلیقه خودتون داره که از کودوم استفاده میکنین من از شبیه ساز nox استفاده میکنم ولی شما اگر اندروید استودیو دارید میتونید از شبیه ساز اندروید استودیو استفاده کنید.سومین کار اینکه من دو تا فایل به پروژه ام اضافه میکنم.اولیش فایل manifest.json هستش. حالا وظیفه این فایل چیه؟یک سری ویژگی رو داخل خودش داره که نحوه نمایش وب اپلیکیشن رو کنترل میکنه.

خب اما این ویژگی ها چیه:(انگلیسی ها رو آخر پاراگراف نوشتم برای اینکه بهم میریخت:)))

اسم کوتاهی هست که برای اپلیکیشن انتخاب میشه: Shortname

صفحه شروع اپلیکیشن ما یا همون صفحه خانه: Start_url

دیسپلی: حالت نمایش اپلیکیشن هست (standalone:به صورت اپلیکیشن نمایش میده و fullscreen : به صورت کامل نمایش میده و browser : که به صورت پیشفرض این حالت رو میگیره )

تا زمانی که اپلیکیشن در حال لود شدنه از این رنگ استفاده میشه در پس زمینه : Background_color

این هم مثله رنگ پس زمینه اس کارش فقط رنگ نوار بالایی رو مشخص میکنه : Theme_color

نوع نمایش اپلیکیشن هست که من روی عمودی گذاشتم بقیه مقدارهاشو از این لینک میتونید ببینید : Orientation

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

البته ویژگی های دیگه ام داره که فعلا ازشون استفاده نکردم و نمیدونم چی هستن میتونید شما به این <لینک> برید و مستنداتشو بخونید.

خب کارمون با این فایل تموم شد فقط کافیه که بریم داخل تگ head فایل index.html خودمون و manifest رو لینک کنیم.

<link href="/manifest.json" rel="manifest">

خب اگر من به inspect برم و در تب اپلیکیشن روی manifest کلیک کنم میبینیم که فایلم به صفحه ام اضافه شده و ویژگی های manifest رو داره میخونه.

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

یک فایل ضروریه دیگه که وب اپلیکیشن بهش احتیاج داره فایل service worker هست.وظیفه این فایل جاوا اسکریپت اینه که اطلاعات مارو بگیره تا زمانی که ما آفلاین هستیم هم بتونیم از اپلیکیشن استفاده کنیم که توی پست آینده هم راجع به اون از چیزایی که فهمیدم می نویسم.

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