Podsumowanie najważniejszych wiadomości i aktualizacji ogłoszonych podczas 3-dniowego wydarzenia dla społeczności online oraz przypomnienie o nadchodzących wydarzeniach regionalnych.
Właśnie zakończyliśmy trzydniowe wydarzenie web.dev LIVE, podczas którego członkowie społeczności internetowej zebrali się online, aby porozmawiać o stanie tworzenia stron internetowych. Każdy dzień zaczynaliśmy w innej regionalnej strefie czasowej, a pracownicy Google dzielili się najnowszymi informacjami, wiadomościami i wskazówkami, by ułatwić deweloperom korzystanie z narzędzi i wskazówek, dzięki którym internet będzie stabilny, wydajny i dostępny.
Jeżeli nie udało Ci się obejrzeć jakiejś transmisji na żywo, wszystkie sesje są nagrywane i możesz je obejrzeć w YouTube. Zorganizujemy też nadchodzące wydarzenia regionalne organizowane na całym świecie przez Grupy deweloperów w Google. Będą to szczegółowe sesje na tematy związane z tematami, które omawialiśmy podczas transmisji na żywo web.dev LIVE.
Przyjrzymy się niektórym z wiadomości, które opublikowaliśmy w ciągu ostatnich 3 dni.
wskaźniki internetowe
Zespół Chrome ogłosił inicjatywę Wskaźniki internetowe, która ma zapewnić ujednolicone wskazówki, dane i narzędzia, które pomogą deweloperom zadbać o wrażenia użytkowników korzystających z internetu. Zespół wyszukiwarki Google niedawno ogłosił, że będzie brać pod uwagę jakość strony jako kryterium rankingu, a jako podstawy będzie uwzględniać podstawowe dane internetowe.
3 filary Podstawowych wskaźników internetowych z 2020 roku to wczytywanie, interaktywność i stabilność wizualna zawartości strony, na co wskazują te dane:
- Największe wyrenderowanie treści mierzy postrzeganą szybkość ładowania i oznacza na osi czasu wczytywania strony punkt, w którym prawdopodobnie została wczytana główna treść strony.
- Opóźnienie przy pierwszym działaniu mierzy responsywność i określa wrażenia użytkowników, którzy próbują po raz pierwszy wejść w interakcję ze stroną.
- Skumulowane przesunięcie układu mierzy stabilność wizualną i określa ilość nieoczekiwanego ruchu treści strony.
Na stronie web.dev LIVE przedstawiliśmy sprawdzone metody optymalizacji pod kątem podstawowych narzędzi internetowych i Narzędzi deweloperskich w Chrome, aby poznać zalety witryny. Opublikowaliśmy też wiele innych wywiadów dotyczących wydajności, które można znaleźć na stronie web.dev/live w ramach harmonogramu pierwszego dnia.
tooling.report
Projektowanie na tak szeroką platformę, jak sieć, może być trudne. Narzędzia do tworzenia znajdują się często w sercu Twojego projektu przy tworzeniu stron internetowych i odgrywają kluczową rolę w obsłudze cyklu życia programisty i usługi.
Z pewnością spotkaliśmy się z nieporęcznymi plikami konfiguracyjnymi kompilacji, dlatego stworzyliśmy stronę tooling.report, aby pomóc deweloperom stron internetowych i twórcom narzędzi radzić sobie ze złożonością internetu. Pomaga ona wybrać odpowiednie narzędzie do tworzenia na potrzeby kolejnego projektu, zdecydować, czy warto przeprowadzić migrację z jednego narzędzia do drugiego, lub wymyślić, jak wdrożyć sprawdzone metody w konfiguracji narzędzi i bazie kodu.
Opracowaliśmy zestaw testów, aby określić, które narzędzia do tworzenia pozwalają stosować się do sprawdzonych metod tworzenia stron internetowych. Wspólnie z autorami narzędzi do tworzenia mieliśmy pewność, że wykorzystujemy ich narzędzia w prawidłowy sposób.
Wstępna wersja narzędzia Tooling.report obejmuje pakiety internetowe w wersji 4, Rollup v2, Parcel v2 oraz Browserify with Gulp, które wydają się obecnie najpopularniejsze. Stworzyliśmy narzędzie Tooling.report z możliwością dodawania kolejnych narzędzi do tworzenia i dodatkowych testów z pomocą społeczności.
Jeśli brakuje jakiejś sprawdzonej metody, którą warto sprawdzić, zgłoś ją w naszym zgłoszeniu na GitHubie. Jeśli chcesz napisać test lub dodać nowe narzędzie, którego nie uwzględniliśmy w początkowym zestawie, zapraszamy do współpracy.
W międzyczasie możesz dowiedzieć się więcej o naszym podejściu do tworzenia narzędzi.report i obejrzeć sesję na stronie web.dev NA ŻYWO.
Prywatność i bezpieczeństwo w internecie
W Chrome wierzymy w otwartą sieć z poszanowaniem prywatności użytkowników i zachowanie kluczowych przypadków użycia, dzięki którym sieć działa dla wszystkich.
W 2019 roku Chrome zaproponował aktualizację standardu plików cookie, aby domyślnie ograniczyć pliki cookie do własnych kontekstów i wymagać jawnego oznaczania plików cookie na potrzeby kontekstu innych firm. W szczególności zapewnia to linię obrony przeciwko atakom typu cross-site Request Forgery. Z propozycji korzystają teraz Chrome, Firefox, Edge i inne przeglądarki.
W związku z pandemią COVID-19 przeglądarka Chrome zdecydowała się tymczasowo wycofać te zmiany. Jednak w czasie kryzysu, gdy ludzie są najbardziej narażeni na atak, tego rodzaju ataki coraz częściej się pojawiają. W przypadku stabilnej wersji Chrome 84 (połowa lipca 2020 r.) zmiany zaczniemy ponownie wprowadzać we wszystkich wersjach Chrome – od wersji 80 wzwyż. Aby dowiedzieć się więcej, zapoznaj się ze wskazówkami dotyczącymi plików cookie SameSite i sesją LIVE na stronie web.dev.
Dodatkowo, pod banerem Piaskownicy prywatności Chrome, przedstawiamy szereg propozycji standardów mających na celu wsparcie przypadków użycia, które umożliwiają użytkownikom życie przy użyciu platformy internetowej, ale robią to w sposób z poszanowaniem prywatności użytkowników. Chrome aktywnie zbiera opinie na temat tych propozycji i uczestniczy w otwartych forach W3C, aby omawiać propozycje oraz propozycje przesłane przez inne osoby. Więcej informacji o tej inicjatywie znajdziesz w sesji Bezpieczeństwo i prywatność w otwartej sieci.
Jeśli chodzi o bezpieczeństwo użytkowników, luka w zabezpieczeniach Spectre sprawiała, że szkodliwy kod uruchomiony w jednym procesie przeglądarki może odczytać powiązane z tym procesem dane, nawet jeśli pochodzą z innego źródła. Jednym ze sposobów rozwiązania tego problemu w przeglądarkach jest izolacja witryn, tj. umieszczenie każdej witryny w osobnym procesie. Aby dowiedzieć się więcej, obejrzyj sesję LIVE na stronie web.dev na temat nowych zasad dotyczących otwierania i umieszczania treści w witrynach na różnych stronach (COOP i COEP).
Tworzenie sieci o zaawansowanych możliwościach
W Chrome zależy nam na swobodnym tworzeniu aplikacji internetowych najwyższej jakości, które zapewnią Ci największy zasięg wśród użytkowników na różnych urządzeniach. Połączenie możliwości instalacji i niezawodności PWA z projektem dotyczącym możliwości (Project Fugu) Chrome skupia się na 3 rzeczach, które pomagają wypełnić lukę między aplikacjami na poszczególnych platformach a internetem i pomagać w tworzeniu i dostarczaniu doskonałych wrażeń.
Po pierwsze, zespoły Chrome pracowały nad zapewnieniem programistom i użytkownikom większej kontroli nad procesem instalacji, dodaniu promowania instalacji do omniboksu i innym funkcjom. Sieć jest wszechobecna, ale dla niektórych firm ważne jest, aby mieć w niej swoje aplikacje. Aby Ci w tym pomóc, Chrome udostępnił Bubblewrap – bibliotekę i interfejs wiersza poleceń, dzięki którym umieszczenie aplikacji PWA w Sklepie Play jest proste. Strona PWABuilder.com używa teraz folii dymkowej. Kilka kliknięć myszą możesz wygenerować plik APK i przesłać aplikację PWA do Sklepu Play, o ile spełniasz kryteria.
Po drugie, Chrome zapewnia ściślejszą integrację z systemem operacyjnym, na przykład udostępnianie zdjęć, piosenek lub innych elementów przez wywołanie systemowej usługi udostępniania za pomocą interfejsu Web Share API, czyli możliwość odbierania treści udostępnianych z innej zainstalowanej aplikacji. Możesz w ten sposób informować użytkowników o nowej aktywności lub w subtelny sposób informować ich o nowej aktywności za pomocą identyfikatorów aplikacji. Użytkownicy mogą też łatwiej rozpoczynać działania za pomocą skrótów do aplikacji (wersja Chrome 84 będzie dostępna w połowie lipca 2020 r.).
Pracujemy też nad nowymi funkcjami umożliwiającymi wdrożenie nowych scenariuszy, takimi jak edytory, które odczytują i zapisują pliki w lokalnym systemie plików użytkownika lub pobierają listę lokalnie zainstalowanych czcionek, aby użytkownicy mogli ich używać w swoich projektach.
W trakcie transmisji web.dev LIVE rozmawialiśmy o wielu innych możliwościach, dzięki którym możesz zapewnić użytkownikom taką samą funkcjonalność, z tymi samymi możliwościami jak w przypadku aplikacji na danej platformie. Wszystkie sesje znajdziesz na stronie web.dev/live w ramach harmonogramu dnia 2.
Nowości w Narzędziach deweloperskich w Chrome i Lighthouse 6.0
Narzędzia deweloperskie w Chrome: nowa karta Problemy, emulator braku kolorów i obsługa wskaźników internetowych
Jedną z największych zalet Narzędzi deweloperskich w Chrome jest to, że wykrywają problemy na stronie internetowej i zwracają na nie uwagę dewelopera. Ma to największe znaczenie w kontekście przechodzenia do kolejnej fazy, w którym internet stawia na prywatność. Aby zmniejszyć zmęczenie powiadomień w konsoli, w Narzędziach deweloperskich w Chrome wprowadziliśmy kartę Problemy. Początkiem są 3 typy krytycznych problemów: problemy z plikami cookie, mieszana treść i problemy z COEP. Na początek obejrzyj sesję LIVE na stronie web.dev na temat znajdowania i rozwiązywania problemów na karcie Problemy.
Podstawowe wskaźniki internetowe stają się jednym z najważniejszych zbiorów danych, które programiści stron internetowych mogą śledzić i mierzyć, dlatego chcą mieć pewność, że będą mogli łatwo śledzić osiąganie tych progów. Te 3 rodzaje danych są teraz w panelu wydajności Narzędzi deweloperskich w Chrome.
Coraz więcej deweloperów skupia się na ułatwieniach dostępu, dlatego w Narzędziach deweloperskich wprowadziliśmy emulator niedoskonałości rozpoznawania kolorów, który umożliwia emulowanie niewyraźnego widzenia i innych wad wzroku. Więcej informacji o tej i wielu innych funkcjach znajdziesz w sesji Co nowego w Narzędziach deweloperskich.
Lighthouse 6.0: nowe dane, pomiary w Laboratorium podstawowych wskaźników internetowych, zaktualizowany wynik skuteczności i nowe audyty
Lighthouse to zautomatyzowane narzędzie typu open source ułatwiające pracę programistom. W najnowszej wersji zespół Lighthouse skupił się na dostarczaniu statystyk opartych na danych, które zapewniają wyważony wgląd w jakość wrażeń użytkowników w porównaniu z wymiarami kluczowymi.
Aby zapewnić spójność, narzędzie Lighthouse dodało obsługę podstawowych wskaźników internetowych: LCP i TBT (jest to wartość pośrednia dla FID, ponieważ Lighthouse jest narzędziem laboratoryjnym, a FID można mierzyć tylko w terenie) oraz CLS. Narzędzie Lighthouse również usunęło też 3 wcześniejsze wskaźniki: First MeaningfulPaint, First Core CPU i Max FID. Ich usunięcia wynikają m.in. z takich czynników jak zmienność danych i nowsze dane, które lepiej odzwierciedlają tę część wygody użytkowników, którą stara się zmierzyć. Na podstawie opinii użytkowników narzędzie Lighthouse dodatkowo skorygowało też to, w jakim stopniu poszczególne dane wpływają na ogólny wynik skuteczności.
W Lighthouse dodaliśmy też kalkulator punktacji, który ułatwia analizowanie oceny wydajności – umożliwia porównanie wyników w wersji 5 i 6. Gdy przeprowadzisz audyt w Lighthouse 6.0, w raporcie znajdziesz link do kalkulatora z wypełnionymi wynikami.
Na koniec wprowadziliśmy kilka nowych audytów, które skupiały się na analizie JavaScriptu i ułatwieniach dostępu.
Więcej informacji znajdziesz w sesji Co nowego w narzędziu do pomiaru szybkości.
Więcej
Dziękujemy wszystkim członkom społeczności, którzy dołączyli do nas, by omówić możliwości i wyzwania, jakie oferuje platforma internetowa.
Ten post zawiera podsumowanie najważniejszych najważniejszych wydarzeń tego wydarzenia, ale jest też znacznie więcej. Obejrzyj wszystkie sesje i zasubskrybuj newsletter web.dev, aby otrzymywać więcej treści prosto do skrzynki odbiorczej. Odwiedź sekcję Wydarzenia regionalne na stronie web.dev/live, aby znaleźć nadchodzące wydarzenie dla społeczności w swojej strefie czasowej.