Aktualizacja komponentów sieciowych – więcej czasu na uaktualnienie do interfejsów API w wersji 1

Jonathan Bingham

Arthur Evans

Interfejsy API Web Komponenty w wersji 1 to standard platformy internetowej, który jest dostępny w Chrome, Safari, Firefox i (wkrótce) Edge. Z interfejsów API w wersji 1 używają dosłownie miliony witryn i docierają do miliardów użytkowników każdego dnia. Deweloperzy korzystający z interfejsów API w wersji 0 zostały przekazane cennym opiniom, które wpłynęły na specyfikację. Jednak interfejsy API w wersji 0 były obsługiwane tylko przez Chrome. Aby zapewnić interoperacyjność, pod koniec zeszłego roku ogłosiliśmy, że te wersje robocze interfejsów API zostały wycofane, a od wersji Chrome 73 zaplanowano ich usunięcie.

Wystarczająca liczba programistów poprosiła o więcej czasu na migrację, więc interfejsy API nie zostały jeszcze usunięte z Chrome. Wersje robocze interfejsów API w wersji 0 są teraz planowane do usunięcia w Chrome 80, około lutego 2020 roku.

Jeśli uważasz, że możesz korzystać z interfejsów API w wersji 0, musisz wiedzieć, że:

• Przetestuj witrynę przy wyłączonych interfejsach API w wersji 0. Jeśli strona działa zgodnie z oczekiwaniami, gratulacje! Gotowe. Instrukcje znajdziesz w sekcji Powrót do przyszłości: wyłączanie interfejsów API w wersji 0.
• Jeśli używasz biblioteki Polymer w wersji 1 lub 2, wykonaj instrukcje opublikowane wcześniej przez zespół Polymer.
• Jeśli korzystasz z modelu Shadow DOM w wersji 0, z elementów niestandardowych w wersji 0 lub z importów kodu HTML, musisz wczytać kilka plików polyfill. Zapoznaj się z informacjami na temat używania kodu polyfill v0.
• Jeśli nie masz pewności, z czego korzystasz, nie przejmuj się. Zobacz Centrum pomocy Nie wiem, których interfejsów API używam.

Powrót do przyszłości: wyłączanie interfejsów API w wersji 0

Aby przetestować witrynę z wyłączonymi interfejsami API w wersji 0, musisz uruchomić Chrome z poziomu wiersza poleceń z tymi flagami:

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

Musisz zamknąć Chrome, zanim uruchomisz go przy użyciu wiersza poleceń. Jeśli masz zainstalowaną przeglądarkę Chrome Canary, możesz uruchomić test w niej przy wczytywaniu strony w Chrome.

Aby przetestować witrynę z wyłączonymi interfejsami API w wersji 0:

1. W systemie Mac OS przejdź do folderu chrome://version, aby znaleźć ścieżkę pliku wykonywalnego Chrome. Będziesz potrzebować ścieżki z kroku 3.
2. Zamknij Chrome.

3. Uruchom ponownie Chrome, używając flag wiersza poleceń:

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

   Instrukcje uruchamiania Chrome z flagami znajdziesz w artykule Uruchamianie Chromium z flagami. W systemie Windows możesz na przykład uruchomić:

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

4. Aby sprawdzić, czy przeglądarka została poprawnie uruchomiona, otwórz nową kartę, otwórz konsolę Narzędzi deweloperskich i uruchom to polecenie:

   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'));
   

   Jeśli wszystko działa zgodnie z oczekiwaniami, powinien pojawić się komunikat:

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

   Jeśli przeglądarka zgłasza wartość prawda w przypadku niektórych lub wszystkich tych funkcji, coś jest nie tak. Zanim uruchomisz ponownie Chrome z flagami, zamknij przeglądarkę.

5. Na koniec załaduj aplikację i zapoznaj się z jej funkcjami. Jeśli wszystko działa zgodnie z oczekiwaniami, gotowe.

Używanie elementów polyfill v0

Kody polyfill Web Komponenty w wersji 0 zapewniają obsługę interfejsów API w wersji 0 w przeglądarkach, które nie zapewniają natywnej obsługi. Jeśli Twoja witryna nie działa w Chrome z wyłączonymi interfejsami API w wersji 0, prawdopodobnie nie wczytujesz kodu polyfill. Istnieje kilka możliwości:

• Kod polyfill w ogóle się nie wczytuje. Witryna powinna wtedy działać nieprawidłowo w innych przeglądarkach, takich jak Firefox czy Safari.
• Wczytujesz kod polyfill warunkowo w zależności od wykrywania zapachów przeglądarki. W takim przypadku Twoja witryna powinna działać w innych przeglądarkach. Przejdź od razu do kroku Wczytywanie kodu polyfill.

W przeszłości zespół Polymer Project i inni pracownicy zalecali ładowanie elementów polyfill warunkowo, zależnie od wykrycia cech. To podejście powinno działać poprawnie, gdy wyłączone interfejsy API w wersji 0 są wyłączone.

Instalowanie kodu polyfill v0

Elementy polyfill Web Komponenty w wersji 0 nigdy nie zostały opublikowane w rejestrze npm. Jeśli Twój projekt korzysta już z Bower, możesz zainstalować kod polyfill za pomocą Bower. Możesz też zainstalować ją z pliku ZIP.

• Aby zainstalować za pomocą Bower:

  bower install --save webcomponents/webcomponentsjs#^0.7.0

• Aby zainstalować aplikację z pliku ZIP, pobierz najnowszą wersję 0.7.x z GitHuba:

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

  Jeśli instalujesz kod z pliku ZIP, musisz ręcznie zaktualizować kod polyfill, gdy pojawi się inna wersja. Zalecamy sprawdzenie kodu polyfill w kodzie.

Wczytywanie kodu polyfill v0

Elementy polyfill Web Komponenty w wersji 0 są dostarczane w postaci 2 osobnych pakietów:

webcomponents-min.js	Obejmuje wszystkie kody polyfill. Ten pakiet zawiera kod polyfill DOM, który jest znacznie większy niż pozostałe, i ma większy wpływ na wydajność. Używaj tego pakietu tylko wtedy, gdy potrzebujesz obsługi cienia DOM.
webcomponents-lite-min.js	Obejmuje wszystkie elementy polyfill oprócz shadow DOM. Uwaga: ten pakiet powinni wybrać użytkownicy platformy Polymer 1.x, ponieważ emulacja DOMU jest zawarta bezpośrednio w bibliotece Polymer. Użytkownicy Polymer 2.x potrzebują innej wersji kodu polyfill. Więcej informacji znajdziesz w poście na blogu Polymer Project.

W pakiecie polyfill komponentów sieciowych dostępne są również pojedyncze elementy polyfill. Stosowanie poszczególnych elementów polyfill to temat zaawansowany, który nie został tu omówiony.

Aby bezwarunkowo wczytać kod polyfill:

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

lub:

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

Jeśli kod polyfill został zainstalowany bezpośrednio z GitHuba, musisz podać ścieżkę, gdzie zostały zainstalowane.

Jeśli warunkowo wczytujesz kod polyfill na podstawie wykrywania funkcji, Twoja witryna powinna nadal działać po wycofaniu obsługi wersji 0.

Jeśli warunkowo wczytujesz kod polyfill za pomocą funkcji wykrywania przeglądarki (czyli wczytujesz go w przeglądarkach innych niż Chrome), po wyłączeniu obsługi wersji 0 z Chrome Twoja witryna przestanie działać.

Potrzebuję pomocy. Nie wiem, których interfejsów API używam.

Jeśli nie wiesz, czy korzystasz z interfejsów API w wersji 0 albo których z nich używasz, możesz sprawdzić dane wyjściowe konsoli w Chrome.

1. Jeśli przeglądarka Chrome została wcześniej uruchomiona z flagami powodującymi wyłączenie interfejsów API w wersji 0, zamknij Chrome i uruchom ją ponownie w zwykły sposób.
2. Otwórz nową kartę Chrome i wczytaj swoją stronę.
3. Naciśnij Control+Shift+J (Windows, Linux, ChromeOS) lub Command+Option+J (Mac), aby otworzyć konsolę Narzędzi deweloperskich.
4. Poszukaj komunikatów o wycofaniu w konsoli danych wyjściowych. Jeśli danych wyjściowych z konsoli jest dużo, wpisz „Wycofanie” w polu Filtr.

W przypadku każdego używanego interfejsu API w wersji 0 powinny zostać wyświetlone komunikaty o wycofaniu. Powyższe dane wyjściowe zawierają komunikaty dotyczące importu HTML, elementów niestandardowych w wersji 0 i modelu Shadow DOM v0.

Jeśli używasz co najmniej jednego z tych interfejsów API, przeczytaj artykuł Używanie kodu polyfill w wersji 0.

Kolejne kroki: przejście z wersji 0

Upewnij się, że kody polyfill w wersji 0 są wczytywane, Twoja witryna będzie nadal działać po usunięciu interfejsów API w wersji 0. Zalecamy przejście na interfejsy API komponentów sieciowych w wersji 1, które są powszechnie obsługiwane.

Jeżeli używasz biblioteki komponentów sieciowych, np. biblioteki Polymer, X-Tag lub SkateJS, najpierw sprawdź, czy są dostępne nowsze wersje biblioteki obsługujące interfejsy API w wersji 1.

Jeśli masz własną bibliotekę lub tworzysz elementy niestandardowe bez biblioteki, musisz zaktualizować się do nowych interfejsów API. Mogą Ci się przydać te materiały:

• Co nowego w elementach niestandardowych
• Co nowego w modelu Shadow DOM w wersji 1

Podsumowanie

Wycofujemy wersje robocze interfejsów API Web Komponenty w wersji 0. Jeśli zauważysz coś, czego nie dotyczy ten post, przetestuj swoją aplikację z wyłączonymi interfejsami API w wersji 0 i wczytuj w razie potrzeby pliki polyfill.

W dłuższej perspektywie zachęcamy do uaktualnienia do najnowszych interfejsów API i dalszego korzystania z komponentów sieciowych.