راهنمای توسعه‌دهندگان موبایل به سمت کهکشان: فصل ششم

فصل پنجم را از این جا بخوانید.

فصل ششم: وب موبایل (Mobile Web)

نویسنده: رودان اودونوگو (Ruadhan O'Donoghue)

در حالی که موضوع این کتاب عمدتاً برنامه‌محور (app-oriented) است، بدون صحبت در مورد وب موبایل کامل نخواهد بود. در واقع، مرز بین برنامه‌ها و وب اغلب در اکوسیستمی که در آن برنامه‌ها می‌توانند به طور کامل با فناوری‌های وب ساخته شوند، می‌توانند داده‌ها و محتوای خود را از طریق درخواست‌های API وب دریافت کنند، یا می‌توانند به عنوان پوسته‌های برنامه ساده (app shells) برای چیزی که اساساً یک مرورگر (WebView) است عمل کنند، محو می‌شود. می‌تواند مفید باشد که به یک پیوستار وب-بومی (web-native continuum) فکر کنیم، با بومی (native) در یک انتها و وب (web) در انتهای دیگر، و مدل‌های هیبریدی (hybrid) مختلف در این بین.

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

با این اوصاف، با ویژگی‌های وب مدرن مانند APIهای دستگاه (Device APIs)، اعلان‌های فشاری (push notifications)، برنامه‌های قابل نصب (installable apps)، انیمیشن‌های 60 فریم در ثانیه (60 fps animations)، قابلیت کشف (discoverability)، وب موبایل یک پلتفرم هم توانا و هم قدرتمند است.

استفاده از وب موبایل

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

داده‌ها از ایالات متحده، کاربران بالای 18 سال، منبع: comscore.com

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

دستگاه‌ها، مرورگرها و پراکندگی

وب امروزه عمدتاً از طریق یک مرورگر (browser) در حال اجرا بر روی رایانه دسکتاپ یا دستگاه تلفن همراه تجربه می‌شود. اینجاست که کار برای توسعه‌دهندگان موبایل می‌تواند دشوار شود: اگر پیشینه توسعه وب دسکتاپ دارید و فکر می‌کردید توسعه و آزمایش برای همه مرورگرهای مختلف دسکتاپ سخت است، بهتر است بنشینید؛ اوضاع در موبایل به طور قابل توجهی پیچیده‌تر است.

حداقل به همان تعداد مرورگر موبایل وجود دارد که در دسکتاپ وجود دارد. اما در موبایل، علاوه بر مرورگر روی دستگاه، باید نوع دستگاه و ویژگی‌ها و قابلیت‌های آن را نیز در نظر بگیریم. انواع ویژگی‌ها و قابلیت‌هایی که می‌توانند بر توسعه وب تأثیر بگذارند عبارتند از:

• ویژگی‌های اندازه صفحه مانند ابعاد فیزیکی، نسبت ابعاد (aspect ratio) و تراکم پیکسل (pixel density)
• انواع ورودی مانند صفحه‌کلیدها (keypads)، صفحه‌های لمسی (touchscreens)، قلم‌ها (styli)، میکروفون‌ها (microphones) و دوربین‌ها (cameras)
• حسگرهای فضایی مانند GPS، شتاب‌سنج‌ها (accelerometers)، قطب‌نماها (compasses) و ژیروسکوپ‌ها (gyroscopes)
• قابلیت‌های شبکه مانند WiFi، 3G، LTE و 5G

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

بالاخره مرورگر وب چیست؟

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

علاوه بر همه اینها، مرورگرهای اصلی با مجموعه‌ای از ابزارهای توسعه‌دهنده پیچیده همراه هستند که بینش‌های عمیقی را در مورد عملکرد داخلی، ساختار و عملکرد صفحات وبی که رندر می‌کند، ارائه می‌دهند. ویژگی‌های ابزار توسعه‌دهنده زیادی وجود دارد که به طور خاص به توسعه موبایل کمک می‌کند. بعداً در بخش تست (Testing) در مورد ابزارهای توسعه‌دهنده بیشتر خواهیم دید.

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

مرورگرها و موتورهای رندر (Browsers and Rendering Engines)

در قلب هر مرورگر، مؤلفه‌ای وجود دارد که مسئول چیدمان (laying out) و رندر کردن (rendering) محتوای یک صفحه است. این به عنوان موتور رندر (rendering engine) یا موتور چیدمان (layout engine) شناخته می‌شود.

هر یک از مرورگرهای وب امروزی مبتنی بر یکی از تعداد کمی از موتورهای رندر است. دانستن اینکه یک مرورگر مبتنی بر کدام موتور رندر است می‌تواند به هدایت توسعه و آزمایش کمک کند، زیرا هر مرورگری که موتور رندر یکسانی را به اشتراک می‌گذارد اغلب به طور مشابه رفتار می‌کند: آنها به طور کلی از ویژگی‌های یکسانی پشتیبانی می‌کنند و در عین حال قربانی باگ‌های (bugs) یکسانی می‌شوند.

• گِکو (Gecko): یک موتور منبع باز که در مرورگر فایرفاکس (Firefox) موزیلا (Mozilla) استفاده می‌شود.
• وب‌کیت (WebKit): یک موتور پرکاربرد که سافاری (Safari) و همچنین تمام مرورگرهای اپ استور آی‌او‌اس و قبلاً کروم (Chrome) گوگل را قدرت می‌بخشد. توسط اپل در سال 2001 ساخته شد و در سال 2005 منبع باز شد.
• بلینک (Blink): در سال 2013 گوگل وب‌کیت را - که در کروم از آن استفاده می‌کرد - فورک (fork) کرد تا بلینک را ایجاد کند. بلینک اکنون کروم، اپرا (Opera)، مرورگر اج (Edge) مایکروسافت و تمام مرورگرهای مبتنی بر کرومیوم (Chromium) را قدرت می‌بخشد.
• پرِستو (Presto): (بازنشسته) قبلاً در اپرا استفاده می‌شد (اکنون توسط بلینک قدرت می‌گیرد) و هنوز در اپرا مینی (Opera Mini) استفاده می‌شود.
• اِج‌اِچ‌تی‌اِم‌اِل (EdgeHTML): (بازنشسته) قبلاً در مرورگر اج مایکروسافت استفاده می‌شد (اکنون توسط بلینک قدرت می‌گیرد).
• ترایدِنت (Trident): (بازنشسته) قبلاً در مرورگر بازنشسته اینترنت اکسپلورر (Internet Explorer) مایکروسافت استفاده می‌شد.

برای چه مرورگرهایی باید توسعه دهید؟

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

منبع: gs.statcounter.com

گزارش‌هایی مانند گزارش هوش وب موبایل DeviceAtlas (Mobile Web Intelligence Report) به صورت دوره‌ای تصاویری از چشم‌انداز دستگاه و مرورگر ارائه می‌دهند، داده‌های جالب سهم بازار مانند محبوب‌ترین سیستم‌عامل‌ها، تولیدکنندگان و اندازه‌های صفحه را برجسته می‌کنند و می‌توانند به هدایت تصمیمات مربوط به مرورگرها و هدف‌گیری مرورگر کمک کنند.

اچ‌تی‌ام‌ال، سی‌اس‌اس و جاوااسکریپت: بلوک‌های سازنده وب

تا اینجا فقط دستگاه‌ها و مرورگرها را پوشش داده‌ایم. اکنون بیایید به فناوری‌هایی که برای رندر کردن صفحات وب برای ما استفاده می‌شوند نگاه کنیم: HTML، CSS و جاوااسکریپت (JavaScript).

زبان نشانه‌گذاری HTML: ساختاردهی محتوای وب

اچ‌تی‌ام‌ال زبان نشانه‌گذاری (markup language) وب است. برای ساختاردهی محتوای یک صفحه وب استفاده می‌شود. تغییرات زیادی در طول سال‌ها پدید آمده است. زبان‌های نشانه‌گذاری اولیه موبایل شامل WML و XHTML Mobile Profile هستند. جدیدترین تکرار، HTML5، به اندازه کافی بالغ شده است تا شامل نشانه‌گذاری معنایی (semantic markup)، عناصر سفارشی (custom elements) و APIهای دستگاه باشد و به خوبی در مرورگرهای وب موبایل پشتیبانی می‌شود.

شیوه‌نامه‌ی CSS: استایل‌دهی محتوای وب

سی‌اس‌اس مخفف Cascading Stylesheets (شیوه‌نامه‌های آبشاری) است و برای استایل‌دهی و چیدمان محتوای وب استفاده می‌شود. قوانین CSS ویژگی‌های مختلفی مانند رنگ را با هدف قرار دادن آن عناصر با یک انتخابگر (selector) به عناصر اعمال می‌کنند. انتخابگرها به شما امکان می‌دهند هر عنصر یا گروهی از عناصر را در یک صفحه مشخص کنید، به طوری که کنترل کاملی داشته باشید: CSS می‌تواند برای کارهای کوچک استایل‌دهی مانند تنظیم رنگ متن، تا کارهای بزرگ چیدمان که بر کل چیدمان صفحه تأثیر می‌گذارند، استفاده شود.

سی‌اس‌اس مشخصات متعددی را پشت سر گذاشته است و به ماژول‌های (modules) زیادی تقسیم شده است که هر کدام مشخصات خاص خود را دارند و جنبه‌های متنوعی از CSS از انتخابگرها گرفته تا تبدیل‌ها و انیمیشن‌های سه بعدی (3D transformations and animations) را پوشش می‌دهند. CSS به اندازه‌ای پیشرفته شده است که اغلب می‌تواند تجربیات تعاملی کافی را بدون نیاز به جاوااسکریپت ارائه دهد. به طور کلی، برای عملکرد، باید در صورت امکان CSS را به جای جاوااسکریپت برای پیاده‌سازی تعاملات و انیمیشن‌ها انتخاب کنید.

جاوااسکریپت: اسکریپت‌نویسی سمت کلاینت (Client-side Scripting)

جاوااسکریپت یک لایه برنامه‌نویسی به وب اضافه می‌کند. برای آوردن تعاملات، انیمیشن‌ها و عملکردهای پیچیده‌تر به وب استفاده می‌شود و می‌توان از آن برای ساخت برنامه‌های وب و بازی‌ها استفاده کرد. جاوااسکریپت که در ابتدا فقط یک زبان اسکریپت‌نویسی سمت کلاینت بود، با تکامل مشخصات زیربنایی ECMA­Script خود، در طول سال‌ها رشد کرده و بالغ شده است. اکنون توسط یک جامعه عظیم و پر جنب و جوش و انبوهی از ابزارهای توسعه پشتیبانی می‌شود و به عنوان یک زبان برنامه‌نویسی اعتبار کسب کرده است و از طریق Node.js به عنوان یک زبان سمت سرور (server-side language) نیز در دسترس قرار گرفته است.

هزاران کتابخانه جاوااسکریپت برای استفاده توسعه‌دهندگان منتشر شده است، و همچنین چارچوب‌های کامل فرانت‌اند (front-end frameworks) برای ساخت کل برنامه‌های وب، مانند Angular.js، React.js و Vue.js.

کتابخانه‌ها و چارچوب‌های جاوااسکریپت می‌توانند منبع اصلی نفخ صفحه (page bloat) باشند که باعث عملکرد ضعیف و UX بد، به خصوص در موبایل می‌شوند. بنابراین، توسعه‌دهنده موبایل همیشه باید از افزودن کتابخانه‌های جاوااسکریپت به یک پروژه بدون دلیل خوب، محتاط باشد. بعداً در مورد عملکرد وب موبایل بیشتر خواهیم دید.

اچ‌تی‌ام‌ال 5

اچ‌تی‌ام‌ال 5 جدیدترین نسخه اصلی HTML است و با پشتیبانی خوب در موبایل، ویژگی‌های بسیاری را به ارمغان می‌آورد که تجربه کاربری وب موبایل را افزایش می‌دهد. اما اصطلاح HTML5 به چیزی بیش از زبان نشانه‌گذاری HTML اشاره دارد؛ همچنین به مشخصات فناوری وب مرتبط اشاره دارد که شامل CSS3 و بسیاری از APIهای مفید جاوااسکریپت است.

از جمله APIهای جاوااسکریپت موجود در HTML5، ویژگی‌های مفید مرورگر مانند عنصر Canvas، رویدادهای لمسی (Touch Events) و ذخیره‌سازی وب (Web Storage) هستند، که تنها چند مورد را نام بردیم. آنها همچنین شامل APIهای دستگاه یا سخت‌افزار هستند که به ویژه در زمینه وب موبایل مفید هستند. APIهای دستگاه به مرورگر امکان دسترسی و کنترل ویژگی‌های سخت‌افزاری خاص دستگاه مانند دوربین، شتاب‌سنج و حسگر GPS را می‌دهند.

اچ‌تی‌ام‌ال 5 مرورگر را به برابری ویژگی‌ها با برنامه‌های بومی نزدیک‌تر می‌کند—چیزهایی که زمانی فقط از طریق برنامه‌های بومی امکان‌پذیر بودند، اکنون با وب امکان‌پذیر هستند. با APIهای مبتنی بر مکان (location-based APIs) برنامه‌های وب می‌توانند بدانند دستگاه کاربر کجاست؛ از طریق APIهای حسگر (sensor APIs) می‌توانند به تصاویر دوربین و جهت‌یابی قطب‌نما دسترسی داشته باشند؛ با APIهای ذخیره‌سازی و کش (storage and caching APIs) می‌توانند به صورت آفلاین کار کنند. وب‌سایت‌ها حتی می‌توانند اعلان‌های فشاری انتخابی (opt-in push notifications) را برای کاربران ارسال کنند، حتی زمانی که وب‌سایت در مرورگر باز نیست. با HTML5، تجربه وب بسیار غنی‌تر شد.

برخی از جالب‌ترین APIهای HTML5 از دیدگاه موبایل در زیر شرح داده شده‌اند.

• ای‌پی‌آی Geolocation API: این API دسترسی به قابلیت‌های موقعیت‌یابی جغرافیایی (geolocation) یک دستگاه را فراهم می‌کند، که می‌تواند شامل داده‌های مکان دقیق بر اساس حسگرهای دستگاه باشد. مکان می‌تواند بر اساس حسگرهای موجود دستگاه باشد و شامل روش‌های GPS، A-GPS، Wi-Fi و مثلث‌سازی مبتنی بر سلول (cell-based triangulation) است. داده‌های عرض جغرافیایی، طول جغرافیایی، ارتفاع، جهت (heading) و سرعت توسط API در معرض دید قرار می‌گیرند.
• ای‌پی‌آی Device Orientation API: مانند Geolocation API، این API اطلاعاتی در مورد رابطه فیزیکی دستگاه با جهان را برمی‌گرداند. در حالی که Geolocation API به مکانی در فضا مربوط می‌شود، Device Orientation API به جهت‌گیری (orientation) مربوط می‌شود. اطلاعات بر اساس حسگرهای جهت‌گیری مانند قطب‌نما، ژیروسکوپ و شتاب‌سنج است. داده‌های در معرض دید شامل جهت‌گیری در سه محور، شتاب و اطلاعات نرخ چرخش (rotation rate) است.
• ای‌پی‌آی Service Workers: سرویس ورکرها (Service workers) به صفحات وب اجازه می‌دهند اسکریپت‌ها را در پس‌زمینه اجرا کنند. آنها می‌توانند به عنوان یک سرور پراکسی (proxy server) برای صفحات وب عمل کنند، درخواست‌ها را رهگیری کرده و پاسخ‌ها را تولید کنند، و بنابراین قابلیت‌های آفلاین، همگام‌سازی پس‌زمینه (background syncing) و اعلان‌های فشاری را تسهیل می‌کنند.
• ای‌پی‌آی Push API: به صفحات وب اجازه می‌دهد پیام‌های فشاری دریافت کنند.
• ای‌پی‌آی Notifications API: به یک برنامه وب اجازه می‌دهد اعلان‌های شبیه به بومی (native-like notifications) را نمایش دهد. همراه با Push API و سرویس ورکرها، برنامه‌های وب می‌توانند اعلان‌های فشاری ناهمزمان (asynchronous push notifications) را به یک دستگاه ارسال و دریافت کنند.
• ای‌پی‌آی Web Payments API: وارد کردن اطلاعات پرداخت کارت اعتباری همیشه یک کار طاقت‌فرسا در وب بوده است، اما به خصوص در موبایل که ورودی دشوارتر است. Web Payments API قصد دارد این مشکل را حل کند، در حالی که همزمان نیاز به اشتراک‌گذاری جزئیات پرداخت شما با هر سایت تجارت الکترونیک شخص ثالث با اعتبار نامشخص را از بین می‌برد.
• ای‌پی‌آی Touch Events API & Pointer Events API: اینها دو API مبتنی بر ورودی صفحه لمسی هستند که اطلاعاتی در مورد لمس‌ها، کشیدن‌ها (swipes) و غیره ارائه می‌دهند.
• ای‌پی‌آی WebRTC and media capture and recording APIs: به صفحات وب اجازه می‌دهد با حسگرهای رسانه‌ای دستگاه مانند میکروفون و دوربین برای ضبط، پخش جریانی (stream) و ضبط صدا و ویدئو تعامل داشته باشند.

رویکردها به توسعه وب مدرن

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

طراحی وب واکنش‌گرا (Responsive Web Design - RWD)

طراحی وب واکنش‌گرا (RWD) رویکردی به طراحی وب است که صفحات وب مستقل از وضوح (resolution-independent) را ارائه می‌دهد—یعنی صفحات انعطاف‌پذیری که در اکثر اندازه‌های صفحه، از مرورگرهای دسکتاپ گرفته تا دستگاه‌های تلفن همراه با صفحه کوچک و هر چیزی در این بین، به خوبی کار می‌کنند. این بر اساس سه تکنیک است:

1. یک شبکه انعطاف‌پذیر (flexible grid): تضمین می‌کند که چیدمان صفحه با وضوح صفحه مقیاس‌پذیر باشد، به جای استفاده از ابعاد ثابت.
2. تصاویر انعطاف‌پذیر (flexible images): تصاویری که در یک شبکه انعطاف‌پذیر مقیاس‌پذیر خواهند بود.
3. پرس‌وجوهای رسانه‌ای CSS (CSS media queries): قوانین CSS را بر اساس نقاط شکست (breakpoints) به محدوده‌های متمایز وضوح یا کلاس‌های دستگاه اعمال می‌کند.

آر.دبلیو.دی محبوب شد زیرا انتظار می‌رفت یک صفحه HTML واحد که به این روش طراحی شده است، در طیف گسترده‌ای از دستگاه‌ها عملکرد نسبتاً خوبی داشته باشد. اساساً یک راه‌حل یکسان برای همه (one-size-fits-all) است که مزایا و معایبی دارد:

مزایا

• استقلال از وضوح می‌تواند به معنای زمان کمتر برای پیاده‌سازی و نگهداری باشد.
• نیازی به نگهداری و ارائه نسخه‌های جداگانه برای کلاس‌های مختلف دستگاه نیست.
• ویژگی‌های مرورگر را می‌توان در سمت کلاینت شناسایی کرد.

معایب

• فقط به استقلال از وضوح دست می‌یابد، اما نه تطبیق محتوا (content adaptation)، بنابراین محتوا برای همه دستگاه‌ها بهینه نشده است.
• بایت‌های بیشتری از حد لازم می‌توانند به دستگاه ارسال شوند که می‌تواند بر عملکرد تأثیر بگذارد.
• می‌تواند در دستگاه‌های پایین‌رده (low-end devices) عملکرد ضعیفی داشته باشد یا اصلاً کار نکند زیرا همان محتوا به هر دو دستگاه دسکتاپ و موبایل تحویل داده می‌شود.

بهبود پیشرونده (Progressive Enhancement)

بهبود پیشرونده تکنیکی است که از سال 2003 وجود داشته است. ایده این است که شما با یک صفحه پایه حداقلی که به هر دستگاه ارسال می‌شود، همراه با مقداری منطق بهبود جاوااسکریپت شروع می‌کنید. یک دستگاه پایین‌رده ممکن است بهبودها را نادیده بگیرد یا نتواند اجرا کند، اما همچنان یک تجربه عملکردی را برای کاربر ارائه می‌دهد. گوشی‌های هوشمند، تبلت‌ها و مرورگرهای دسکتاپ توانمندتر، بهبودهای جاوااسکریپت را به تدریج اجرا می‌کنند تا زمانی که صفحه به سطح بهینه‌ای برای دستگاه ساخته شود. این رویکرد در تقابل با ایده تنزل تدریجی (graceful degradation) قرار دارد، که در آن ابتدا عملکرد غنی ساخته می‌شود و سپس استثناها اضافه می‌شوند. این نیاز به کار اضافی دارد تا اطمینان حاصل شود که یک صفحه در غیاب هر گونه ویژگی پشتیبانی نشده، همچنان عملکردی است.

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

مزایا

• در تئوری، محدودیتی برای ویژگی‌هایی که می‌توان به تدریج اضافه کرد وجود ندارد.
• می‌تواند طیف کاملی از دستگاه‌ها از پایین‌رده تا بالارده و دسکتاپ را پوشش دهد.

معایب

• استفاده از یک پایه واحد برای همه دستگاه‌ها می‌تواند محدودکننده باشد.
• جاوااسکریپت بهبود پیشرونده واقعی زمان می‌برد تا اجرا شود و می‌تواند بر عملکرد تأثیر بگذارد.

طراحی واکنش‌گرای موبایل-اول (Mobile-First Responsive Design)

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

مزایا

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

معایب

• از همان مشکلات RWD رنج می‌برد.
• ممکن است نیاز به طراحی مجدد کامل سایت موجود داشته باشد، اگر سایت موجود از این رویکرد پیروی نکند.

طراحی وب تطبیقی (تطبیق سمت سرور)

تطبیق سمت سرور³ از یک راه‌حل تشخیص دستگاه (device detection solution) در سرور برای نگاشت هدرهای درخواست (request headers) دستگاه به پایگاه داده‌ای از قابلیت‌های دستگاه استفاده می‌کند. هنگامی که قابلیت‌های دستگاه مشخص شد، می‌توان صفحه‌ای را متناسب با قابلیت‌های دستگاه ساخت که منجر به صفحات بسیار بهینه می‌شود. راه‌حل‌های پیشرو شامل DeviceAtlas و ScientaMobile هستند.

گاهی اوقات به عنوان "تشخیص مرورگر" (browser-sniffing) شناخته می‌شود، اثربخشی این تکنیک در پذیرش آن توسط اکثر برندهای بزرگ اینترنتی که حضور وب خود را جدی می‌گیرند، از جمله گوگل، آمازون، یوتیوب، فیسبوک و ای‌بی (Ebay)، مشهود است.

(³ تعاریف مختلفی از طراحی وب تطبیقی وجود دارد؛ در اینجا منظور ما این است که برخی بهینه‌سازی‌های دستگاه در سمت سرور انجام می‌شود.)

مزایا

• دانستن قابلیت‌های یک دستگاه به این معنی است که می‌توان صفحات بسیار بهینه‌سازی شده را برای کلاس‌های مختلف دستگاه ارائه داد.
• بسیار قابل اعتماد و دقیق: راه‌حل‌های خوب دقت تشخیص دستگاه بیش از 99.5٪ را گزارش می‌دهند.
• عملکرد عالی زیرا صفحات را می‌توان برای دستگاه‌ها دقیق تنظیم کرد.

معایب

• شامل توسعه و نگهداری الگوهای صفحه مختلف برای کلاس‌های مختلف دستگاه است.
• پایگاه داده قابلیت‌های User-Agent باید با دستگاه‌های جدید به‌روز شود.
• اکثر راه‌حل‌ها تجاری هستند.

آر.ای.اس.اس: یک رویکرد ترکیبی (RESS: A Hybrid Approach)

آخرین رویکردی که باید در نظر گرفت RESS (طراحی واکنش‌گرا با مؤلفه‌های سمت سرور - REsponsive design with Server Side components) است. RESS رویکردهای تطبیقی و واکنش‌گرا را ترکیب می‌کند تا راه‌حلی را ارائه دهد که بهترین‌های هر دو را ترکیب می‌کند. با استفاده از تطبیق سمت سرور، یک صفحه اولیه برای طیف وسیعی از دستگاه‌ها یا دسته دستگاه بهینه می‌شود. سپس، در هر دسته، محتوا را می‌توان با استفاده از تکنیک‌های واکنش‌گرا بیشتر در سمت کلاینت تطبیق داد. این رویکرد را می‌توان حتی بیشتر پیش برد، به طوری که ویژگی‌های به دست آمده از مرورگر می‌توانند به سرور بازخورد داده شوند تا تطبیق سرور را بیشتر تنظیم کنند.

مزایا

• بیشترین انعطاف‌پذیری و بالاترین درجه بهینه‌سازی را از بین همه راه‌حل‌ها ارائه می‌دهد.
• مزایای تطبیق سمت سرور با عملکرد بالا، همراه با توانایی تنظیم دقیق با ویژگی‌های به دست آمده در سمت کلاینت.

معایب

• پیاده‌سازی دشوار، نیاز به پایگاه داده دستگاه.
• برای به دست آوردن بیشترین سود، نیاز به رفت و برگشت کامل (Full round-trip) است.

برنامه‌های هیبریدی (Hybrid Apps)

دسته دیگری از برنامه‌های کاربردی وب که ارزش ذکر کردن را دارد، برنامه‌های هیبریدی هستند. اینها اغلب، اما نه لزوماً، با فناوری‌های وب، HTML، جاوااسکریپت و CSS ساخته می‌شوند. برنامه‌های هیبریدی به عنوان برنامه‌های بومی کامپایل و بسته‌بندی می‌شوند و در فروشگاه‌های برنامه بومی توزیع می‌شوند. آنها مانند برنامه‌های بومی نصب می‌شوند، اما اساساً در داخل برنامه‌های وب هستند. به طور کلی، آنها از یک نمای وب تمام صفحه (full screen webview) یا یک پوسته برنامه بومی نازک و یک نمای وب تشکیل شده‌اند. نمای وب کار سنگین رندر کردن برنامه وب را انجام می‌دهد، در حالی که کتابخانه بومی به APIهای بومی و سخت‌افزار دسترسی می‌دهد.

این رویکرد برای بسیاری جذاب است زیرا امکان استفاده از دانش توسعه وب برای برنامه‌های بومی بدون نیاز به یادگیری توسعه پلتفرم بومی وجود دارد. چارچوب‌های مختلف توسعه برنامه هیبریدی برای کمک به توسعه‌دهنده وجود دارد، از جمله آپاچی کوردوا و فون‌گپ، و ری‌اکت نیتیو. جدیدترین چارچوبی که در سال 2017 وارد این فضا شد، فلاتر (Flutter) گوگل است. این چارچوب که خود را به عنوان "یک جعبه ابزار رابط کاربری برای ساخت برنامه‌های زیبا و کامپایل شده بومی برای موبایل، وب و دسکتاپ از یک پایگاه کد واحد" توصیف می‌کند، در بین توسعه‌دهندگان بسیار محبوب شده است.

امکان داشتن برنامه‌ای وجود دارد که با فناوری‌های وب ساخته شده باشد، اما برای پلتفرم به کد بومی کامپایل شود، به عنوان مثال با ری‌اکت نیتیو. مگر اینکه این برنامه از نمای وب استفاده کند، واقعاً یک برنامه هیبریدی نیست، حداقل به معنای سنتی. ری‌اکت نیتیو اساساً مرزهای آنچه به عنوان یک برنامه هیبریدی در نظر گرفته می‌شود را جابجا می‌کند. با ری‌اکت نیتیو، برنامه‌ها به کد بومی برای هر پلتفرم، آی‌او‌اس و اندروید، کامپایل می‌شوند و ویجت‌ها (widgets) به عنوان ویجت‌های پلتفرم بومی رندر می‌شوند، در حالی که برنامه‌های کوردوا/فون‌گپ از نماهای وب برای رندر کردن محتوای وب در یک پوسته برنامه بومی استفاده می‌کنند.

برای اطلاعات بیشتر در مورد برنامه‌های هیبریدی و چند پلتفرمی، به فصل مربوط به برنامه‌های چند پلتفرمی مراجعه کنید.

مزایا

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

معایب

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

برنامه‌های وب پیشرونده (Progressive Web Apps - PWAs)

برنامه وب پیشرونده (PWA) اصطلاحی است که برای توصیف برنامه‌های وبی استفاده می‌شود که از ویژگی‌های مرورگر مدرن برای ارائه تجربیات غنی شبیه به برنامه استفاده می‌کنند. این اصطلاح اولین بار توسط الکس راسل (Alex Russell) در سال 2015 برای توصیف برنامه‌های وبی ابداع شد که معیارهای زیر را نشان می‌دهند:

• پیشرونده (Progressive): روی همه دستگاه‌ها کار می‌کنند و عملکرد به تدریج افزایش می‌یابد.
• واکنش‌گرا (Responsive): چیدمان انعطاف‌پذیر است و می‌تواند با فرم فاکتور دستگاه به طور مناسب تنظیم شود.
• مستقل از اتصال (Connectivity-independent): تحت شرایط شبکه ضعیف و حتی آفلاین کار خواهند کرد.
• شبیه به برنامه (App-like): مانند یک برنامه احساس می‌شود، با یک پوسته برنامه (app-shell) و عمدتاً بدون تازه‌سازی کامل صفحه (full page refreshes).
• تازه (Fresh): هر زمان که ممکن باشد محتوای جدید را دریافت می‌کند.
• امن (Secure): از طریق HTTPS ارائه می‌شود.
• قابل کشف (Discoverable): به عنوان یک برنامه قابل شناسایی است در حالی که توسط موتورهای جستجو در وب نیز قابل ایندکس شدن (indexable) است.
• قابل تعامل مجدد (Re-engageable): تعامل مجدد را با ویژگی‌هایی مانند اعلان‌های فشاری تحریک می‌کند.
• قابل نصب (Installable): می‌توان به صفحه اصلی (home screen) دستگاه اضافه کرد.

پی.دبلیو.ای‌ها امکان‌پذیر هستند زیرا پلتفرم وب به اندازه کافی بالغ شده است تا چنین تجربیاتی را ارائه دهد. همانطور که در بالا ذکر شد، چندین API کلیدی HTML5، PWAها را امکان‌پذیر می‌کنند که از ویژگی‌هایی پشتیبانی می‌کنند که قبلاً فقط در برنامه‌های بومی یافت می‌شدند.

با افزودن سافاری در سال 2018، PWAها اکنون در تمام سیستم‌عامل‌های اصلی دسکتاپ و موبایل پشتیبانی می‌شوند. پشتیبانی ویندوز 10، 700 میلیون کاربر فعال ماهانه را به 2.5 میلیارد دستگاه اندروید و 1.3 میلیارد دستگاه آی‌او‌اس که از PWAها پشتیبانی می‌کنند، اضافه می‌کند.

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

صفحات موبایل شتاب‌یافته (Accelerated Mobile Pages - AMP)

پروژه AMP¹¹ گوگل یک فرمت انتشار مبتنی بر یک چارچوب مؤلفه‌های وب منبع باز با تأکید بر عملکرد است. AMP در ابتدا به عنوان پاسخی به پروژه‌های مقالات فوری (Instant Articles) فیسبوک و اخبار (News) اپل تصور شد، و بنابراین در ابتدا تأکید بر محتوای خبری و سبک وبلاگ بود. با این حال، از زمان راه‌اندازی آن در سال 2015، برای پشتیبانی از طیف بسیار گسترده‌تری از محتوا، با ویژگی‌های تعاملی مانند چرخ فلک‌ها (carousels)، گالری‌های تصاویر، منوهای تعاملی، و یک مدل برنامه‌نویسی که از ویژگی‌های پیچیده تجارت الکترونیک پشتیبانی می‌کند، تکامل یافته است.

در ابتدا، AMP به عنوان پاسخی به عملکرد ضعیف صفحات موبایل ساخته شد و طوری طراحی شد که دانلود صفحه کمتر از 1 ثانیه طول بکشد. نام آن این تمرکز بر موبایل را منعکس می‌کرد و مخفف صفحات موبایل شتاب‌یافته (Accelerated Mobile Pages) بود. با گسترش تمرکز آن، تیم AMP مخفف را حذف کرده است، به طوری که پروژه به سادگی AMP نامیده می‌شود و صفحات موبایل شتاب‌یافته دیگر استفاده نمی‌شوند.

ای.ام.پی دقیقاً چیست؟

سه بخش وجود دارد که AMP را تشکیل می‌دهند:

1. بخش AMP-HTML: نوعی از HTML5 که هم تگ‌هایی را که می‌توانید استفاده کنید محدود می‌کند و هم برخی تگ‌های جدید اضافه می‌کند.
2. بخش AMP-JS: یک کتابخانه جاوااسکریپت که به عنوان زمان اجرای AMP (AMP runtime) عمل می‌کند و بارگیری و رندر بهینه صفحات AMP را هماهنگ می‌کند.
3. بخش AMP-CACHE: یک کش ویژه برای صفحات AMP که امکان رندر فوری صفحات AMP را در برخی موارد فراهم می‌کند.

شروع کار با AMP خیلی دشوار نیست زیرا صفحات AMP اساساً HTML هستند. هر صفحه AMP با مقداری کد بویلرپلیت (boilerplate code) استاندارد شروع می‌شود که شامل زمان اجرای AMP-JS است. هنگامی که زمان اجرای AMP صفحه AMP-HTML را تجزیه (parse) می‌کند و با هر مؤلفه AMP مواجه می‌شود، نشانه‌گذاری تولید شده را به DOM تزریق می‌کند تا جایگزین نشانه‌گذاری AMP-HTML شود؛ این چیزی است که در مرورگر رندر می‌شود.

صفحات AMP کانونیکال (Canonical AMP Pages)

تمام صفحات AMP معتبر باید شامل یک تگ پیوند کانونیکال (canonical link tag) باشند که به نسخه غیر AMP صفحه، در صورت وجود، اشاره می‌کند. اگر معادل غیر AMP وجود نداشته باشد، پیوند کانونیکال باید به خود اشاره کند. این یک صفحه AMP کانونیکال است—یک صفحه AMP مستقل که هم به عنوان صفحه وب موبایل و هم دسکتاپ عمل می‌کند. از آنجایی که AMP از طراحی واکنش‌گرا و پرس‌وجوهای رسانه‌ای پشتیبانی می‌کند، می‌تواند به طور واکنش‌گرا برای پشتیبانی از ویوپورت‌های (viewports) بزرگ یا کوچک در صورت نیاز، مقیاس‌پذیر باشد.

ترکیب AMP و PWAها

ای.ام.پی و PWAها دارای نقاط قوت مکمل و نقاط ضعف متفاوتی هستند. بنابراین طبیعی است که ترکیبی از این دو را در نظر بگیریم. چندین الگوی مختلف شناسایی شده‌اند که سرعت AMP را با غنای PWAها ترکیب می‌کنند:

• الگوی AMP به عنوان PWA (AMP as PWA): در این الگو، صفحه AMP همان PWA است. از کتابخانه AMP استفاده می‌کند، به طوری که یک صفحه AMP معتبر می‌تواند از کش AMP ارائه شود و منجر به صفحات بسیار سریع شود. با این حال، هنگامی که پیوندها دنبال می‌شوند، کاربر به سرور اصلی هدایت می‌شود، جایی که اکنون می‌توان از یک سرویس ورکر استفاده کرد.
• الگوی AMP راه‌انداز PWA (AMP bootstraps PWA): در این مدل، صفحه AMP از یک مؤلفه ویژه، <amp-install-serviceworker>، برای نصب یک سرویس ورکر در پس‌زمینه روی دستگاه کاربر استفاده می‌کند. سپس سرویس ورکر می‌تواند با دانلود و کش کردن بخش‌های اولیه PWA، PWA را راه‌اندازی کند، به طوری که وقتی کاربر پیوندی را به PWA کامل دنبال می‌کند، قبلاً دانلود شده و آماده نمایش است.
• داده‌های AMP تعبیه شده در PWA (AMP data embedded in PWA): در این الگو، صفحات AMP به عنوان بک‌اند محتوا، در یک پوسته PWA استفاده می‌شوند.

وب فیزیکی (The Physical Web)

وب فیزیکی، یک پروژه منبع باز است که هدف آن فعال کردن تعاملات سریع و یکپارچه با اشیاء و مکان‌های فیزیکی، از طریق بیکن‌های بلوتوث (Bluetooth beacons) است. اپل فناوری بیکن بلوتوث اختصاصی خود را به نام آی‌بیکن (iBeacon) دارد. آی‌بیکن با وب فیزیکی متفاوت است زیرا آی‌بیکن‌ها برنامه‌ها را فعال می‌کنند، در حالی که بیکن‌های وب فیزیکی URLهای وب را فعال می‌کنند.

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

شروع کار با وب فیزیکی به طرز شگفت‌آوری آسان است. فقط یک بیکن تهیه کنید، آن را طوری تنظیم کنید که به یک URL اشاره کند، تمام شد! سپس کاربرانی که دستگاه‌های مجهز به بلوتوث سازگار دارند، هنگامی که در نزدیکی هستند، اعلان‌هایی دریافت خواهند کرد. این یک ایده ساده است که طیف گسترده‌ای از برنامه‌های کاربردی مانند ماشین‌های فروش هوشمند (smart vending machines) و بازاریابی هدفمند در فضاهای فیزیکی را امکان‌پذیر می‌کند.

گوگل همچنین یک پلتفرم بیکن پیچیده‌تر با مدیریت ابری راه دور بیکن‌ها دارد که می‌تواند مقیاس‌پذیری و مزایای دیگری را برای استقرارهای بزرگ بیکن ارائه دهد.

عملکرد وب و چرایی اهمیت آن

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

• آزمایش‌های والمارت (Walmart) نشان داد که به ازای هر 1 ثانیه بارگذاری سریع‌تر صفحه، 2٪ افزایش در نرخ تبدیل وجود دارد.
• تحقیقات آمازون نشان داد که افزایش 100 میلی‌ثانیه‌ای تأخیر منجر به 1٪ فروش کمتر می‌شود.
• مطالعه‌ای توسط گوگل گزارش داد که 53٪ از بازدیدکنندگان قبل از بارگذاری صفحه اگر بیش از 3 ثانیه طول بکشد، آن را ترک خواهند کرد.

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

برای نشان دادن این موضوع، در اینجا چند آمار در مورد کاهش سرعت صفحه بر نرخ پرش (bounce rates) آورده شده است:

منبع: blogs.akamai.com

اهداف عملکرد

ایده بودجه عملکرد (performance budget) چند سالی است که وجود دارد؛ در طول برنامه‌ریزی، "بودجه‌ای" برای جنبه‌های مختلف نحوه عملکرد یک صفحه تعیین می‌شود و شما سعی می‌کنید در طول توسعه به این بودجه پایبند باشید. ابعاد خاص یک بودجه عملکرد ممکن است شامل محدودیت‌هایی در وزن صفحه (page weight)، تعداد درخواست‌های HTTP، زمان بارگذاری صفحه (page load time)، زمان تا تعامل اولیه (time to initial interactivity) و غیره باشد. اگر نمی‌توانید بودجه را برآورده کنید، باید دارایی‌ها یا ویژگی‌هایی را که بودجه را منفجر می‌کنند، در نظر بگیرید. به عنوان مثال، آیا واقعاً به آن چرخ فلک تصویر فانتزی یا کتابخانه جاوااسکریپت نیاز دارید؟

آر.ای.آی.ال

گوگل رویکرد و مجموعه‌ای از اهداف را برای عملکرد وب به نام RAIL تعریف می‌کند: پاسخ (Response)، انیمیشن (Animation)، بیکار (Idle)، بارگذاری (Load). اهدافی که دنبال می‌کند عبارتند از:

• پاسخ: 100 میلی‌ثانیه—بازخورد فوری به ورودی کاربر بدهید.
• انیمیشن: 10 میلی‌ثانیه—هنگام پیمایش یا متحرک‌سازی، فریم‌ها را در کمتر از 10 میلی‌ثانیه تولید کنید تا به 60 فریم در ثانیه برسید.
• بیکار: 50 میلی‌ثانیه—عملیات غیر بحرانی نباید بیش از 50 میلی‌ثانیه طول بکشد تا برنامه سریع به نظر برسد.
• بارگذاری: 1 ثانیه—محتوای تعاملی را در کمتر از 1000 میلی‌ثانیه تحویل دهید تا کاربران را درگیر نگه دارید.

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

تجزیه و تحلیل

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

ابزارهای تجزیه و تحلیل می‌توانند داده‌های خود را در سمت کلاینت یا سرور جمع‌آوری کنند. شایان ذکر است که اتکای صرف به تجزیه و تحلیل مبتنی بر جاوااسکریپت می‌تواند مشکل‌ساز باشد، به خصوص در موبایل. اگر دستگاهی نتواند اسکریپت تجزیه و تحلیل را اجرا کند—به عنوان مثال، اگر دستگاه قدیمی‌تری باشد—آنگاه شما اصلاً دیدی نسبت به این دستگاه نخواهید داشت و می‌تواند شما را به تمرکز بر روی دستگاه‌های اشتباه سوق دهد. علاوه بر این، بسیاری از مسدودکننده‌های تبلیغات (ad blockers) نیز تجزیه و تحلیل‌های سمت کلاینت مانند گوگل آنالیتیکس را مسدود می‌کنند. اگر در مورد تجزیه و تحلیل خود جدی‌تر هستید، می‌توان با استفاده از ترکیبی از تجزیه و تحلیل‌های سمت کلاینت و سرور، تصویر دقیق‌تری از داده‌های خود به دست آورد.

ابزارهای محبوب شامل گوگل آنالیتیکس، KISSMetrics و Matomo هستند. برخی ابزارها، مانند wao.io، هر دو تجزیه و تحلیل سمت سرور و کلاینت را ارائه می‌دهند.

تست A/B

تست A/B تکنیک بسیار مفیدی است که می‌تواند در توسعه وب برای ارزیابی عملکرد انواع مختلف طراحی رابط کاربری، پیام‌رسانی و چیدمان استفاده شود تا بتوانید تصمیمات آگاهانه‌ای در مورد UX ارائه دهید. اکثر ابزارهای اصلی تجزیه و تحلیل از تست A/B پشتیبانی می‌کنند، از جمله Google Optimize، Google Analytics (Experiments) و Matomo.

نظارت بر کاربر واقعی (Real User Monitoring - RUM)

آر.یو.ام شامل نظارت مداوم بر تعامل کاربر با یک برنامه وب به صورت بی‌درنگ است. این به صاحب وب‌سایت امکان می‌دهد به سرعت مشکلات مربوط به در دسترس بودن (availability)، عملکرد، واکنش‌گرایی (responsiveness) و غیره را شناسایی، اولویت‌بندی و برطرف کند. این، به نوبه خود، بینش‌های ارزشمندی را در مورد رفتار و رضایت کاربر ارائه می‌دهد و شما را قادر می‌سازد تا تجربه کاربری کلی را دقیق تنظیم کرده و بهبود بخشید.

آر.یو.ام می‌تواند در سمت کلاینت یا سرور انجام شود و ابزارهای پلاگین مانند wao.io سون‌وال (Sevenval's wao.io) می‌توانند معیارهای فرانت‌اند و بک‌اند را بدون نیاز به ایجاد هیچ گونه تغییر کدی در برنامه، مرتبط کنند.

کسب درآمد (Monetization)

تبلیغات (Ads)

تبلیغات به طور سنتی یکی از رایج‌ترین راه‌ها برای کسب درآمد از یک وب‌سایت بوده است و در وب موبایل نیز کمتر از آن نیست. شبکه‌های تبلیغاتی (ad networks) زیادی برای انتخاب وجود دارد.

مسدودکننده‌های تبلیغات (Ad blockers)

اگر مدل کسب درآمد مبتنی بر تبلیغات را انتخاب می‌کنید، توجه داشته باشید که واکنش شدیدی علیه تبلیغات—به خصوص در موبایل—از زمانی که اپل پشتیبانی از مسدودکننده‌های تبلیغات را در سال 2015 به موبایل سافاری (Mobile Safari) اضافه کرد، رو به افزایش بوده است. تبلیغات به دلیل افزودن نفخ غیر ضروری صفحه و کاهش عملکرد وب، شهرت بدی دارند.

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

هنگام انتخاب یک شبکه تبلیغاتی، یک شبکه قابل اعتماد را انتخاب کنید که به عملکرد سایت شما آسیب نرساند. یک تازه‌وارد نسبی در این زمینه AMP برای تبلیغات (AMP for Ads - A4A) است (همچنین این لینک را ببینید). اینها تبلیغاتی هستند که مبتنی بر فناوری AMP هستند، اما برای دسکتاپ نیز به خوبی کار می‌کنند. A4A قوانین سختگیرانه‌ای در مورد آنچه مجاز است دارد و تبلیغاتی که عملکرد را کاهش می‌دهند از صفحه حذف می‌شوند، بنابراین می‌توانید مطمئن باشید که تبلیغات باعث مشکلات UX یا عملکرد نمی‌شوند.

تجارت الکترونیک (Ecommerce)

راه‌های زیادی برای ساخت یک راه‌حل تجارت الکترونیک وب وجود دارد، از راه‌حل‌های آماده (off-the-shelf) گرفته تا توسعه‌های سفارشی. بسیاری از ارائه‌دهندگان خدمات پرداخت جدید و سنتی، مانند پی‌پال (PayPal) و استرایپ (Stripe)، پشتیبانی موبایل خوبی دارند و پیاده‌سازی آنها نسبتاً ساده است. علاوه بر این، نسل جدیدی از کیف پول‌های موبایلی مجهز به NFC، مانند اندروید پی (Android Pay)، اپل پی (Apple Pay) و سامسونگ پی (Samsung Pay)، به طور فزاینده‌ای می‌توانند در وب استفاده شوند.

ای.پی.آی Payment Request

آخرین فناوری که باید مراقب آن بود، Payment Request API است. این ای.پی.آی یکی از ویژگی‌های جدید HTML5 است که هدف آن ارائه پرداخت‌های بدون اصطکاک در وب، به دو روش است:

1. حذف نیاز به وارد کردن دست و پا گیر جزئیات پرداخت
2. حذف نیاز به اشتراک‌گذاری جزئیات کارت اعتباری خود با سایت‌های شخص ثالث با اعتبار نامشخص

چندین مرورگر قبلاً از Payment Request API پشتیبانی می‌کنند، از جمله کروم برای اندروید، اج و سامسونگ اینترنت (Samsung Internet)، و در بیلدهای توسعه‌دهنده (developer (nightly) builds) فایرفاکس موجود است.

لطفاً برای جزئیات بیشتر در مورد انواع مدل‌های کسب درآمد که می‌توان استفاده کرد، فصل کسب درآمد را ببینید.

دستورالعمل‌های کلی UX و عملکرد

فضای کافی برای پرداختن به جزئیات عملی زیاد در اینجا وجود ندارد (برای چند نمونه گرافیکی به این سایت مراجعه کنید)، اما مجموعه کلی دستورالعمل‌ها برای توسعه وب موبایل شامل موارد زیر است.

یو.ایکس

• برای موبایل بهینه‌سازی کنید.
• نیازی به زوم با دو انگشت (pinch-to-zoom) نداشته باشید.
• تصاویر محصول را قابل بزرگنمایی کنید.
• اطمینان حاصل کنید که اهداف لمسی (tap targets) و پیوندها به اندازه کافی برای انگشتان "چاق" بزرگ هستند.
• فراخوان‌ها به اقدام (calls to action) را در جلو و مرکز نگه دارید.
• منوها را کوتاه نگه دارید.
• ناوبری بصری با یک پیوند برجسته به صفحه اصلی.
• از پاپ‌آپ‌های (pop-ups) مزاحم و بینابینی‌های (interstitials) بزرگ خودداری کنید.
• یک جستجوی سایت، با فیلترهایی برای محدود کردن نتایج در صورت امکان، بگنجانید.
• در صورت امکان، کلیک برای تماس (click-to-call) را بگنجانید.
• فقط در صورت نیاز، نه از قبل، درخواست مجوزهای ویژه مرورگر را بکنید. به عنوان مثال، هنگام ارسال اعلان‌های فشاری، زمانی که کاربر قبلاً تمایل خود را برای اشتراک، یا گفتن برای به‌روزرسانی‌های سفارش، نشان داده است، اجازه بخواهید و موقعیت‌یابی جغرافیایی فقط در صورت نیاز برای نقشه‌برداری یا آدرس.
• به کاربران اجازه دهید به عنوان مهمان مرور کنند.
• به کاربران اجازه دهید به عنوان مهمان خرید کنند.
• در صورت امکان، ورودی‌های فرم را به طور خودکار پر کنید (Autofill).

عملکرد

• وزن صفحه را کم نگه دارید، از رسانه‌های غیر ضروری مانند تصاویر و فیلم‌ها خودداری کنید.
• تمام تصاویر را فشرده کنید.
• از تغییر مسیرها (redirects) خودداری کنید.
• تعداد منابع خارجی را کم نگه دارید تا درخواست‌های HTTP کاهش یابد.
• کش را پیاده‌سازی کنید.
• تصاویر و محتوا را در صورت نیاز به صورت تنبل بارگذاری کنید (Lazy load).
• منابع متنی را کوچک کنید (Minify).
• از چارچوب‌های جاوااسکریپت و CSS مگر در موارد ضروری خودداری کنید.
• از تعبیه‌ها (embeds) و گنجاندن‌های (includes) غیر ضروری خودداری کنید.
• از تبلیغات مسئولانه استفاده کنید و فقط از تبلیغات سبک استفاده کنید.
• یک بودجه عملکرد تعریف کنید و سعی کنید به آن پایبند باشید.

تست برای وب موبایل

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

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

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

به طور کلی، تلاش تست بین تست عملکردی و رابط کاربری (functional and UI testing) از یک سو و تست عملکرد (performance testing) از سوی دیگر تقسیم می‌شود. تست عملکردی و رابط کاربری به تست منطق تجاری (business logic)، رابط کاربری، مؤلفه‌های رابط کاربری و قابلیت استفاده (usability) مربوط می‌شود. گاهی اوقات مشکلات فقط در برخی دستگاه‌ها در برخی پلتفرم‌ها ظاهر می‌شوند و این تست در موبایل را دشوار می‌کند. تست عملکرد بیشتر به این مربوط می‌شود که سایت چقدر خوب کار می‌کند: آیا سریع است، آیا سریع به نظر می‌رسد، آیا تحت شرایط شبکه ضعیف کار می‌کند؟

تست دستی (Manual testing) احتمالاً اولین قدم در هر تست وب خواهد بود. در حالی که از طریق تست خودکار (automated testing) می‌توان به دستاوردهای کارایی بزرگی دست یافت، تست خودکار همیشه عملی نیست، شاید به دلیل اندازه کوچک پروژه، یا محدودیت‌های زمانی یا بودجه‌ای.

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

ابزارهای توسعه‌دهنده مرورگر (Browser Developer Tools)

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

• بازرسی DOM: امکان بررسی عناصر HTML که یک صفحه را تشکیل می‌دهند را فراهم می‌کند.
• تنظیم سرعت شبکه (Network throttling): برای شبیه‌سازی شرایط شبکه کند و ضعیف، مانند Edge، 2G، 3G و غیره.
• تنظیم سرعت پردازنده (CPU throttling): برای شبیه‌سازی گوشی‌های هوشمند بالارده یا پایین‌رده.
• نمودار آبشاری و خطوط زمانی (Waterfall chart and timelines): تجسم‌هایی از نحوه بارگذاری و رندر شدن یک صفحه در طول زمان ارائه می‌دهند.
• اشکال‌زدایی جاوااسکریپت: به توسعه‌دهنده امکان می‌دهد کد جاوااسکریپت را بررسی کند، نقاط شکست اضافه کند، رویدادها را مشاهده کند و کد را مرحله به مرحله اجرا کند.
• پروفایل پردازنده و حافظه (CPU and Memory profiling): نحوه عملکرد پردازنده و ردپای رم (RAM footprint) را در طول زمان ثبت می‌کند.

سایر ویژگی‌هایی که به ویژه برای توسعه و تست وب موبایل مفید هستند عبارتند از:

• حالت طراحی واکنش‌گرا (Responsive design mode): ویوپورت‌ها را در اندازه‌های قابل تنظیم مختلف شبیه‌سازی می‌کند، به طوری که می‌توانید نحوه رفتار رابط کاربری را تحت ویوپورت‌های با اندازه‌های مختلف ببینید.
• آینه‌سازی صفحه (Screen mirroring): مرورگر دستگاه متصل به ابزارهای توسعه‌دهنده آینه می‌شود و می‌توان از طریق مرورگر دسکتاپ با آن تعامل داشت.

اشکال‌زدایی از راه دور (Remote Debugging)

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

اشکال‌زدایی از راه دور ابزار بسیار مفیدی است، زیرا به شما امکان می‌دهد روی دستگاه‌های واقعی و شبکه‌های واقعی تست کنید. البته، هنوز به دستگاه‌هایی برای تست نیاز دارید و این می‌تواند گران باشد. حداقل، باید به داشتن یک دستگاه پایین‌رده و بالارده در هر یک از سیستم‌عامل‌های اصلی موبایل نگاه کنید: اندروید، آی‌او‌اس و ویندوز. حتی در این صورت، شکاف‌های عمده‌ای در پوشش تست شما وجود خواهد داشت؛ اینجاست که آزمایشگاه‌های دستگاه (device labs) می‌توانند کمک کنند.

ابزارهای تست عملکرد و UX

سلنیوم وب‌درایور (Selenium WebDriver)

سلنیوم وب‌درایور پیشرو در تست خودکار وب است. تست خودکار برای یافتن سریع مشکلات رابط کاربری بسیار مفید است و می‌توان از آن برای تست رگرسیون (regression testing) برای یافتن سریع تغییرات رابط کاربری مخرب استفاده کرد. سلنیوم علاوه بر این از تست موبایل در اندروید و آی‌او‌اس پشتیبانی می‌کند و هم تست شبیه‌ساز و هم دستگاه واقعی پشتیبانی می‌شود.

وب‌پیج‌تست (WebPagetest)

وب‌پیج‌تست یک ابزار تست عملکرد منبع باز و رایگان است که تست از راه دور را روی مرورگرهای واقعی دسکتاپ و موبایل در مکان‌های مختلف در سراسر جهان ارائه می‌دهد. نمودارهای عملکرد آبشاری و همچنین اندازه‌گیری معیارهای کلیدی عملکرد مانند زمان تا اولین بایت (time to first byte)، شاخص سرعت (speed index) و تعداد عناصر DOM را ارائه می‌دهد.

موبی‌ردی (mobiReady)

موبی‌ردی ابزاری رایگان برای توسعه‌دهندگان، طراحان و بازاریابان است که صفحات و سایت‌های وب را بر اساس بهترین شیوه‌ها و استانداردهای وب موبایل برای آمادگی موبایل (mobile-readiness) آزمایش می‌کند. تجزیه و تحلیل دقیقی برای یک صفحه برمی‌گرداند و توصیه‌هایی در مورد نحوه رسیدگی به هر گونه مشکل شناسایی شده ارائه می‌دهد. همچنین شامل موارد زیر است:

• تجسم‌های دستگاه در دستگاه‌های پایین‌رده، میان‌رده و بالارده، که نشان می‌دهد صفحه در اندازه‌های مختلف صفحه چگونه به نظر می‌رسد.
• تفکیک وزن صفحه برای هر کلاس دستگاه.
• گزارش محک‌زنی (benchmark report) از نحوه امتیازدهی صفحه شما در برابر 1000 سایت برتر الکسا (Alexa).

موبی‌ردی همچنین یک API را در معرض دید قرار می‌دهد که می‌تواند برای تست خودکار کل سایت‌ها استفاده شود.

لایت‌هاوس (Lighthouse)

لایت‌هاوس یک برنامه وب را برای ویژگی‌های PWA ممیزی می‌کند، از جمله:

• آیا می‌تواند به صورت آفلاین یا تحت شرایط شبکه ضعیف بارگیری شود؟
• آیا سریع است؟
• آیا از یک URL امن ارائه می‌شود؟
• آیا بهترین شیوه‌های دسترس‌پذیری (accessibility best practices) را پیاده‌سازی می‌کند؟

لایت‌هاوس به عنوان یک سرویس آنلاین، یک افزونه کروم، یک ابزار خط فرمان (command line tool) در دسترس است و با ابزارهای توسعه‌دهنده کروم ادغام شده است. نسخه خط فرمان برای تست خودکار مفید است.

پیج‌اسپید اینسایتس (PageSpeed Insights)

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

آزمایشگاه‌های دستگاه (Device Labs)

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

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

آزمایشگاه AWS Device Farm

آزمایشگاه AWS Device Farm آمازون یک آزمایشگاه تست دستگاه پیشرفته است که دارای تست خودکار در برابر مجموعه بزرگی از دستگاه‌های واقعی در ابر AWS و همچنین دسترسی مستقیم از راه دور است که به شما امکان می‌دهد با کشیدن‌ها و ژست‌ها به صورت بی‌درنگ از مرورگر وب خود تعامل داشته باشید. AWS Device Farm شامل طیف گسترده‌ای از دستگاه‌های جدید و قدیمی آی‌او‌اس و اندروید است.

آزمایشگاه AWS Device Farm از پرداخت به ازای استفاده (pay-as-you-go) و نرخ ثابت (flat-rate) پشتیبانی می‌کند. در مدل PAYG، 1000 دقیقه اول رایگان است، بنابراین می‌تواند راه خوبی برای امتحان سرویس قبل از تعهد به آن باشد.

براوزراستک (BrowserStack)

براوزراستک تست از راه دور را در انواع مرورگرهای دسکتاپ و موبایل و سیستم‌عامل‌های مختلف ارائه می‌دهد. دستگاه‌های تلفن همراه برای "حداکثر پوشش بازار" انتخاب شده‌اند و شامل مجموعه وسیعی از دستگاه‌های واقعی آی‌او‌اس و اندروید هستند. از تست خودکار از طریق تست ابری سلنیوم (Selenium cloud testing) پشتیبانی می‌کند. براوزراستک برای پروژه‌های منبع باز رایگان است و یک دوره آزمایشی رایگان برای پروژه‌های تجاری ارائه می‌دهد.

آزمایشگاه تست راه دور سامسونگ (Samsung's Remote Test Lab)

آزمایشگاه تست راه دور سامسونگ تست رایگان از راه دور را روی دستگاه‌های سامسونگ ارائه می‌دهد. شما از طریق مرورگر وب خود به دستگاه‌های واقعی رزرو و متصل می‌شوید. لیست دستگاه‌ها شامل تلفن‌ها، تبلت‌ها و ساعت‌های قدیمی و جدید است—جای تعجب نیست که همه دستگاه‌های سامسونگ هستند—و در برندهای گلکسی (Galaxy)، زد (Z) (تایزن - Tizen) و گیر (Gear) آن پخش شده‌اند.

آزمایشگاه SIGOS App Experience

آزمایشگاه SIGOS App Experience، که قبلاً با نام Keynote Mobile Testing شناخته می‌شد، و قبلاً با نام DeviceAnywhere (دنبال کردن سخت است!) یکی از اولین آزمایشگاه‌های دستگاه مجازی بود. علی‌رغم نام اخیر آن، SIGOS App Experience می‌تواند برای تست در وب نیز، روی بیش از 2000 دستگاه آن، استفاده شود. SIGOS هم از تست دستی و هم خودکار پشتیبانی می‌کند. به سرویس از طریق مرورگر دسکتاپ دسترسی پیدا می‌شود. یک دوره آزمایشی رایگان 7 روزه ارائه می‌دهد.

پرفکتو موبایل (Perfecto Mobile)

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

آزمایشگاه دستگاه باز (Open Device Lab)

آزمایشگاه دستگاه باز یک رویکرد اجتماعی به آزمایشگاه‌های دستگاه است. سازمان‌های شرکت‌کننده فضایی فیزیکی را ارائه می‌دهند که توسعه‌دهندگان می‌توانند به آنجا بروند و به صورت رایگان از آن استفاده کنند. در حال حاضر 154 آزمایشگاه دستگاه باز در 35 کشور وجود دارد که دسترسی رایگان به 4255 دستگاه را ارائه می‌دهند.

منابع (Resources)

• سایت منبع برای طراحی و توسعه وب موبایل: mobiforge.com
• پشتیبانی و سازگاری ویژگی‌های مرورگر: caniuse.com
• طراحی وب‌سایت واکنش‌گرا با RESS در smashingmagazine.com
• اولین برنامه وب پیشرونده شما در developers.google.com
• برنامه‌های وب آفلاین در udacity.com
• پروژه AMP: ampproject.org
• وب‌اَمپ‌های پیشرونده در smashingmagazine.com
• پروژه وب فیزیکی: google.github.io/physical-web
• دیدگاه خوبی در مورد کیفیت نرم‌افزار و تست با استفاده از مرورگرهای وب در mobiletestingblog.com
• وب موبایل با عملکرد بالا - بهترین شیوه‌ها برای بهینه‌سازی برنامه‌های وب موبایل³⁶، توسط مکس فیرتمن (Max Firtman) (O'Reilly Media، 2016) قابل دسترس در این جا.

فصل هفتم را از این جا بخوانید.