مقایسه AMP و PWA و طراحی ریسپانسیو

دراین مقاله به مقایسه ی وب اپلیکیشن و وب تسریع شده،مقایسه AMP و PWA و طراحی ریسپانسیو میپردازیم و در آخر متوجه میشویم که کدام یک از تکنولوژی‌های PWA یا AMP پرکاربرذترواقع شده است؟

PWA (وب اپلیکیشن)

یک برنامه وب پیش‌رونده (progressive web app) یا PWA، مزایای برنامه‌های وب و اپلیکیشن های موبایل را در یک محصول نرم‌افزاری واحد ادغام می‌کند. همانگونه که google اعلام میدارد، PWA ها “تجربیات کاربرانی هستند که به وب دسترسی دارند و قابل اعتماد، سریع و جذاب هستند”. این فناوری است که به شما این امکان را می‌دهد که از وبسایت استفاده کنید، گویی که یک برنامه بومی است.وب اپلیکیشن‌های پیش رونده (PWA) نسل جدیدی از اپلیکیشن‌های تحت وب هستند که از آن ها می توان به عنوان متحول کننده آینده‌ی اپلیکیشن‌های موبایل نم برد.

AMP

AMP مخفف صفحه وب تسریع شده (accelerated mobile page) است. که یک صفحه وب سازگار با موبایل است وبه گونه‌ای طراحی شده ‌است که فورا بارگیری می شود. در ابتدا به عنوان یک پروژه متن‌باز معرفی شده بود و سپس در سال 2016 توسط GOOGLE ادغام شد. ایده AMP این است که میزان محتوای و امکانات‌ غیرضروری را کاهش دهد تا برنامه بلافاصله محتوای اصلی را نمایش دهد. داده‌ها را می‌توان تا ده برابر کاهش داد. سه مؤلفه اساسی AMP عبارتند از: AMP HTML ،AMP Component و AMP Cache.

AMP HTML یک نسخه ساده از HTML معمولی است. AMP HTML به برخی از برچسب‌ها و عناصر HTML (به عنوان مثال، فرم‌ها) اجازه اجرا نمی‌دهد.کامپوننت‌های AMP اسکریپت‌هایی هستند که شما را قادر می‌سازد بدون جاوا اسکریپت کارها را انجام دهید. ایده AMP خلاص شدن از شر همه اسکریپت‌های جاوااسکریپت است چون باعث می‌شود که سرعت لود صفحات کاهش یابد.

طراحی ریسپانسیو (واکنش گرا)

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

نتایج یک تحقیق نشان می‌دهد که کاربران معمولی تقریبا 80 درصد از زمان خود را صرف استفاده از تنها 3 اپلیکیشن می‌کنند. برای مثال، بیشتر افراد معمولا از یک اپلیکیشن پیام‌رسان (تلگرام یا واتساپ)، یک مرورگر (کروم) و یک اپلیکیشن شبکه‌های اجتماعی (اینستاگرام، فیسبوک یا توییتر) بیشتر از دیگر اپ‌ها استفاده می‌کنند. دیگر اپلیکیشن‌ها نیز اکثر اوقات بلااستفاده باقی می‌مانند و تنها حافظه‌ی رم و حافظه‌ی داخلی گوشی را بی‌جهت مصرف و اشغال می‌کنند. علاوه بر این، هزینه‌ی توسعه‌ی یک اپلیکیشن در مقایسه با ساخت یک وب‌سایت برای ارائه‌ی همان سرویس، معمولا ۱۰ برابر بیشتر است. همچنین، در صورتی که توسعه‌دهنده قصد توسعه و حفظ بیس کد (پایگاه کد) مجزا برای پلتفرم‌های مختلف نظیر اندروید، IOS و وب را داشته باشد، این هزینه‌ها بیش از پیش افزایش خواهد یافت.

مقایسه AMP و PWA که چه شباهت هایی دارند؟

PWA و AMP هر دو روشی برای نمایش صفحات وب در گوشی های موبایل هستند. هر دو آن‌ها برای بهبود تجربه کاربر ایجاد شده‌ است. AMP و PWA هر دو به کاهش زمان بارگذاری صفحه کمک می‌کنند. در حالی‌که ممکن است AMP از نظر سرعت بارگذاری نسبت به PWA کمی سریع‌تر باشد، تفاوت بین زمان بارگذاری AMP و PWA بسیار کم است.هر دو فناوری به طور فعال توسط Google پشتیبانی می‌شوند. یک صفحه PWA در Google Developers و یک صفحه AMP در Google Developers وجود دارد.

مقایسه AMP و PWA که چه تفاوت ‌هایی دارند؟

مقایسه AMP و PWA در ظاهر

با استفاده از PWA احساس نمی‌کنید که از یک صفحه وب استفاده می‌کنید. به‌نظر می‌رسد که یک اپلیکیشن تلفن‌همراه باشد.

با استفاده از amp، شما به خوبی می‌دانید که از یک صفحه وب استفاده می‌کنید چون شبیه آن است.

مقایسه AMP و PWA در توسعه

در مورد PWA، یا از کد برنامه جدا شده است یا با برخی از قسمت‌های کد موجود می‌آید.

در مورد AMPها، کد موجود در یک صفحه وب از CSS و JS غیر ضروری جدا می‌شود تا صفحه وب سریع‌تر بارگیری شود.

مقایسه AMP و PWA در تجربه کاربری

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

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

مقایسه AMP و PWA در کارایی

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

PWA رابطه مستقیمی با سئو ندارد. با این حال، به دلیل این که تجربه کاربری بهتری ارائه می‌دهد باعث می‌شود که سئوی صفحه بهبود پیدا کند.

مقایسه AMP و PWA در پشتیبانی

PWA در همه دستگاه‌ها به یک اندازه پشتیبانی نمی‌شوند، بنابراین ممکن است هنگام نمایش در سیستم‌عامل IOS، مشکلاتی به وجود بیاید. همچنین، PWA از تمام قابلیت‌های سخت‌افزاری، مانند بلوتوث، NFC ،GPS یا شتاب‌سنج پشتیبانی نمی‌کنند.

AMP توسط همه مرورگرهای اصلی روی همه دستگاه‌ها پشتیبانی می‌شود.

برنامه‌هایی که مناسب AMP و PWA هستند

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

چرا PWA بهتر از صفحات وب است؟

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

چرا AMP بهتر از صفحات وب است؟

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

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

برای استفاده از یک برنامه کاربردی تلفن‌همراه، باید آن را در app store یا google play پیدا کنید. پس باید مدتی صبر کنید تا آن را دانلود و نصب کنید. شما ممکن است فضای خالی کافی روی دستگاه خود نداشته باشید، پس باید حافظه موبایل خود را نیز خالی کنید.اما، PWAها در عرض چند ثانیه نصب و آماده استفاده می‌شوند. اندازه فایل کوچک است.همانطور که می‌توانید ببینید، PWA از یک برنامه موبایل یا وبسایت بهتر به نظر می‌رسد. اما شما باید درک کنید که همیشه اینگونه نیست و در بعضی موارد برنامه‌های موبایل خیلی بهتر عمل می‌کنند.

چرا AMP بهتر از برنامه‌های بومی نیست؟

متأسفانه، AMP ها نمی‌توانند جایگزین کاملی برای برنامه‌های موبایل بومی باشند. آن‌ها را نمی‌توان بر روی صفحه اصلی نصب کرد، آن‌ها همچنان شامل تب‌های مرورگر هستند و عملکرد آن‌ها محدود به موارد دیگری است.اما برای یک روزنامه آنلاین یا برای یک وبسایت اطلاعاتی مانند WebMD، بهتر است از AMP استفاده کنید نه یک برنامه بومی تلفن‌همراه. چون برای نمایش محتوای صفحه نیازی به امکانات اضافی نیست.

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

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

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

مقایسه سریع AMP و PWA

در مقایسه AMP و PWA هر دو تکنولوژی‌های قدرتمندی هستند. نتیجه جمع‌بندی برای پرسش اولیه ما – PWA در برابر AMP:

AMP برای توسعه آسان‌تر، سریع‌تر و ارزان‌تر خواهد بود.
PWA مزایای بیشتری ارائه می‌دهد.

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

وب اپلیکیشن‌های پیش رونده واجد ویژگی‌ها زیر هستند:

1-پیش رونده (قابل استفاده در هر دستگاه و سیستم‌عامل):یک وب اپلیکیشن پیش رونده فارغ از نوع مرورگر و نوع دستگاه، برای تمام کاربران قابل استفاده است.

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

3-قابل پیونددهی (لینک‌دهی):وب اپلیکیشن‌ پیش رونده برخلاف اپلیکیشن‌های بومی نیازی به طی کردن مراحل پیچیده‌ی دانلود و نصب ندارند و اشتراک‌گذاری آن‌ها از طریق یک نشانی وب (URL) به راحتی امکان‌پذیر است.

4-انعطاف‌پذیر: رابط کاربری وب اپلیکیشن پیش رونده خود را با هر نوع فرم فکتور اعم از موبایل و دسکتاپ و هر نوع اندازه‌ی نمایشگر تطبیق می‌دهد.

5-ظاهر اپلیکیشن‌وار: یک اپلیکیشن پیش رونده شباهت بی‌بدیلی به اپلیکیشن‌های بومی دارد، از رابط کاربری مشابه آن‌ها استفاده می‌کند و مسیریابی در آن‌ها تفاوتی با اپلیکیشن‌های معمولی ندارد.

5-بی‌نیاز از اتصال اینترنت:وب اپلیکیشن‌ پیش رونده در صورت ضعف اتصال اینترنت یا حتی به صورت آفلاین نیز قابل استفاده هستند.

درگیر کردن کاربر

احتمال آنکه کاربران اپلیکیشن‌های موبایل مجددا از اپلیکیشن‌های خود استفاده کنند بیشتر از احتمال مراجعه‌ی مجدد به یک‌ وب‌سایت است. وب اپلیکیشن‌های پیش رونده با استفاده از ویژگی‌هایی نظیر اعلان‌های سمت سرور (Push Notification)، این ضعف را جبران کرده‌اند.

قابل نصب

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

به‌روز بودن

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

ایمن

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

جمع‌بندی وب اپلیکیشن ها

وب اپلیکیشن پیش رونده هنوز در دوران اولیه‌ی تکامل به‌سر می‌برند و برای محکم کردن جای پای خود راه درازی در پیش دارند. آن‌ها جایگزین اپلیکیشن‌های بومی نخواهند شد؛ با این حال از ظرفیت فوق‌العاده‌ای برای تکامل نحوه‌ی توسعه و استفاده از اپلیکیشن‌های امروزی برخوردارند و میزان نفوذ و همه‌گیری آن‌ها به استقبال توسعه‌دهندگان و البته کاربران بستگی دارد. در مجموع برای قضاوت در مورد آینده‌ی آن‌ها هنوز کمی زود است؛ اما در سال پیش‌رو حتما خبرهای بیشتری از آن‌ها خواهیم شنید.

جمع بندی کلی مقایسه AMP و PWA

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

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

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

هر دو با هم بسیار خوب کار می‌کنند، یعنی می‌توانید یک پوسته برنامه PWA را از مبدا خود با کمک amp-install-serviceworker نصب کنید. این کار کاربران را قادر می‌سازد با کلیک بر روی دکمه تعیین شده در انتهای یک صفحه AMP به راحتی در یک مرورگر PWA تمام عیار حرکت کنند. به همین ترتیب، PWA حتی به دلیل ویژگی‌های AMP، می‌تواند اسناد AMP را نیز در خود جای دهد.