سایت شما باید از چه مرورگرهایی پشتیبانی کند؟

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

محبوب‌ترین مرورگرها کدامند؟

نتایج بدست آمده از سایت آماری StatCounter که در ماه می ۲۰۱۷ منتشر شده، ۱۰ مرورگر برتر از لحاظ سهم بازار را به ترتیب زیر نشان می‌دهد:

Chrome — ۵۹.۳۷%
Firefox — ۱۲.۷۶%
Safari — ۱۰.۵۵%
IE — ۸.۳۲%
Edge — ۳.۴۲%
Opera — ۱.۹۹%
Android (tablet) — ۱.۲۴%
Yandex Browser — ۰.۴۸%
UC Browser — ۰.۴۱%
Coc Coc — ۰.۳۳%

البته با توجه به اینکه تلفن‌های همراه و دستگاه‌های موبایل ۵۴.۲۵ درصد از سهم استفاده از وب را به خود اختصاص داده‌اند، می‌بایستی مروری هم بر مرورگرهای تحت موبایل و میزان محبوبیت آن‌ها داشته باشیم:

Chrome — ۴۹.۲۳%
Safari — ۱۷.۷۳%
UC Browser — ۱۵.۸۹%
Samsung Internet — ۶.۵۸%
Opera — ۵.۰۳%
Android — ۳.۷۵%
IEMobile — ۰.۶۸%
BlackBerry — ۰.۲۶%
Edge — ۰.۱۵%
Nokia — ۰.۱۲%

آمار و ارقام جهانی گویای همه چیز نیست:

• الگوهای استفاده به طور قابل ملاحظه ای در نواحی مختلف جهان با یکدیگر تفاوت دارند. برای مثال مرورگر یاندکس با سهم استفاده ۷/۱۲%، دومین جایگاه محبوبیت را در روسیه داراست. مرورگر سوگو (Sogou) با ۵/۶% سهم دارای سومین جایگاه استفاده در چین بوده و یا اینکه اوپرا موبایل سهم ۲۸% بازار آفریقا را به خود اختصاص داده است.
• نسخه‌های جدیدی از مرورگرها به طور پیوسته در حال انتشار هستند. مثلاً گوگل کروم، فایرفاکس و یا اُپرا هر ۶ هفته یکبار بروزرسانی می‌شوند. تا جایی که استفاده از نسخه‌های قدیمی آن‌ها که تنها چند ماه از تاریخ انتشارشان گذشته، کاملاً غیر عملی است.
• عملکرد مرورگرها بر روی سیستم عامل‌های گوناگون، متفاوت است. مثلاً گوگل کروم دارای نسخه‌های ویندوز، مک، لینوکس، اندروید، آی او اس و کروم او اس است. اما کارکرد آن بر روی هرکدام از این سیستم عامل‌ها، با دیگری تفاوت دارد.
• طیف گسترده ای از مرورگرهای قدیمی و جدید عجیب و غریب را می‌توان بر روی دستگاه‌های مختلف اعم از کنسول‌های بازی، کتابخوان های دیجیتال و یا تلویزیون‌های هوشمند پیدا کرد.
• نتایجی که آمارگیرهای سایت نشان می‌دهند، هیچگاه با آمار جهانی یکسان نیستند.

آیا مرورگرها تفاوت‌های چشمگیری با یکدیگر دارند؟

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

• Webkit: موتور مرورگر وب Safari در Mac OS و iOS
• Blink: یکی از انشعاب‌های Webkit که موتورهای جستجوی Chrome و Opera و Vivaldi و Brave از آن استفاده می‌کنند.
• Gecko: در بسیاری از برنامه‌هایی که توسط بنیاد موزیلا مانند مرورگر Firefox به‌کاررفته است.
• Trident: موتور چیدمانی که توسط شرکت مایکروسافت توسعه داده شده و در اینترنت اکسپلورر استفاده می‌شود.
• EdgeHTML: نسخه به روز شده Trident که در مرورگر ستفاده مرورگر Edge استفاده شده است.

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

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

آیا یک وبسایت در کلیه مرورگرها قابل اجراست؟

پاسخ این سؤال مثبت است. وجود تکنیک‌هایی همچون توسعه پلکانی (Progressive Enhancement) موجب می‌گردد که برای اجرای هر وبسایتی، ابتدا بستری اولیه (متشکل از تنها کدهای تفسیر شده زبان HTML) ایجاد گردد و سپس در صورت پشتیبانی مرورگر از زبان‌های CSS و JavaScript، آن‌ها نیز قابلیت تفسیر و اجرا پیدا کنند و در نهایت وبسایت طی چند مرحله بهینه سازی گردد. مرورگرهای امروزی داری قابلیت اجرای صفحه بندی‌های مختلف، جلوه‌های بصری متحرک و پشتیبانی از افزونه‌های تعاملی یا همان ویجت ها هستند. مرورگرهای قدیمی تر اما، ممکن است تنها بتوانند از صفحات HTML پشتیبانی نمایند. سایر مرورگرها نیز عملکردی بینابین خواهند داشت.

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

توصیه‌هایی برای دارندگان وبسایت

مجموعه از اصول و محدودیت‌ها وجود دارند که صاحبان وبسایت می‌بایستی در وهله اول آن‌ها را شناخته و به کار گیرند:

۱. وب سایت یک صفحه چاپ شده نیست

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

۲. عملکرد ممکن است متفاوت باشد

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

۳. وبسایت یا اپلیکیشن خود را ارزیابی کنید

با خودتان روراست باشید. وبسایت شما چه ماهیتی دارد؟ محتوا محور است یا قرار است تنها یک اپلیکیشن ساده باشد؟ اپلیکیشن تحت دسکتاپ خواهد بود یا قرار است یک بازی اکشن کوتاه را در برگیرد؟ با در نظر گرفتن این مسائل می‌توانید حداقلی برای سازگاری آن با مرورگرها در نظر بگیرید. مثلاً اینکه وبسایت می‌بایستی با اکثر مرورگرهای دو سال اخیر، صفحات دارای عرض ۶۰۰ پیکسل و یک اینترنت بیسیم مناسب، به راحتی قابل اجرا باشد.

۴. مخاطبان خود را ارزیابی کنید

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

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

۵. تغییرات، به وجود می‌آیند

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

مقاله مرتبط: چرا برخی از زشت ترین سایت ها، هنوز هم پر بازدید هستند؟

توصیه‌هایی برای برنامه نویسان وب

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

۱. با وب ارتباطی عمیق برقرار کنید

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

۲. تکنیک‌های توسعه دفاعی اتخاذ کنید

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

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

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

۳. ابتدا تست کنید و باز هم تست کنید

اگرچه به احتمال زیاد نتوانید برنامه خود را روی دستگاه‌های مختلف تست کنید، اما در نظر داشته باشید که توسعه یک برنامه تنها برای کارکرد روی یک مرورگر، کاملاً بیهوده خواهد بود.

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

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

به عنوان یک برنامه نویس، لازم است تا مرورگرهای مختلفی را بر روی سیستم خود نصب نمایید. اگر از مک یا لینوکس استفاده می‌کنید، می‌توانید از طریق ابزار توسعه مایکروسافت microsoft-edge وضعیت سایت خود را مشاهده نمایید.

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

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

۴. استفاده از پروتوکل HTTPS را جدی بگیرید

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

پاسخی نگرفتید؟

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

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

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