وب اپلیکیشن های پیش رونده دقیقا چه هستند؟

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

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

ایجاد کننده سرویس :

جز اصلی، بسیار مهم و جذاب این اپلیکیشن ها اسکریپت ایجاد کننده سرویس نام دارد. این اسکریپت در بین  درخواست های سایت و سرور های اینترنتی در سراسر دنیا به عنوان یک لایه ی اضافی مشغول به کار است.

این اسکریپت همچنین وظیفه دارد، زمانی که برگه ای با PWA فعال توسط کاربر دیده شد، اطلاعات مربوط به صفحه را دریافت کند و به صورت محلی روی دستگاه بازدید کننده (موبایل، تبلت و یا کامپیوتر رومیزی) ذخیره کند.

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

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

پوسته اپلیکیشن :

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

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

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

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

قالب JSON

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

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

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

جمع بندی تا این بخش

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

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

در ادامه این مقاله، ما می خواهیم راجع به فواید و کارایی وب اپلیکیشن های پیش رونده بیشتر صحبت کنیم و بهتر بگوییم که چه چیزی از این نوع اپلیکیشن ها انتظار داریم.

اضافه کردن به صفحه خانگی

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

 مطابق با این تحقیقات به نتیجه می رسیم که ۱۱.۵ درصد کاربران از این قابلیت استفاده می کنند. شاید دلیل این باشد که هنوز کاربران نمی دانند این اپلیکیشن ها چه مزیتی برای آنها دارد.

بهبود کارایی در مقایسه با اپلیکیشن موبایل و وبسایت

مطابق با تحقیقاتی که گوگل در نتیجه بنچمارک و تحلیل های خود روی چندین وبسایت مختلف انجام داده است، وبسایت هایی که از قابلیت PWA بهره می برند، مدت زمان لود شدن صفحات وبسایت بسیار کاهش می یابد. در این تحقیقات نشان داده شده که برای کاربران دسکتاپ ۳۰ درصد و برای کاربران موبایل ۲۲ درصد کاهش زمان داشته است.

این مطالعات نشان می دهد که اینگونه وبسایت ها نسبت به مقادیر آماری دیگری نیز جلوه مثبت گذاشته و تاثیر گذار خواهد بود. این موضوع حتی می تواند برای کاربرانی که با شبکه های کند تر مانند 2G , 3G مشغول وب گردی هستند، فایده داشته باشد.

امکان استفاده تمام عیار در حالت آفلاین از وبسایتی که وجود دارد

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

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

گزینه ای که کاربران را قادر می سازد از هشدار ها و دریافت بروزرسانی ها خبر دار شوند

یکی دیگر از امکانات خوبی که این دسته از اپلیکیشن ها در اختیار شما قرار می دهند امکان استفاده از حالت هشدار ها می باشد. اگر کاربری اپلیکیشن مربوطه را نصب کند، می تواند از رویدادهای مهم وبسایت شما خبر دار شود. مطابق با تحقیقات گوگل ۵۸ درصد از کاربرانی که این دسته از اپلیکیشن را روی دستگاه خود نصب کرده اند اجازه فرستادن هشدار را تایید نموده اند.

محتوا می توانند لینک شوند و موتورهای جستجوگر محتوا را به خوبی نمایش می دهند

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

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

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

نقص ها

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

ایجاد کننده سرویس در تمام مرورگر ها پشتیبانی نمی شود

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

فروشگاه اپلیکیشن در کار نخواهد بود

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

دسترسی محدود به API سخت افزاری

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

پیدا کردن توسعه دهنده حرفه ای PWA سخت است

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

نتیجه گیری :

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

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

منبع