עדכון ברכיבי אינטרנט – תוספת זמן לשדרוג לממשקי API v1

Jonathan Bingham
X GitHub
Arthur Evans
X GitHub

ממשקי ה-API של Web Components v1 הם תקן של פלטפורמת אינטרנט ששולחים ב-Chrome,‏ Safari,‏ Firefox ו-Edge (בקרוב). מיליוני אתרים משתמשים בממשקי ה-API בגרסה 1, ומגיעים למיליארדי משתמשים מדי יום. מפתחים שהשתמשו בגרסאות הטיוטות של ממשקי ה-API בגרסה 0 סיפקו משוב חשוב שהשפיע על המפרטים. אבל ממשקי ה-API בגרסה 0 נתמכו רק ב-Chrome. כדי להבטיח יכולת פעולה הדדית, בסוף השנה שעברה הודענו שטיוטות ממשקי ה-API האלה הוצאו משימוש ונקבע מועד להסרתן מ-Chrome 73.

מאחר שמפתחים רבים ביקשו זמן נוסף לביצוע המיגרציה, ממשקי ה-API עדיין לא הוסרו מ-Chrome. התוכנית היא להסיר את טיוטות ממשקי ה-API בגרסה 0 ב-Chrome 80, בסביבות פברואר 2020.

אם אתם חושבים שאתם משתמשים בממשקי ה-API בגרסה 0, כדאי לקרוא את המידע הבא:

חזרה לעתיד: השבתת ממשקי ה-API בגרסה 0

כדי לבדוק את האתר כשממשקי ה-API בגרסה 0 מושבתים, צריך להפעיל את Chrome משורת הפקודה עם הדגלים הבאים:

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

צריך לצאת מ-Chrome לפני שמפעילים אותו משורת הפקודה. אם Chrome Canary מותקן אצלכם, תוכלו להריץ את הבדיקה ב-Canary תוך שמירה על הדף הזה ב-Chrome.

כדי לבדוק את האתר כשממשקי ה-API בגרסה 0 מושבתים:

  1. אם אתם משתמשים ב-Mac OS, עוברים אל chrome://version כדי למצוא את נתיב קובץ ההפעלה של Chrome. תצטרכו את הנתיב בשלב 3.
  2. יוצאים מ-Chrome.

  3. מפעילים מחדש את Chrome עם הדגלים של שורת הפקודה:

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

    הוראות להפעלת Chrome עם דגלים מפורטות במאמר הפעלת Chromium עם דגלים. לדוגמה, ב-Windows, אפשר להריץ את הפקודה:

    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. לבסוף, טוענים את האפליקציה ומפעילים את התכונות. אם הכול פועל כצפוי, סיימתם.

שימוש ב-polyfills של v0

הפוליפילים של Web Components v0 מספקים תמיכה בממשקי ה-API של v0 בדפדפנים שלא מספקים תמיכה מקורית. אם האתר לא פועל ב-Chrome כשמפסיק את השימוש בממשקי ה-API בגרסה 0, סביר להניח שה-polyfills לא נטענים. יש כמה אפשרויות:

  • לא טוענים את ה-polyfills בכלל. במקרה כזה, האתר לא אמור לפעול בדפדפנים אחרים, כמו Firefox ו-Safari.
  • אתם טוענים את ה-polyfills באופן מותנה על סמך ניטור הדפדפן. במקרה כזה, האתר אמור לפעול בדפדפנים אחרים. אפשר לדלג אל טעינה של ה-polyfills.

בעבר, צוות פרויקט Polymer וגורמים אחרים המליצו לטעון את ה-polyfills באופן מותנה על סמך זיהוי תכונות. הגישה הזו אמורה לפעול בצורה תקינה כשממשקי ה-API בגרסה 0 מושבתים.

התקנת ה-polyfills של v0

הפוליפילים של Web Components v0 אף פעם לא פורסמו במרשם npm. אם אתם כבר משתמשים ב-Bower בפרויקט, תוכלו להתקין את ה-polyfills באמצעותו. אפשר גם להתקין מקובץ zip.

  • כדי להתקין באמצעות Bower:

    bower install --save webcomponents/webcomponentsjs#^0.7.0

  • כדי להתקין מקובץ zip, מורידים את הגרסה העדכנית ביותר של 0.7.x מ-GitHub:

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

    אם מתקינים מקובץ zip, צריך לעדכן את הפוליפילים באופן ידני אם תצא גרסה אחרת. מומלץ לבדוק את ה-polyfills בקוד שלכם.

טעינת ה-polyfills של v0

הפוליפילים של Web Components v0 מוצעים בשני חבילות נפרדות:

webcomponents-min.js כולל את כל ה-polyfills. החבילה הזו כוללת את ה-polyfill של DOM האפל, שהוא גדול בהרבה מה-polyfills האחרים ויש לו השפעה גדולה יותר על הביצועים. צריך להשתמש בחבילה הזו רק אם אתם זקוקים לתמיכה ב-DOM בצל.
webcomponents-lite-min.js כולל את כל ה-polyfills מלבד shadow DOM. הערה: משתמשי Polymer 1.x צריכים לבחור בחבילה הזו, כי הדמיה של Shadow DOM נכללה ישירות בספריית Polymer. משתמשי Polymer 2.x צריכים גרסה אחרת של ה-polyfills. פרטים נוספים זמינים בפוסט בבלוג של פרויקט Polymer.

יש גם פוליפילים נפרדים שזמינים כחלק מחבילת הפוליפילים של Web Components. שימוש ב-polyfills נפרדים הוא נושא מתקדם שלא נדון כאן.

כדי לטעון את ה-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 באופן מותנה על סמך זיהוי תכונות, האתר שלכם אמור להמשיך לפעול אחרי הסרת התמיכה בגרסה 0.

אם אתם טוענים את הפוליפילים באופן מותנה באמצעות זיהוי רכיבים בדפדפן (כלומר, טעינת הפוליפילים בדפדפנים שאינם Chrome), האתר שלכם ייכשל כשהתמיכה ב-v0 תוסר מ-Chrome.

איך אוכל לקבל עזרה? לא ברור לי באילו ממשקי API אני משתמש!

אם אתם לא יודעים אם אתם משתמשים באחד מממשקי ה-API בגרסה 0, או באיזה ממשקי API אתם משתמשים, אתם יכולים לבדוק את הפלט של המסוף ב-Chrome.

  1. אם הפעלתם בעבר את Chrome עם הדגלים להשבתת ממשקי ה-API בגרסה 0, צריך לסגור את Chrome ולהפעיל אותו מחדש באופן רגיל.
  2. פותחים כרטיסייה חדשה ב-Chrome וטעונים את האתר.
  3. מקישים על Control+Shift+J (ב-Windows, ב-Linux וב-ChromeOS) או על Command+Option+J (ב-Mac) כדי לפתוח את מסוף DevTools.
  4. בודקים אם יש הודעות על הוצאה משימוש בפלט של המסוף. אם יש הרבה פלט במסוף, מזינים את הערך 'הוצאה משימוש' בתיבה מסנן.
חלון מסוף שבו מוצגות אזהרות על הוצאה משימוש

אמורות להופיע הודעות על הוצאה משימוש לכל ממשק API בגרסה 0.0 שבו אתם משתמשים. בפלט שלמעלה מוצגות הודעות לגבי HTML Imports,‏ Custom Elements v0 ו-Shadow DOM v0.

אם אתם משתמשים באחד או יותר מממשקי ה-API האלה, כדאי לעיין במאמר שימוש ב-polyfills של v0.

השלבים הבאים: מעבר מגרסה 0

לוודא שה-polyfills של v0 נטענים כדי להבטיח שהאתר ימשיך לפעול אחרי הסרת ממשקי ה-API של v0. מומלץ לעבור לממשקי ה-API של Web Components v1, שיש להם תמיכה רחבה.

אם אתם משתמשים בספרייה של רכיבי אינטרנט, כמו ספריית Polymer,‏ X-Tag או SkateJS, השלב הראשון הוא לבדוק אם יש גרסאות חדשות יותר של הספרייה שתומכות בממשקי ה-API של גרסה 1.

אם יש לכם ספרייה משלכם או שכתבתם רכיבים מותאמים אישית בלי ספרייה, תצטרכו לעדכן לממשקי ה-API החדשים. מקורות המידע הבאים עשויים לעזור:

סיכום

טיוטות ממשקי ה-API של Web Components v0 יוצאות משימוש. אם יש משהו אחד שצריך לקחת מהפוסט הזה, זה לוודא שבודקים את האפליקציה כשממשקי ה-API בגרסה 0 מושבתים ומטענים את ה-polyfills לפי הצורך.

לטווח הארוך, מומלץ לשדרג לממשקי ה-API העדכניים ביותר ולהמשיך להשתמש ברכיבי אינטרנט.