ממשקי Web Components v1 API הם תקן של פלטפורמת אינטרנט שנשלח ל-Chrome, Safari, Firefox ו-Edge (בקרוב). ממשקי API של v1 נמצאים בשימוש של מיליוני אתרים, ומגיעים למיליארדי משתמשים מדי יום. מפתחים שמשתמשים בטיוטה של גרסה 0 של ממשקי ה-API סיפקו משוב חשוב שהשפיע על המפרטים. עם זאת, ממשקי ה-API של v0 נתמכים רק על ידי Chrome. כדי להבטיח יכולת פעולה הדדית, בסוף השנה שעברה הודענו שטיוטות ממשקי ה-API האלה הוצאו משימוש ותוזמנו להסרה החל מגרסה 73 של Chrome.
מכיוון שמספיק מפתחים ביקשו עוד זמן להעברה, ממשקי ה-API עדיין לא הוסרו מ-Chrome. ממשקי ה-API של טיוטות v0 מטורגטים עכשיו להסרה ב-Chrome בגרסה 80, בסביבות פברואר 2020.
אם לדעתכם אתם משתמשים בממשקי ה-API של v0:
- צריך לבדוק את האתר כשממשקי ה-API של v0 מושבתים. אם האתר שלך פועל כצפוי, זה היה נהדר! סיימת. להוראות, קראו את המאמר בחזרה לעתיד: השבתת ממשקי API של v0.
- אם אתם משתמשים בספרייה של Polymer בגרסה 1 או v2 – יש לפעול לפי ההוראות שפורסמו קודם על ידי צוות Polymer.
- אם אתם משתמשים בצלליות DOM v0, ברכיבים מותאמים אישית v0 או בייבוא של HTML, תצטרכו לטעון כמה polyfills. למידע נוסף, ראו שימוש ב-v0 polyfills.
- אם אתם לא בטוחים במה אתם משתמשים, אל דאגה. כדאי לעיין בעזרה! אני לא יודעת באילו ממשקי API אני משתמשת!
חזרה לעתיד: השבתת ממשקי API של גרסה 0
כדי לבדוק את האתר כשממשקי ה-API של v0 מושבתים, עליכם להפעיל את Chrome משורת הפקודה עם הדגלים הבאים:
--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports
כדי להפעיל את Chrome באמצעות שורת הפקודה, יש לצאת ממנו. אם מותקן אצלכם Chrome Canary, תוכלו להריץ את הבדיקה ב-Canary ועדיין להשאיר את הדף הזה נטען ב-Chrome.
כדי לבדוק את האתר כשממשקי API של V0 מושבתים:
- אם אתם משתמשים ב-Mac OS, אתם יכולים לעיין ב-
chrome://versionכדי למצוא את נתיב קובץ ההפעלה של Chrome. תצטרכו את הנתיב בשלב 3. - סוגרים את Chrome.
מפעילים מחדש את Chrome באמצעות הסימונים של שורת הפקודה:
--disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImportsלהוראות כיצד להפעיל את Chrome באמצעות דגלים, קראו את המאמר הפעלת Chromium באמצעות דגלים. לדוגמה, ב-Windows, אפשר להריץ את הפקודה:
chrome.exe --disable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImportsכדי לוודא שהפעלתם את הדפדפן בצורה תקינה, פותחים כרטיסייה חדשה, פותחים את מסוף כלי הפיתוח ומריצים את הפקודה הבאה:
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 לפני שאתם מפעילים מחדש עם הדגלים.
לבסוף, צריך לטעון את האפליקציה ולעבור על כל התכונות. אם הכול עובד כמו שצריך,
שימוש ב-Polyfills מגרסה 0
רכיבי ה-Polyfill של רכיבי Web Components v0 מספקים תמיכה בממשקי ה-API של v0 בדפדפנים שלא מספקים תמיכה מובנית. אם האתר שלכם לא פועל ב-Chrome כשממשקי ה-API של גרסה 00 מושבתים, כנראה שאתם לא טוענים את ה-polyfills. יש כמה אפשרויות:
- אינך טוען את ה-polyfills בכלל. במקרה כזה, האתר אמור להיכשל בדפדפנים אחרים, כמו Firefox ו-Safari.
- אתה טוען את ה-polyfills באופן מותנה בהתבסס על סריקה של הדפדפן. במקרה כזה, האתר אמור לפעול בדפדפנים אחרים. מדלגים קדימה לשלב טעינת ה-polyfills.
בעבר, הצוות של Polymer Project ואנשים אחרים המליצו לטעון את ה-polyfills באופן מותנה על סמך זיהוי התכונות. הגישה הזו אמורה לפעול היטב כשממשקי API של v0 מושבתים.
התקנת polyfills גרסה 0
הדומיינים של רכיבי האינטרנט v0 מעולם לא פורסמו במרשם ה-NPM. תוכלו להתקין את ה-Polyfills באמצעות Bower, אם הפרויקט שלכם כבר משתמש ב-Bower. אפשר גם להתקין מתוך קובץ ZIP.
כדי להתקין באמצעות Bower:
bower install --save webcomponents/webcomponentsjs#^0.7.0כדי להתקין מקובץ ZIP, יש להוריד מ-GitHub את הגרסה האחרונה 0.7.x:
https://github.com/webcomponents/webcomponentsjs/releases/tag/v0.7.24
אם מתקינים מקובץ ZIP, צריך לעדכן את ה-Polyfills באופן ידני אם תצא גרסה אחרת. סביר להניח שתרצו לבדוק את ה-Polyfills באמצעות הקוד שלכם.
טעינת polyfills מגרסה 0
ה-Polyfills של רכיבי האינטרנט v0 מסופקים כשני חבילות נפרדות:
webcomponents-min.js
|
כולל את כל ה-polyfills. החבילה הזו כוללת את ה-DOM Polyfill, שהוא גדול בהרבה מה-Polyfills האחרים ויש לו השפעה גדולה יותר על הביצועים. כדאי להשתמש בחבילה הזו רק אם אתם צריכים תמיכה ב-DOM DOM. |
webcomponents-lite-min.js
|
כולל את כל ה-polyfills פרט ל-DOM DOM. הערה: משתמשי Polymer 1.x צריכים לבחור בחבילה הזו, כי אמולציית Shadow DOM נכללה ישירות בספרייה של Polymer. משתמשי Polymer 2.x זקוקים לגרסה שונה של ה-polyfills. לפרטים נוספים, קראו את הפוסט בבלוג של Polymer Project. |
קיימים גם polyfills בודדים הזמינים כחלק מחבילת polyfill של רכיבי האינטרנט. נושא השימוש במילויים מרובים בנפרד הוא נושא מתקדם שלא מתואר כאן.
כדי לטעון את ה-Polyfills ללא תנאי:
<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-lite-min.js">
</script>
או:
<script src="/bower_components/webcomponents/webcomponentsjs/webcomponents-min.js">
</script>
אם התקנתם את ה-polyfills ישירות מ-GitHub, תצטרכו לספק את הנתיב שבו התקנתם את ה-polyfills.
אם תטענו באופן מותנה את ה-Polyfills על סמך זיהוי תכונות, האתר שלכם ימשיך לפעול אחרי שהתמיכה ב-v0 תוסר.
אם אתם טוענים את ה-polyfills באופן מותנה באמצעות סריקה בדפדפן (כלומר, טעינת ה-polyfills בדפדפנים שאינם ב-Chrome), האתר ייכשל כשהתמיכה ב-V0 תוסר מ-Chrome.
איך אוכל לקבל עזרה? אני לא יודע באילו ממשקי API אני משתמש!
אם לא ידוע לכם אם אתם משתמשים בממשקי ה-API של v0, או באילו ממשקי API אתם משתמשים, ניתן לבדוק את פלט המסוף ב-Chrome.
- אם הפעלתם בעבר את Chrome עם הדגלים כדי להשבית את ממשקי ה-API של v0, עליכם לסגור את Chrome ולהפעיל אותו מחדש כרגיל.
- פותחים כרטיסייה חדשה ב-Chrome וטוענים את האתר.
- לוחצים על Control+Shift+J (Windows, Linux, ChromeOS) או על Command+Option+J (Mac) כדי לפתוח את Console של כלי הפיתוח.
- בודקים אם יש הודעות על הוצאה משימוש של הפלט של המסוף. אם יש הרבה פלט במסוף, מזינים 'Deprecation' בתיבה Filter.
אתם אמורים לראות הודעות על הוצאה משימוש לכל גרסה v0 API שבה אתם משתמשים. הפלט שלמעלה מציג הודעות לגבי ייבוא HTML, אלמנטים מותאמים אישית v0 ו-shadow DOM v0.
אם אתם משתמשים באחד או יותר מממשקי ה-API האלה, עיינו במאמר שימוש ב-v0 polyfills.
השלבים הבאים: מעבר לגרסה 0
כדי לוודא שהאתר שלכם ממשיך לפעול אחרי שמסירים את ממשקי ה-API של v0, חשוב לוודא שנטענים ממשקי ה-Polyfill של v0. אנחנו ממליצים לעבור לממשקי Web Components v1 API, שיש להם תמיכה רחבה.
אם אתם משתמשים בספריית Web Components (רכיבי אינטרנט), כמו ספריית Polymer , X-Tag או SkateJS, בשלב הראשון צריך לבדוק אם יש גרסאות חדשות של הספרייה שתומכות בממשקי ה-API של v1.
אם יש לכם ספרייה משלכם, או אם כתבתם רכיבים מותאמים אישית ללא ספרייה, תצטרכו לעדכן לממשקי ה-API החדשים. מקורות המידע הבאים יכולים לעזור:
סיכום
אנחנו מוציאים משימוש את טיוטת ממשקי Web Components v0. אם נעלה דבר אחד מהפוסט הזה, הקפידו לבדוק את האפליקציה כשממשקי ה-API של v0 מושבתים ולטעון את ה-polyfills לפי הצורך.
בטווח הארוך, אנחנו ממליצים לשדרג לממשקי ה-API העדכניים ביותר ולהמשיך להשתמש ברכיבי האינטרנט!