اگر تلاش دارید تا یک برگه وب را به صورتی سریع برای کاربران بارگذاری کنید، راه‌حل‌های بسیار زیادی برای‌تان وجود خواهد داشت که به عنوان یک توسعه‌دهنده می‌توانید به آن‌ها دست پیدا کنید. یکی از آن‌ها AMP یا Accelerated Mobile Page است. با استفاده از این تکنولوژی می‌توانید در کسری از ثانیه صفحه وبی که ساخته‌اید را برای کاربران‌تان نمایش دهید. در حقیقت میانگین زمان نمایش وبسایت با استفاده از این تکنولوژی برابر با ۸ دهم ثانیه است. اگرچه AMP به عنوان یک تکنولوژی تعاملی شناخته نمی‌شود اما می‌تواند گزینه بسیار مناسبی برای وبسایت‌های خبری و محتوا محور باشد. از طرفی دیگر PWA مشکل تعاملی نبودن AMP را حل کرده. با استفاده از PWA شما حالتی بهینه‌تر از وبسایت را که قابلیت‌های تعاملی دارد را به کاربران عرضه می‌کنید. PWA وبسایت شما را به مانند یک اپلیکیشن محلی موبایل تبدیل می‌کند.
AMP و PWA را می‌توان به عنوان دو تکنولوژی شناخت که به ما راه‌های مکملی را در جهت رسیدن به صفحات و اهداف مختلف نشان می‌دهند. در این مطلب از وبسایت راکت قصد داریم به شما راهکارهایی را نشان دهیم که با استفاده از آن‌ها می‌توانید این دو تکنولوژی را با همدیگر ترکیب نمایید و به یک نتیجه خارق‌العاده برسید.
اگر قصد دارید که به صورت کامل و پروژه محور با PWA آشنا شوید به شما دوره آموزشی «آموزش ایجاد وبسایت PWA یا Progressive Web Apps» را پیشنهاد می‌کنم.
AMP: Accelerated mobile pages
AMP صفحات وبسایت را به صورتی بسیار سریع نشان می‌دهد. از آنجایی که کار با این تکنولوژی و یادگیری آن بسیار ساده است توسعه‌دهندگان می‌توانند در مدت زمان بسیار کمی با آن به صورت کامل آشنا شوند. AMP می‌تواند ۸۵ درصد سریع‌تر محتوای یک وبسایت را نسبت به حالت عادی به کاربران نشان دهد.
بنابراین تا زمانی که برگه‌های‌تان AMP valid باشد (یعنی از کدهای معتبر و استانداردی استفاده کند) مطمئن خواهید بود که کارایی و صفحات وبسایت با مشکلی روبرو نیستند. برای اینکه از ساختاری استاندارد بهره ببرید پیشنهاد می‌کنم المان‌های اصلی فریمورک را از طریق مستندات آن مطالعه کنید: AMP HTML، AMP JS و AMP Cache. در پایان نیز برای اینکه مطمئن باشید از چیزی را فراموش نکرده‌اید و تمام المان‌ها را به درستی قرار داده‌اید می‌توانید از AMP Validator استفاده کنید.
بسیار مهم است که با هر بار تغییر در ساختار کدها AMP را تست کنید. این کار نتیجه بهتری را برای شما حاصل خواهد کرد.
PWA: Progressive Web Apps
PWA به شما قابلیت تبدیل کردن یک وب اپلیکیشن به یک وب اپلیکیشن موبایل با المان‌های نیتیو را می‌دهد. بسیار مهم است که یک وبسایت مانند یک وب اپلیکیشن محلی ظاهر شود. PWAها در بارگذاری سریع هستند و همچنین قابلیت‌هایی مانند دسترسی آفلاین را به شما می‌دهند. این دسته از اپلیکیشن‌ها امنیت بالایی دارند و همچنین می‌توانند به صورت یک آیکون در صفحه اصلی موبایل ظاهر شوند.
در PWA المانی تحت عنوان Service Workers وجود دارد که باعث می‌شود تا تجربه‌ای پایدار از اپلیکیشن را داشته باشید. منظور از تجربه پایدار آن است که اگر شبکه کاربر ضعیف و یا حتی قطع باشد باز هم می‌تواند دسته‌ای از اطلاعات را برای وی بارگذاری نماید. از آنجایی که در PWAها دسترسی به یکسری API مانند Push notification، Permissions و… وجود دارد می‌تواند در بعضی از حالت‌ها جایگزین مناسبی برای اپلیکیشن‌های موبایل باشد.
می‌توان گفت که PWAها تجارت شما را به مرحله بسیار بالاتری می‌برند. چرا که هزینه پیاده‌سازی آن‌ها ناچیز است و همچنین تجربه کاربری و خروجی دریافت شده از آن بسیار ارزشمند خواهد بود. همچنین از آنجایی که این اپلیکیشن‌ها نیازی به نصب از طریق گوگل پلی و… را ندارند کاربران بیشتر تمایل به استفاده از آن‌ها خواهند داشت. آن‌ها وارد وبسایت شما می‌شوند و گزینه Add to home screen را می‌بینند. به محض انتخاب آن اپلیکیشن روی موبایل‌شان قرار می‌گیرد.
چگونه AMP و PWA را ترکیب کنیم؟
از آنجایی که AMP و PWA هر دو تکنولوژی‌های مربوط به دنیای وب هستند و هر کدام راه متفاوتی را برای دستیابی به هدفی متفاوت برمی‌دارد ابتدا نیاز است که به صورت جداگانه به قدرت هر کدام پی ببریم و المان‌های منحصر به فرد آن‌ها را درک کنیم.
AMP قابلیت نمایش محتوا به صورتی بسیار سریع و با یک استایل پیشفرض، بدون زحمت چندانی به ما عرضه می‌کند. از طرفی دیگر PWA ویژگی‌های حرفه‌ای‌تر و پیچیده‌تری را ارائه می‌کند. PWA نیز مانند AMP در بارگذاری سریع است اما قابلیت‌هایی مانند دسترسی آفلاین و API را دارد. البته باید گفت که در اولین بارگذاری PWA حریف AMP نمی‌شود چرا که AMP صرفا محتوای صفحه را در قالبی بهینه برمی‌گرداند.
اما حال می‌توان با ترکیب این دو مورد به تجربه‌ای بسیار سریع و جذاب از وب رسید. در این قسمت از مطلب قصد داریم با دو قدم ساده این کار را انجام دهیم:
۱. وبسایت‌تان را با AMP ایجاد کنید
ابتدای کار از قدرت AMP در وبسایت‌تان بهره بگیرید. البته لازم نیست که کل وبسایت‌تان را شامل این گزینه کنید، می‌توانید به صورت منحصر به فرد یک برگه را در نظر بگیرید. زمانی که AMP به صورت کامل و درست ایجاد شد می‌توانید خروجی را به صورت یک صفحه سریع مشاهده کنید.
حال برای اینکه بتوانید AMP را با PWA ادغام کنید نیاز است که از یک کامپوننت AMP به نام amp-install-service-worker استفاده کنید. این کامپوننت می‌تواند یک سرویس ورکر را از هر صفحه‌ای در AMP نصب کنید.
این کار باعث می‌شود تا سرویس ورکر بتواند از طریق AMP cache نصب شود. در این حالت بدون اینکه وبسایت شما متوقف شود در هر بار که صفحه AMP اجرا می‌شود سرویس ورکر نیز شروع به اجرا شدن می‌کند. حال آمادگی لازم برای ایجاد یک PWA را خواهیم داشت.
۲. ادغام با PWA
بعد از پیاده‌سازی AMP و سرویس ورکرها حال نوبت آن است که ویژگی‌های PWA را پیاده‌سازی کنید. شما سرویس ورکر را در اختیار دارید بنابراین مشکلی از بابت ادغام کردن دو تکنولوژی با همدیگر نخواهید داشت.
در پایان
بهترین تیم‌های طراحی و توسعه وب آن‌هایی هستند که همواره بتوانند از تکنولوژی‌های مدرن بهترین استفاده‌ها را برای بالا بردن تجربه کاربری بکنند. AMP و PWA قابلیت بهینه کردن تجربه کاربری را دارند بنابراین بهتر است که از آن‌ها استفاده کنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید