Kaptain Kitty
انتشار :۲۹ شهریور ۱۳۹۵
بازدید :435 بار

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

همه ی این موارد فوق العاده به نظر میرسد… اما وب اپلیکیشن های progressive دقیقا چیست؟

“در واقع وب اپلیکیشن های progressive از قابلیت های وب مدرن برای ایجاد تجربه ی شبه اپلیکیشنی برای کاربر استفاده می کند”.

اپلیکیشن های native موجود در app store ها کارهایی مانند ارسال ناتیفیکیشن، آفلاین کار کردن، داشتن ظاهر و احساس یک اپلیکیشن (همانطور که اپل و گوگل آنها را تصور کرده بودند)، بارگذاری بر روی صفحه ی Home و غیره را انجام می دهند. موبایل اپلیکیشن هایی که در مرورگر موبایل قابل دسترس هستند، در مقایسه با این نوع اپلیکیشن ها، در گذشته چنین کارهایی را انجام نمی داده اند. وب اپلیکیشن های progressive با استفاده از web API های جدید، مفاهیم جدید در طراحی و فناوری جدید این مشکل را رفع می کند.

اگر بخواهم شفاف تر بگویم، این یک تکنولوژی جدید است که بهترین قابلیت های اپلیکیشن های native را با بهترین قابلیت های اپلیکیشن های موبایل وب در هم آمیخته.

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

وب اپلیکیشن های progressive ویژگی هایی که از اپلیکیشن های native انتظار داریم را به تجربه ی کار را اپلیکیشن های مرورگر موبایل می افزاید، به گونه ای که از تکنولوژی های استاندارد استفاده کرده و در فضایی امن که قابل دسترسی برای هر فردی در وب باشد اجرا شود.

به طور کلی، وب اپلیکیشن های progressive مجموعه ای از تکنولوژی ها، مفاهیم طراحی و web API هایی را تعریف می کنند که پشت سر هم کار می کنند تا تجربه ی شبه اپلیکیشنی را در موبایل وب به ارمغان بیاورند. بیایید به برخی از اصول کلیدی وب اپلیکیشن های progressive بپردازیم.

Service worker

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

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

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

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

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

سرویس ورکر ها در اندروید دارای کروم ۵۰ موجود بوده و در حال حاضر توسط سایر مرورگر های بزرگ موبایل پشتیبانی نمی شوند.

App Shell

مدل app shell یک مفهوم ساده در طراحی است که از طریق آن، در بارگذاری اولیه ی وب اپلیکیشن موبایل یک پوسته یا shell اولیه از UI اپلیکیشن ایجاد می شوند و محتوای آن اپلیکیشن بعدا بارگذاری می شوند. App shell یک web API یا یک فریم ورک نیست بلکه یک رویکرد طراحی است که برنامه نویسان می توانند آن را برای استفاده از مواردی که با استفاده از توانایی های caching سرویس ورکر ها ارتقا می یابد انتخاب کنند. ممکن است این مدل را بسیار سر راست و ساده ببینید، رویکردی آشکار که با استفاده از یک buzzword، هیجان انگیزتر هم می شود.

با استفاده از مدل app shell، ما بر روی حفظ پوسته ی UI اپلیکیشن خود و جدا نگه داشتن محتوای درون آن تمرکز کرده و می توانیم آنها را به صورت جداگانه cache کنیم. در حالت ایده آل، وقتی کاربر از اپلیکیشن بازدید کرده و بعدا دوباره به اپلیکیشن باز می گردد، app shell تا جایی که امکان دارد سریع بارگذاری می شود. از لحاظ تئوری، وقتی پوسته و محتوا به صورت جداگانه بارگذاری می شوند، باعث ارتقاء ادراک کاربر از عملکرد و کارایی اپلیکیشن می شود.

به عنوان مثال وقتی از آیونیک استفاده می کنیم، می توانیم قسمت های مختلف اپلیکیشن آیونیک خود را (tab ها، کنترلر navigation، منوی طرفین و غیره) بلافاصله بارگذاری کرده، آن را از طریق یک سرویس ورکر cache کرده و سپس پس از آنکه پوسته ی اپلیکیشن بارگذاری شد، محتوا را از طریق JS واکشی و به روزرسانی کنیم.

وقتی پشتیبانی بیشتری از PWA (مخفف Progressive Web App) را به آیونیک اضافه می کنیم، می توانیم انتظار داشته باشیم که رویکرد app shell یک روش جدید برای تمام اپلیکیشن های آیونیک باشد که با استفاده از دستورالعمل های از پیش آماده شده ی سرویس ورکر ها برای عمل caching، پشتیبانی آفلاین و نوسازی محتوا در پشت صحنه، به عنوان وب اپلیکیشن های موبایل چیدمان شده اند.

وب اپلیکیشن های پیش رونده یا همان Progressive web application

وب اپلیکیشن های پیش رونده یا همان Progressive web application

قابلیت نصب و فهرست اپلیکیشن

اصولا وب اپلیکیشن های موبایل مانند یک اپلیکیشن native در صفحه ی home نصب نمی شوند. مطمئنا کاربر می تواند یک وب سایت موبایل را در صفحه ی اصلی خود بر روی iOS یا آندروید pin کند اما این تجربه در درجه اهمیت دوم قرار می گیرد زیرا اپلیکیشن باز هم با ویژگی هایی که از اپلیکیشن های native انتظار داریم اجرا نخواهد کرد.

این امر در حال تغییر و تحول است. اخیرا کروم با استفاده از بنر نصب native بر روی اندروید قابلیت پشتیبانی از نصب وب اپلیکیشن ها بر روی صفحه اصلی موبایل (دسکتاپ) را اضافه کرده است، درست مانند بنر های اپلیکیشن های native که قبلا از آنها استفاده می کردیم.

برای اینکه به کروم بگوییم وب سایت موبایل ما درست مانند یک اپلیکیشن، قابل نصب است، یک فایل manifest.json نوشته و از صفحه ی اصلی HTML خود به آن لینک می دهیم.

در حال حاضر iOS هیچ ویژگی دیگری به جز pin کردن به صفحه ی اصلی ندارد بنابراین تجربه ی کاربر خیلی روان نخواهد بود اما امیدواریم امسال اپل کمی خوشحالمان کند.

نتیجه گیری

وب اپلیکیشن های progressive بخش هایی برابر از web API های جدید، الگوهای طراحی و نکته های بازاریابی را در خود دارند. موبایل وب با استفاده از فهرست اپلیکیشن و پشتیبانی از نصب در صفحه ی اصلی، کارایی سرویس ورکر ها در پشت زمینه، زمان بارگذاری سریع تر با استفاده از app shell و عقیده ی جدید مبنی بر اینکه برنامه نویسان وب هم می توانند موبایل اپلیکیشن های سرگرم کننده ای بسازند، به برابری با اپلیکیشن های قابل نصب اپ استورها نزدیک شده اند.

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

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

PWA یا همان Progressive Web App Service worker تکنولوژی سرویس ورکر فریم ورک برنامه نویسی آیونیک وب اپلیکیشن های progressive وب اپلیکیشن های پیش رونده وب اپلیکیشن های حرفه ای
مطالب مرتبط

یکی از معضلات برنامه نویسی وب برای موبایل این است که سرعت اجرای وب اپلیکیشن ها روی مرورگر ها کم و نسبتا آزاردهنده است. البته راه های زیادی برای حل این مشکل وجود دارد. یکی از این راه ها استفاده از ابزار Google AMP می باشد. این پروژه به طور رسمی در ۷ اکتبر سال […]

Vue Devtools پیش از آنکه به اپلیکیشن پیچیده تر Vue بپردازیم، حالا بهترین زمان برای ذکر این نکته است که باید حتما Vue Devtools را نصب کنید. این ابزار ها در بخش developer tools مرورگر کروم قرار می گیرند و می توانید با استفاده از آنها به خوبی اپلیکیشن خود را تحت کنترل داشته باشید […]

سال ۲۰۱۶ بر طبق دیدگاه شما سالی به یاد ماندنی، عجیب و تا حدی سرشار از پیروزی و یا وحشت آور بوده باشد. تمرکز به تنهایی بر روی جاوا اسکریپت در مقایسه با سایر رویداد های سال ۲۰۱۶ ممکن است نامعقول و کم اهمیت به نظر برسد اما جاوا اسکریپت بخش عظیمی از زندگی کاری […]

از کدام مرورگر برای کارهای روزانه ی برنامه نویسی اتان استفاده می کنید؟ قطعا یا Chrome و یا Firefox و می دانم که عده ی زیادی از مرورگر کروم استفاده می کنید. البته این سوال بیشتر، از برنامه نویسان کلاینت (جاوااسکریپت) پرسیده می شود. خود من از کروم استفاده می کنم. چرا که استانداردهای وب […]

  1. وحید گفت:

    مطلب خیلی خوبیه.

    1. Summit گفت:

      سلام، ان شالله که مفید واقع شده باشه.

  2. وحید گفت:

    مطلب خیلی خوبیه. لطفا بیشتر در مورد الگوهای جدید طراحی, تکنولوژی‌های آینده, AngularJS و First API Design بنویسید. ممنون♥

    1. Summit گفت:

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

  3. رسول گفت:

    سلام شما وبسایتی ایرانی سراغ دارید که این کار رو انجام داده باشه؟

نظراتتان را برایمان بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب ما تو این شبکه های اجتماعی هم پخش میشه