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

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

PWA چست ؟

PWA مخفف عبارت Progressive Web Apps به معنی برنامه های وب پیشرو می باشد. این عبارت اولین بار در سال 2015 توسط گوگل معرفی شد. طبق گفته های Pete lepage (وکیل توسعه دهنده گوگل) بخش progressive را می توان اینگونه توضیح داد: هر چه کاربر بیشتر با برنامه ارتباط برقرار کند به مرور زمان بیشتر و قدرتمندتر می شود.

اشتباه نکنید: برنامه های PWA هنوز هم وب سایت هستند، آنها فقط بخاطر فن آوری مدرن شبیه یک برنامه به نظر می رسند به این معنی که کاربران می توانند برنامه های PWA را مانند هر وب سایت دیگری در مرورگر خود ببینند اما به محض نشستن در مرورگر می توانند لذت استفاده از برنامه را بدون نیاز به دانلود و نصب تجربه کنند.

App بودن به معنی محدود بودن به گوشی نیست. آنها را می توان در کامپیوترهای رومیزی هم پیاده سازی کرد. قبل از اینکه این مطالب را بخوانید حتماً از PWA دیدن کرده اید بدون اینکه متوجه شوید. اینستاگرام، Pinterest یا Tinder نمونه های موفق از PWA هستند که حتماً برای یکبار هم که شده این برنامه ها را در لپ تاپ یا کامپیوتر خود اجرا کرده اید.

از کجا بدانیم یک وب سایت PWA است یا نه؟

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

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

وب سایت تک صفحه ای

این ساده ترین راه برای شناخت وب سایت PWA است زیرا وب سایت های PWA از لحاظ فنی تک صفحه ای می باشند ولی این بدین معنا نیست که وب سایت ساخته شده با PWA فقط یک صفحه دارد بلکه به این معناست که رویداد مشاهده صفحه فقط یکبار اتفاق می افتد و در سری های بعدی این بارگذاری توسط جاوا اسکریپت اداره می شود. این نوع وب سایت با وب سایت های معمولی که با هر تغییر باعث بارگذاری مجدد صفحه همراه با کد HTML آن می شود متفاوت است.

PWA چگونه کار می کند؟ بسیار ساده است هنگامی که شما به تب فعال مرورگر خود نگاهی بیندازید اگر سایت PWA باشد هنگام تغییر صفحه سایت بارگذاری مجدد نمی شود به این معنی که هیچ انیمیشن Loading روی تب فعال وجود ندارد.

برای نمونه می توانیم به وب سایت New York Times اشاره کنیم که PWA نیست.

یک نمونه وب سایت که با PWA ساخته شده است وب سایت SimiCart است که می توانید آن را تست کنید.

منظور این جمله ” هنگام تغییر صفحات سایت بارگذاری مجدد نمی شود” چیست؟ همانطور که می بینید در صفحات PWA شما تنها در یک صفحه باقی می مانید و بارگیری صفحات بسیار سریع انجام می شود. در اولین بازدید از سایت همه صفحات بارگیری می شوند و هنگام مراجعه بعدی برای شما ارسال می شوند. این نوع وب سایت ها به سرعت شبکه وابسته نیستند و می توانند به صورت آفلاین هم کار کند.

Service Workers

این Workers انسان نیستند. Service Workers نام تکنولوژی پنهان یک PWA است که توانایی آفلاین بودن، پوش نوتیفیکیشن ها و ذخیره منابع را به شما می دهد. طبق گفته های گوگل Service Workers در هسته فن آوری PWA قرار دارند؛ بنابراین اگر بتوانیم بفهمیم وب سایت از فناوری Service Workers استفاده می کند می توانیم بگوییم که این وب سایت PWA است.

اگر از مرورگرهای مبتنی بر کروم استفاده می کنید می توانید با استفاده از Inspector Tool به راحتی این کار را انجام دهید. روی وب سایت مورد نظر کلیک راست کرده و گزینه Inspect Element را انتخاب کنید. سپس به تب Application و از آنجا گزینه Service Workers را انتخاب کنید تا ببینید Service Workers وجود دارد یا نه.

این ترفند نشانه ای از وب سایت PWA را به شما نشان می دهد. با اینکه Service Workers مشخصه اصلی وب سایت های PWA نیست و ممکن است سایر وب سایت ها هم برای افزایش کارایی شان از آن استفاده کنند.

HTTPS secure origin

با این حال می توانید از روی URL یک وب سایت بگویید PWA است یا خیر. اگر آدرس وب سایتی بجای https:// با http:// شروع شده باشد آن وب سایت PWA نیست زیرا PWA فقط می تواند روی وب سایت هایی که در دامنه امن هستند کار کند یعنی https باشد.

برنامه های PWA چه کاری می توانند انجام دهند؟

در بخشی از این مقاله گفتیم که برنامه های PWA بیشتر کارهایی را که قبلاً در برنامه های Native منحصر بفرد بود می تواند انجام دهد که شامل دسترسی به قابلیت های گوشی مانند دوربین- میکروفون- GPS- حالت افلاین- دسترسی به فایل و … می شود. برای بدست آوردن اطلاعات از کارهایی که PWA قادر به انجام آن است می توانید به https://whatpwacando.today/ نگاهی بیندازید.

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

چرا در زندگی به یک برنامه PWA نیاز داریم؟

برنامه های PWA رقابت را در همه جا (از پلتفرم ویندوز تا مارکت هایی مانند گوگل پلی) نمایش می دهد این قابل درک است که PWA برای گام بعدی یعنی تکامل تکنولوژی وب (Evolution of Web Technology) طرح ریزی شده است.

پس چرا PWA؟ این بخش غافلگیر کننده است که نمودار پایین می تواند بهتر این مطلب را از آنچه که گفته شد بیان کند.

اگر حوصله یادگیری دارید من به شما می گویم که چرا یک وب سایت PWA بهتر از یک وب سایت معمولی است.

سرعت:

با توجه به محتوای یکسان، PWA به لطف تکنولوژی Service Workers محتوای سایت را زودتر از سایت های عادی بارگذاری می کند. بار اول محتوا سریع بارگذاری می شود و در مراجعات بعدی به دلیل ذخیره کردن محتوا سریعتر از بار اول آنها را نمایش می دهد.

حالت آفلاین:

دسترسی آفلاین به محتوا با تکنولوژی Service Workers امکان پذیر است. در اولین بار بازدید از وب سایت کلیه مطالب بارگیری شده و توسط جاوا اسکریپت تحویل داده می شود که این امکان محتوا را بدون وقفه نمایش می دهد.

اضافه کردن به home screen:

این عملکرد باعث می شود تا کاربران بتوانند PWA را روی موبایل خود نصب کنند. بعد از اینکه اعلان را قبول کردند PWA به صفحه اصلی تلفن همراه اضافه می شود و مانند سایر برنامه های نصب شده اجرا می شود.

اعلان قدیمی اضافه کردن به صفحه home screen احتمالاً شبیه به تصویر زیر است.

حالا اینگونه به نظر می رسد:

نه تنها PWA بهتر از وب سایت های معمولی است بلکه برندها نیز به دلیل مزایایی که PWA دارد به سمت آن روی آورده اند. این مزایا شامل:

Cross – platform:

برنامه PWA که ساخته شد می توان روی هر سیستم عامل موبایل مانند اندروید، IOS یا ویندوز اجرا کرد زیرا این برنامه ها مبتنی بر مرورگر هستند نه سیستم عامل.

بروز رسانی:

تغییرات PWA به محض اینکه کاربران صفحه را Refresh کنند اجرا می شود.

Indexability:

از لحاظ فنی PWA هنوز یک وب سایت است و می توان محتوای آن را در گوگل جستجو و پیدا کرد. این امر فرصت های بیشتری را برای سئو PWA ایجاد می کند که به پایگاه بزرگتری از کاربران در مقایسه با برنامه های معمولی دسترسی داشته باشد.

بدون نیاز به انتشار:

انتشار برنامه های معمولی گاهی ممکن است یک معضل بزرگ باشد و هنگامی که شما برنامه خود را به فروشگاهی ارسال می کنید و چندین روز منتظر تأیید آن ها می شوید در کمال تعجب می بینید که با دلیلی برنامه شما را رد کرده اند که شما را مجبور می کند حتی 10 بار آن را مرور کنید و هنوز هم متوجه نشوید از چه چیزی ایراد گرفته اند و در برخی موارد هم ممکن است اصلاً برنامه شما پذیرفته نشود ولی با PWA هیچ ارسال برنامه ای وجود ندارد پس بهتر است که برنامه خود را در گوگل پلی- فروشگاه Apple و مایکروسافت منتشر کنید.

هزینه پایین برای توسعه:

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

همه این مزایایی که بیان شد نشان دهنده خوب بودن PWA است. PWA علیرغم ویژگی های که بیان شد هنوز اشکالاتی دارد:

پشتیبانی از مرورگر

در حالی که تمامی مرورگرهای امروزی (Opera – Firefox- Chrome- مرورگرهای اندرویدی سامسونگ و …) از PWA پشتیبانی می کند یک مرورگر سرسختانه از پشتیبانی PWA خودداری می کند این مرورگر Safari است. این به این دلیل است که پشتیبانی از برنامه های PWA به معنای حمایت از آینده همه چیز است که برای شرکت های نرم افزار محور مانند اپل نیست.

Compatibility (سازگاری)

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

قابل دستیابی

با توجه به اینکه این فناوری هنوز هم جدید و ناشناخته است. هیچ بازار کاربردی فعلی برای PWA وجود ندارد و این مورد تعداد مخاطبان را کاهش می دهد. با این حال حرکت هایی از سوی شرکت های شناخته شده ای مانند مایکروسافت با بکارگیری PWA در فروشگاه مایکروسافت صورت گرفته که آینده همه چیزهای PWA در ویندوز 10 را چندان دور از ذهن نخواهد کرد.

ارتباط با برنامه‌های نصب‌شده دیگر

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

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

اگر می خواهید با PWA بازی کنید و ببینید PWA قادر به انجام چه کارهایی است ما به شما وب سایت https://pwa.rocks/ را توصیه می کنیم. بله همانطور که می بینید این وب سایت PWA است و یک مجموعه از اپلیکیشن های PWA با موضوعات مختلف در آن وجود دارد. در آنجا شما می توانید نام های بزرگ مانند Telegram, AliExpress, FlipBoard و بازی های آشنا مانند 2048 یا Web Flap(یک نسخه PWA از بازی قبلی ضربه دار Flappy Bird) پیدا کنید تا ابزارهایی کوچک مانند tuner گیتار، کد QR یا ماشین‌حساب پولی وجود داشته باشد.