مرا اسکن کن!
چندین سال قبل زمانی که هنوز تلفن های هوشمند فراگیر نشده بودند، وب سایت ها فقط برای نمایش در دسکتاپ که منظور همان مانیتورهای ال سی دی یا ال ای دی، لپ تاپ ها، نوت بوک ها و سایر دستگاه هایی که صفحه نمایش آنها بزرگ بود، بهینه سازی می شدند.
منظور از بهینه سازی، بهینه از لحاظ به نمایش درآمدن سایت ها در دستگاه هایی که ذکر کردم می باشد. بعد از اینکه تلفن های هوشمند بطور وسیع و گسترده مورد استفاده قرار گرفت، تا مدتی سایت ها قابلیت نمایش مطلوب در موبایل را نداشتند. و کل عرض وبسایت در صفحه نسبتا کوچک موبایل به نمایش در می آمد. که طبعا تجربه کاربری خوبی را به بازدیدکننده سایت منتقل نمی کرد و کاربر مجبور بود تا با زوم کردن، تصاویر را مشاهده و متون وبسایت را درشت تر ببیند.
با فراگیر شدن استفاده از تلفن های هوشمند یا Smart Phone ها ترافیک ورودی وبسایت ها از طریق این تلفن ها افزایش یافت تا جایی که در پایان سال ۲۰۱۶، بیشتر از ۶۰ درصد کاربران اینترنت، توسط موبایل به گشت و گذار دز فضای مجازی و دنیای دیجیتال پرداختند.
در سال ۲۰۱۲ برای اولین بار Bootstrap مورد استفاده قرار گرفت. تکنیک یا فریم ورکی که قابلیت واکنشگرایی را به یک وبسایت اضافه می نمود. در اصل صفحه سایت به دوازده ستون تقسیم می شد که به آن گرید Grid یا شبکه می گفتند. توضیح در مورد Bootstrap بسیار زمان بر و از موضوع این مطلب خارج است.
با نصب این فریمورک، زمانی که یک بازدیدکننده توسط موبایل وارد یک صفحه از سایت می شد، رزولوشن Resolution صفحه کاربر شناسایی می شد و بر اساس ابعاد صفحه نمایش کاربر، سایت به نمایش درمی آمد.
این فریمورک توانسته بود مسئله نمایش سایت در دستگاه های مختلف را حل کند و باعث شود تا بازدیدکننده، تجربه خوبی از سایتی که از تکنولوژی واکنشگرا استفاده می کرد را بدست آورد.
تجزیه و تحلیل ها و آنالیز رفتار کاربرانی که با موبایل از یک سایت دیدن می کنند، نگرانی جدیدی را بوجود آورد. تحلیلگران متوجه شدند مهمترین عاملی که باعث ترک سریع سایت توسط بازدیدکننده می شود، سرعت پائین نمایش سایت است.
آنها به این نتیجه رسیده بودند که بیشتر کاربران بیشتر از ۳ ثانیه منتظر نمیمانند و اگر سایت در این مدت زمان بارگزاری نشود، سایت را ترک می کنند. رفتاری که باعث شد تا تکنیکی به نام AMP یا Accelerated Mobile Pages متولد شود
با توجه به توضیحی که در پاراگراف قبل مطالعه فرمودید، توسعه دهندگان وبسایت ها به فکر افتادند تا آنجایی که امکان دارد، سرعت نمایش سایت را افزایش و زمان بارگزاری یک صفحه وب را کاهش دهند.
تکنیکی با نام AMP یا Accelerated Mobile Pages معرفی شد. استفاده از این تکنیک در صفحات وب سرعت لود سایت را بسیار افزایش می داد. در ادامه مختصرا به نحوه عملکرد این تکنولوژی می پردازم.
زمانی که یک وب سایت از AMP برای افزایش سرعت نمایش استفاده می کرد، قسمت های اضافی صفحه مثل، هدر، فوتر، تبلیغات، آیکونها و مواردی که نمایش آنها ضرورتی نداشتند را حذف و CSS را غیر فعال می کرد تا فقط متن و تصاویر مرتبط با آن به نمایش دربیایند.
برای مثال فرض میکنیم شما یک صفحه وب که از فونت های فارسی در آن استفاده کرده اید را با استفاده از AMP برای نمایش در تلفن های هوشمند بهینه کرده اید. زمانی که یک بازدید کننده این صفحه را از طریق موبایل خود مرور می کند، فونت صفحه به فونت ابتدایی مانند Arial تغییر پیدا کرده و فونت فارسی بارگزاری نمی شود.
این موارد باعث افزایش سرعت نمایش سایت در تلفن های هوشمند می شد. ولی هنوز هم سرعت مطلوب بدست نیامده بود و این مورد باعث شد تا تکنولوژی جدیدی بنام PWA یا Progressive Web Apps توسط گوگل معرفی شود.
گوگل در سال ۲۰۱۶ این تکنولوژی را معرفی کرد. تکنولوژی که سایت هایی مانند Alibaba ، West Elm ، Housing از آن در حال استفاده هستند. با استفاده از تکنولوژی PWA، سرعت لود یک وبسایت به حدود ۰٫۳ (سه دهم) ثانیه رسید.
تکنولوژی Progressive Web Apps در توسعه اپلیکیشن های اندروید (Android) و IOS و Web مورد استفاده قرار می گیرد.
در این مطلب به توضیح PWA برای استفاده در توسعه صفحات وب می پردازم.
زمانی که یک سایت از این تکنولوژی استفاده می کند، هنگامی که بازدیدکننده توسط تلفن هوشمند خود وارد سایت می شود، اینگونه بنظر می رسد که یک اپلیکیشن را اجرا نموده است.
اولین بار که سایت در تلفن کاربر بطور کامل لود شد، یک نسخه کش از سایت در گوشی کاربر ذخیره می شود که باعث در دسترس بودن سایت در مواقعی که کاربر به اینترنت متصل نیست، می شود.
Push Notification یکی از پرکاربردترین قابلیت های PWA می باشد. هر بار که یک سایت در تلفن هئشمندی مشاهده شود، از آن به بعد، می توان از طریق Push Notification برای آن کاربر پیام ارسال کرد.
قالب بندی سایت با استفاده از PWA به گونه ایست که همه اجزای سایت در جای مناسب خود قرار گرفته و به نمایش در می آید.
حتی این امکان وجود دارد که آیکونی بر روی دسکتاپ تلفن هوشمند کاربر قرار بگیرد و هر زمان که کاربر روی آن تپ کند، سایت به نمایش در می آید و همانند یک اپلیکیشن عمل می کند.
Progressive Web Application یا PWA یک وب اپلیکیشن است که با مرورگرهای امروزی سازگاری دارد ( با مرورگر های قدیمی هم کار میکند اما در مرورگرهای جدید قابلیت اجرا به عنوان یک اپلیکیشن را دارا می باشند ) و تجربه کاربری مانند یک اپلیکیشن را به کاربر الغا میکند.
ما با بهینه کردن سایت خود برای PWA کاربران موبایل با سرعت زیادی به سایت دسترسی پیدا میکنند و میتوانند بدون نیاز داشتن به مارکت اپلیکیشن را نصب کنند و از همه مهم تر نصب پیچیده ای هم نداره!! فقط کافیه کاربر بر روی Home Screen خود قرار بدهد. تعامل بیشتر با کاربران شاید دلیلی خیلی خوبی باشه برای استفاده از PWA که شما قادر هستید مانند یک اپلیکیشن نصب شده بر روی دیوایس کاربر برای کاربران خود Push Notification ارسال کنید. دلیل بعدی میتونه این باشه که اگر کاربر به هر دلیلی آفلاین شد و اتصال اینترنت خود را از دست داد اپلیکیشن قادر باشه به صورت آفلاین فعالیت کند و دیگه تصویر دایناسور (Donwasour) کروم ظاهر نمیشه
ریسپانسیو : رکن اصلی سایت برای PWA ریسپانسیو بودن اپلیکیشن هستش که برای صفحه نمایش کاربران مختلف موبایل و تبلت خود را وفق دهند.
سریع : اکثر کاربران کاسه صبرشان تا ۳ ثانیه می باشد و اگه بیشتر طول بکشه سریع تب رو میبندند برای همین در PWA اپلیکیشن بلافاصله با سرعت زیادی اجرا می شود و اگر کاربر مشکل سرعت داشته باشد با آیکون دایناسور رور به رو نمیشید.
آفلاین : کاربران میتوانند به صورت آفلاین از اپلیکیشن استفاده کنند پس دغدغه ای ندارید که اگه اینترنت در دسترس نبود اپلیکیشن چطور واکنش نشان دهد.
تعامل با کاربران : یکی از مزایای خوبی که دارد میتوانید برای کاربران خود Push Notification ارسال کنید و شک نکنید که کاربران شما بیشتر به اپلیکیشن سر میزنند و نرخ تبدیل شما افزایش پیدا میکند.
هوم اسکرین : مانند بقیه اپلیکیشن ها بر روی هوم اسکرین قرار میگیرد و فرقی از نظر ظاهری با یک اپلیکیشن بومی ( Native Application ) ندارد.
web app Manifest ( یک فایل حاوی json می باشد که وظیفه اش تنظیمات نحوه نمایش وب اپلیکیشن بر روی هوم اسکرین کاربر را دارد )
Service worker ( شامل یک فایل جاوا اسکریپت که در پست زمینه فعال می باشد و وظیفه ی هندل کردن اپلیکیشن در حالت آفلاین و دریافت اطلاعات از سرور را دارد )
نکته : برای استفاده از PWA باید SSL داشته باشید و سایت از پروتوکل HTTPS استفاده کند و همینطور Service Worker تنها به HTTPS پاسخ گو می باشد
وحید صمدیان
برچسب ها : تکنولوژی های طراحی وب
آینده وب در دستان تکنولوژی پیشرونده وب هستش... Progressive Web App ممنون از مقاله خوبتون. با پیشرونده کردن وب سایت ها، ارزش وب بیشتر از الان خواهد شد.
هر كسی می تواند كدی بنويسد كه يک كامپيوتر آن را درک كند. يک برنامه نويس خوب كدی را می نويسد كه برای ساير همكارانش قابل درک باشد. 
