سئو
اسفند ۱۹, ۱۳۹۵
خصوصیات فردی را فراموش کنید، به رفتار توجه کنید
اسفند ۲۱, ۱۳۹۵

PWA مخفف Progressive Web Apps

PWA تکنولوژی برای نمایش سایت در تلفن های هوشمند

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

مقدمه پیدایش تکنیک واکنشگرا

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

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

Bootstrap یک ابزار برای واکنشگرا نمودن وب سایت(Responsive)

با فراگیر شدن استفاده از تلفن های هوشمند یا Smart Phone ها ترافیک ورودی وبسایت ها از طریق این تلفن ها افزایش یافت تا جایی که در پایان سال ۲۰۱۶، بیشتر از ۶۰ درصد کاربران اینترنت، توسط موبایل به گشت و گذار دز فضای مجازی و دنیای دیجیتال پرداختند.

در سال ۲۰۱۲ برای اولین بار Bootstrap مورد استفاده قرار گرفت. تکنیک یا فریم ورکی که قابلیت واکنشگرایی را به یک وبسایت اضافه می نمود. در اصل صفحه سایت به دوازده ستون تقسیم می شد که به آن گرید Grid یا شبکه می گفتند. توضیح در مورد Bootstrap بسیار زمان بر و از موضوع این مطلب خارج است.

با نصب این فریمورک، زمانی که یک بازدیدکننده توسط موبایل وارد یک صفحه از سایت می شد، رزولوشن Resolution صفحه کاربر شناسایی می شد و بر اساس ابعاد صفحه نمایش کاربر، سایت به نمایش درمی آمد.

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

سرعت نمایش صفحات سایت

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

آنها به این نتیجه رسیده بودند که بیشتر کاربران بیشتر از ۳ ثانیه منتظر نمیمانند و اگر سایت در این مدت زمان بارگزاری نشود، سایت را ترک می کنند. رفتاری که باعث شد تا تکنیکی به نام AMP یا Accelerated Mobile Pages متولد شود

AMP یا Accelerated Mobile Pages و سرعت نمایش سایت

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

تکنیکی با نام AMP یا Accelerated Mobile Pages معرفی شد. استفاده از این تکنیک در صفحات وب سرعت لود سایت را بسیار افزایش می داد. در ادامه مختصرا به نحوه عملکرد این تکنولوژی می پردازم.

زمانی که یک وب سایت از AMP برای افزایش سرعت نمایش استفاده می کرد، قسمت های اضافی صفحه مثل، هدر، فوتر، تبلیغات، آیکونها و مواردی که نمایش آنها ضرورتی نداشتند را حذف و CSS را غیر فعال می کرد تا فقط متن و تصاویر مرتبط با آن به نمایش دربیایند.

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

این موارد باعث افزایش سرعت نمایش سایت در تلفن های هوشمند می شد. ولی هنوز هم سرعت مطلوب بدست نیامده بود و این مورد باعث شد تا تکنولوژی جدیدی بنام PWA یا Progressive Web Apps توسط گوگل معرفی شود.

PWA یا Progressive Web Apps تحولی در نمایش سایت در موبایل

گوگل در سال ۲۰۱۶ این تکنولوژی را معرفی کرد. تکنولوژی که سایت هایی مانند Alibaba ، West Elm ، Housing از آن در حال استفاده هستند. با استفاده از تکنولوژی PWA، سرعت لود یک وبسایت به حدود ۰٫۳ (سه دهم) ثانیه رسید.

تکنولوژی Progressive Web Apps در توسعه اپلیکیشن های اندروید (Android) و IOS و Web مورد استفاده قرار می گیرد.

در این مطلب به توضیح PWA برای استفاده در توسعه صفحات وب می پردازم.

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

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

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

فرض کنید دیجی کالا که روزانه ترافیک زیادی وارد سایت این کمپانی می شود، از این تکنولوژی استفاده کند. روزانه چند میلیون کاربر با تلفن هوشمند وارد سایت Digikala می شوند. یعنی دیجیکالا می تواند برای میلیونها نفر و روی تلفن همراهشان پیام ارسال کند!

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

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

این بود کلیات تکنولوژی PWA. امیدوارم از مطالعه این مقاله لذت برده باشید.

خلاصه این مطلب در فابل صوتی زیر قابل گوش دادن و دانلود می باشد.

Listen to “Website Journey” on Spreaker.
در پست های بعدی تکنولوژی Progressive Web Apps را با جزئیات بیشتری توضیح خواهم داد…

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

با سپاس

کورش نیکزاد – مشاور و کارشناس دیجیتال مارکتینگ و شبکه های اجتماعی

 

 

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

پاسخ دهید

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