به روز رسانی اجزای وب - زمان بیشتری برای ارتقا به API های v1

Jonathan Bingham
X GitHub
Arthur Evans
X GitHub

API های Web Components v1 یک استاندارد پلتفرم وب هستند که در کروم، سافاری، فایرفاکس و (به زودی) Edge عرضه شده است. API های v1 به معنای واقعی کلمه توسط میلیون ها سایت استفاده می شود و روزانه به میلیاردها کاربر می رسد. توسعه دهندگانی که از API های پیش نویس v0 استفاده می کردند، بازخورد ارزشمندی ارائه کردند که بر مشخصات تأثیر گذاشت. اما API های v0 فقط توسط کروم پشتیبانی می شدند. به منظور اطمینان از قابلیت همکاری، اواخر سال گذشته، ما اعلام کردیم که این پیش‌نویس‌های API منسوخ شده‌اند و قرار است از Chrome 73 حذف شوند.

از آنجایی که برنامه‌نویسان به اندازه کافی زمان بیشتری برای انتقال درخواست کردند، APIها هنوز از Chrome حذف نشده‌اند. APIهای پیش‌نویس v0 اکنون در کروم 80 در حدود فوریه 2020 حذف شده‌اند .

اگر فکر می‌کنید از V0 API استفاده می‌کنید، باید بدانید:

بازگشت به آینده: غیرفعال کردن API های v0

برای آزمایش سایت خود با API های v0 غیرفعال، باید Chrome را از خط فرمان با پرچم های زیر راه اندازی کنید:

--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

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

برای آزمایش سایت خود با V0 API های غیرفعال:

  1. اگر از سیستم عامل Mac استفاده می کنید، به chrome://version مراجعه کنید تا مسیر اجرایی Chrome را پیدا کنید. شما به مسیر مرحله 3 نیاز دارید.
  2. از Chrome خارج شوید.

  3. Chrome را با پرچم های خط فرمان راه اندازی مجدد کنید:

    --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

    برای دستورالعمل‌های مربوط به راه‌اندازی Chrome با پرچم‌ها، به اجرای Chromium با پرچم‌ها مراجعه کنید. به عنوان مثال، در ویندوز، ممکن است اجرا کنید:

    chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports

  4. برای بررسی مجدد اینکه آیا مرورگر را به درستی راه اندازی کرده اید، یک تب جدید باز کنید، کنسول DevTools را باز کنید و دستور زیر را اجرا کنید:

    console.log(
"Native HTML Imports?", 'import' in document.createElement('link'),
"Native Custom Elements v0?", 'registerElement' in document,
"Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));

    اگر همه چیز همانطور که انتظار می رود کار می کند، باید ببینید:

    Native HTML Imports? false Native Custom Elements v0? false Native Shadow DOM v0? false

    اگر مرورگر برای هر یک یا همه این ویژگی ها درست گزارش کند، مشکلی وجود دارد. قبل از راه‌اندازی مجدد با پرچم‌ها، مطمئن شوید که Chrome را کاملاً ترک کرده‌اید.

  5. در نهایت، برنامه خود را بارگذاری کنید و از طریق ویژگی ها اجرا کنید. اگر همه چیز همانطور که انتظار می رود کار کند، کار شما تمام شده است.

از v0 polyfills استفاده کنید

Web Components v0 polyfills از API های v0 در مرورگرهایی که پشتیبانی بومی ارائه نمی کنند، پشتیبانی می کند. اگر سایت شما در Chrome با غیرفعال بودن API های v0 کار نمی کند، احتمالاً polyfills را بارگیری نمی کنید. چند احتمال وجود دارد:

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

در گذشته، تیم پروژه پلیمر و سایرین بارگذاری پلی پرها را به صورت مشروط بر اساس تشخیص ویژگی توصیه کرده بودند. این رویکرد باید با V0 API های غیرفعال به خوبی کار کند.

v0 polyfills را نصب کنید

Web Components v0 polyfills هرگز در رجیستری npm منتشر نشد. اگر پروژه شما از قبل از Bower استفاده می کند، می توانید پلی فیل ها را با استفاده از Bower نصب کنید. یا می توانید از یک فایل فشرده نصب کنید.

  • برای نصب با Bower:

    bower install --save webcomponents/webcomponentsjs#^0.7.0

  • برای نصب از یک فایل فشرده، آخرین نسخه 0.7.x را از GitHub دانلود کنید:

    https://github.com/webcomponents/webcomponentsjs/releases/tag/v0.7.24

    اگر از یک فایل فشرده نصب می کنید، اگر نسخه دیگری منتشر شد، باید پلی فیل ها را به صورت دستی به روز کنید. احتمالاً می خواهید که polyfills ها را با کد خود بررسی کنید.

v0 polyfills را بارگیری کنید

Web Components v0 polyfills به صورت دو بسته مجزا ارائه می شود:

webcomponents-min.js شامل تمام پلی فیل ها می شود. این بسته شامل پلی‌فیل سایه DOM است که بسیار بزرگ‌تر از پلی‌فیل‌های دیگر است و تأثیر عملکرد بیشتری دارد. فقط در صورت نیاز به پشتیبانی shadow DOM از این بسته استفاده کنید.
webcomponents-lite-min.js شامل تمام پلی‌فیل‌ها به جز Shadow DOM است. توجه: کاربران Polymer 1.x باید این بسته را انتخاب کنند، زیرا شبیه سازی Shadow DOM مستقیماً در کتابخانه Polymer گنجانده شده است. کاربران Polymer 2.x به نسخه متفاوتی از polyfills نیاز دارند. برای جزئیات بیشتر به پست وبلاگ پروژه پلیمر مراجعه کنید.

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

برای بارگذاری بی قید و شرط پلی فیل ها:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-lite-min.js">
</script>

یا:

<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-min.js">
</script>

اگر پلی‌فیل‌ها را مستقیماً از گیت‌هاب نصب کرده‌اید، باید مسیری را که پلی‌فیل‌ها را نصب کرده‌اید، ارائه کنید.

اگر به صورت مشروط polyfills را بر اساس تشخیص ویژگی بارگیری کنید، سایت شما باید با حذف پشتیبانی v0 به کار خود ادامه دهد.

اگر پلی‌فیل‌ها را به‌صورت مشروط با استفاده از sniffing مرورگر بارگیری کنید (یعنی بارگیری پلی‌فیل‌ها در مرورگرهای غیر Chrome)، وقتی پشتیبانی v0 از Chrome حذف شود، سایت شما از کار می‌افتد.

کمک! من نمی دانم از چه API هایی استفاده می کنم!

اگر نمی‌دانید از هر یک از APIهای v0 استفاده می‌کنید - یا از کدام API استفاده می‌کنید، می‌توانید خروجی کنسول را در Chrome بررسی کنید.

  1. اگر قبلاً Chrome را با پرچم‌هایی برای غیرفعال کردن APIهای v0 راه‌اندازی کرده‌اید، Chrome را ببندید و به طور معمول آن را مجدداً راه‌اندازی کنید.
  2. یک برگه کروم جدید باز کنید و سایت خود را بارگیری کنید.
  3. Control+Shift+J (Windows، Linux، ChromeOS) یا Command+Option+J (Mac) را فشار دهید تا DevTools Console باز شود.
  4. خروجی کنسول را برای پیام های منسوخ بررسی کنید. اگر تعداد زیادی خروجی کنسول وجود دارد، "Deprecation" را در کادر فیلتر وارد کنید.
پنجره کنسول هشدارهای منسوخ شدن را نشان می دهد

شما باید برای هر V0 API که استفاده می کنید، پیام های منسوخ شدن را ببینید. خروجی بالا پیام هایی را برای واردات HTML، عناصر سفارشی v0 و سایه DOM v0 نشان می دهد.

اگر از یک یا چند مورد از این API ها استفاده می کنید، به استفاده از v0 polyfills مراجعه کنید.

مراحل بعدی: خروج از v0

مطمئن شدن از بارگیری v0 polyfills باید مطمئن شود که سایت شما با حذف API های v0 به کار خود ادامه می دهد. توصیه می کنیم به API های Web Components v1 بروید که به طور گسترده پشتیبانی می شوند.

اگر از یک کتابخانه Web Components مانند کتابخانه Polymer، X-Tag یا SkateJS استفاده می‌کنید، اولین قدم این است که بررسی کنید آیا نسخه‌های جدیدتری از کتابخانه موجود است که از APIهای v1 پشتیبانی می‌کنند یا خیر.

اگر کتابخانه خود را دارید یا عناصر سفارشی را بدون کتابخانه نوشته‌اید، باید به APIهای جدید به‌روزرسانی کنید. این منابع ممکن است کمک کند:

جمع بندی

API های پیش نویس Web Components v0 از بین می روند. اگر یک چیز را از این پست حذف کردید، مطمئن شوید که برنامه خود را با غیرفعال بودن API های v0 آزمایش کرده و در صورت نیاز، polyfills را بارگیری کنید .

برای درازمدت، ما شما را تشویق می‌کنیم که به آخرین APIها ارتقا دهید و به استفاده از مؤلفه‌های وب ادامه دهید!