آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

معرفی پشتیبانی از مرورگر

دوره های مرتبط با این مقاله

پشتیبانی از مرورگر

Angular از اغلب مرورگرهای امروزی پشتیبانی می‌کند. این مرورگرها را می‌توانید به صورت دقیق در زیر مشاهده کنید.


ردیف
مرورگر
نسخه‌های قابل پشتیبانی
1
Chrome
آخرین نسخه
2
Firefox
آخرین نسخه
3
Edge
2 نسخه‌ی اصلی آخر
4
IE
9 و 10 و 11
5
IE Mobile
11
6
Safari
2 نسخه‌ی اصلی آخر
7
iOS
2 نسخه‌ی اصلی آخر
8
Android
Nougat (7.0)
Marshmallow (6.0)
Lollipop (5.0, 5.1)
KitKat (4.4)

فرآیند یکپارچگی پیوسته‌ی Angular، واحدهای آزمایشی فریمورک تمامی این مرورگرها را به ازای هر pull request و با استفاده از SauceLabs و Browserstack اجرا می‌کند.


پلی فیل‌ها (Polyfills)

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


فعال سازی پلی فیل‌ها

کاربران Angular CLI می‌توانند از طریق فایل src/polyfills.ts که CLI آن را به همراه پروژه‌تان ایجاد کرده است، پلی فیل‌ها را فعال کنند.
این فایل، پلی فیل‌های اجباری و بسیاری از پلی فیل‌های اختیاری را به عنوان دستورات جاوا اسکریپت import در خود جای داده است.
زمانی که شما پروژه‌ی خود را ایجاد کنید و دستورات متناظر import آن‌ها آماده به کار شوند، بسته‌های نرم افزاری npm برای پلی فیل‌های اجباری (مانند zone.js) به صورت خودکار برایتان نصب خواهند شد. به احتمال زیاد نیازی به دستکاری این بسته‌های نرم افزاری نخواهد بود.
اما اگر به پلی فیلی اختیاری نیاز دارید، باید بسته‌ی نرم افزاری npm آن را نصب کنید. برای مثال اگر به پلی فیل انیمیشن‌های اینترنتی نیاز داشته باشید، می‌توانید آن را به همراه npm و با استفاده از دستور زیر (و یا با استفاده از yarn ) نصب کنید.


# note that the web-animations-js polyfill is only here as an example
# it isn't a strict requirement of Angular anymore (more below)
npm install --save web-animations-js

سپس فایل polyfills.ts را باز کنید و مانند مثال زیر دستور متناظر import را از حالت کامنت خارج کنید:

src/polyfills.ts
/**
* Required to support Web Animations `@angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
import 'web-animations-js';// Run `npm install --save web-animations-js`.

اگر نمی‌توانید پلی فیل مورد نظرتان را در polyfills.ts پیدا کنید، آن را با استفاده از این الگو اضافه کنید:

  1. بسته‌ی نرم افزاری npm را نصب کنید.
  2. این فایل را در polyfills.ts ایمپورت کنید.

افرادی که جزء کاربران CLI نیستند می‌توانند از دستورالعمل‌های زیر پیروی کنند.


پلی فیل‌های اجباری

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

مرورگرها (دسکتاپ و موبایل)
پلی فیل‌های مورد نیاز
Chrome, Firefox, Edge, Safari 9+
ES7/reflect (فقط JIT)
Safari 7 & 8, IE10 & 11, Android 4.1+
ES6
IE9
ES6
classList

ویژگی‌های اختیاری مرورگر برای پلی فیل

برخی از ویژگی‌های Angular ممکن است به پلی فیل‌های بیشتری نیاز داشته باشند.
مثلاً کتابخانه‌ی انیمیشن‌ها به API استاندارد انیمیشن تحت وب وابسته است. این API امروزه تنها در کروم و فایرفاکس در دسترس هستند. (توجه داشته باشید که تنها اگر از AnimationBuilder استفاده شود، وابستگی web-animations-js الزامی می‌شود.)
در جدول زیر ویژگی‌هایی که به پلی فیل‌های بیشتری نیاز دارند، نشان داده شده‌اند:

ویژگی
پلی فیل
مرورگرها (دسکتاپ و موبایل)
JIT compilation
برای انعکاس metadata الزامی است.
ES7/reflect
تمامی مرورگرهای امروزی. به صورت پیش فرض فعال است. اگر همیشه از AOT استفاده می‌کنید و تنها از decorator های Angular استفاده می‌کنید، می‌توانید آن را حذف کنید.
Animations
تنها اگر Animation Builder داخل برنامه استفاده شود - - در Angular پشتیبانی انیمیشن استاندارد نیازی به هیچ پلی فیلی ندارد (مانند NG6).
Web Animations
اگر از AnimationBuilder استفاده شود، در این صورت پلی فیل پشتیبانی از IE، Edge و Safari را فعال می‌کند (کروم و فایرفاکس ذاتاً از این قابلیت پشتیبانی می‌کنند).
اگر از پایپ‌های i18n نامناسب زیر استفاده کنید:
date,
currency,
decimal,
percent
Intl API
تمامی مرورگرها به غیر از کروم، فایرفاکس، Edge، IE11 و Safari 10
NgClass
در المان‌های SVG
classList
IE10, IE11
Http
زمان ارسال و دریافت داده‌های دودویی
Typed Array
Blob
FormData
IE 9

پلی فیل‌های پیشنهادی

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

پلی فیل
لایسنس
حجم*
ES7/reflect
MIT
0.5KB
ES6
MIT
27.4KB
classList
Public domain
1KB
Intl
MIT / Unicode license
13.5KB
Web Animations
Apache
14.8KB
Typed Array
MIT
4KB
Blob
MIT
1.3KB
FormData
MIT
0.4KB

* این ارقام برای کدهای gzip شده و فشرده شده لحاظ شده‌اند و توسط کامپایلر closure محاسبه شده‌اند.


پلی فیل‌های مناسب برای افرادی که کاربر CLI نیستند

اگر از CLI استفاده نمی‌کنید، در این صورت باید اسکریپت‌های پلی فیل خود را داخل صفحه‌ی وب میزبان (index.html) اضافه کنید. این کار را می‌توانید مانند زیر انجام دهید:

src/index.html
< !-- pre-zone polyfills -- >
< script src="node_modules/core-js/client/shim.min.js" >< /script >
< script src="node_modules/web-animations-js/web-animations.min.js" >< /script >
< script >
/**
 * you can configure some zone flags which can disable zone interception for some
 * asynchronous activities to improve startup performance - use these options only
 * if you know what you are doing as it could result in hard to trace down bugs..
 */
// __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
// __Zone_disable_on_property = true; // disable patch onProperty such as onclick
// __zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 
/*
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
// __Zone_enable_cross_context_check = true;
< /script >
< !-- zone.js required by Angular -- >
< script src="node_modules/zone.js/dist/zone.js" >< /script >
< -- application polyfills --! >


  • 54
  •    74
  • تاریخ ارسال :   1397/08/05

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .