Nowości w Chrome 95

Pete LePage

Oto, co musisz wiedzieć na ten temat:

  • Dzięki URLPattern wbudowanemu w przeglądarkę routing jest łatwiejszy.
  • Interfejs Eye Dropper API udostępnia wbudowane narzędzie do wybierania kolorów.
  • Dostępny jest nowy program testów pochodzenia, który umożliwia otrzymywanie skróconego ciągu UA już teraz.
  • Filmy z PWA Summit są dostępne online.
  • A to nie wszystko. Więcej informacji znajdziesz w dalszej części artykułu.

Jestem Pete LePage. Pracuję i nagrywam w domu. Zobaczmy, co nowego w Chrome 95 dla deweloperów.

Wyznaczanie trasy za pomocą: URLPattern

Prawie wszystkie aplikacje internetowe w jakiś sposób korzystają z routingu. Może to być kod działający na serwerze, który mapuje ścieżkę do plików na dysku, lub logika w aplikacji jednostronicowej, która aktualizuje DOM, gdy zmienia się adres URL. URLPattern to nowy interfejs API platformy internetowej, który standaryzuje składnię wzorca routingu.

Opiera się na istniejących frameworkach, co ułatwia wykonywanie typowych zadań związanych z routingiem. Na przykład dopasowywanie do pełnych adresów URL lub ścieżki adresu URL, a następnie zwracanie informacji o dopasowaniach tokenów i grup.

Jeśli znasz już składnię routingu używaną w Express, Ruby on Rails lub path-to-regexp, prawdopodobnie będzie Ci ona znajoma.

Aby go użyć, utwórz nowy warunek URLPattern() i podaj szczegóły, które chcesz dopasować do wzorca. Wzorce mogą zawierać symbole wieloznaczne, nazwane grupy tokenów, grupy wyrażeń regularnych i modyfikatory grup.

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

Przyjrzyjmy się na przykład URLPattern, które mogą być używane przez Dokumenty Google. Określimy kind pliku, jego ID i mode, w którym ma zostać otwarty. Aby użyć wzorca, możemy wywołać funkcję test() lub exec().

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern jest domyślnie włączona w Chrome i Edge w wersji 95 i nowszych. W przypadku przeglądarek lub środowisk, takich jak Node, które jeszcze nie obsługują tej funkcji, możesz użyć biblioteki urlpattern-polyfill.

Więcej informacji znajdziesz w artykule Jeffa URLPattern brings routing to the web platform.

Wybieranie kolorów za pomocą interfejsu Eye Dropper API

Prawie każda aplikacja do projektowania, z której korzystałem, ma pipetę, dzięki czemu łatwo sprawdzić, jaki kolor ma dany element. Niektóre przeglądarki mają pipetę wbudowaną w <input type=color>, ale nie jest to idealne rozwiązanie.

Interfejs API kroplomierza, wdrożony przez zespół Microsoftu, udostępnia tę funkcję w internecie. Aby go użyć, utwórz nową EyeDropper()instancję, a następnie wywołaj na niej funkcję open().

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

Podobnie jak wiele innych nowoczesnych interfejsów API sieci, działa on asynchronicznie, dzięki czemu nie blokuje wątku głównego. Gdy użytkownik kliknie wybrany kolor, zostanie on wyświetlony.

PWA Summit

Czy udało Ci się wziąć udział w szczycie PWA na początku tego miesiąca?

Świetnie było zobaczyć tak wiele osób rozmawiających o PWA i dzielących się swoimi doświadczeniami. Jeśli Cię to ominęło, wszystkie filmy są już dostępne, więc koniecznie je obejrzyj na PWASummit.org lub na kanale PWA Summit w YouTube.

Testowanie origin redukcji klienta użytkownika

Redukcja klienta użytkownika to działanie mające na celu zmniejszenie pasywnych powierzchni odcisków cyfrowych przez ograniczenie informacji w ciągu znaków User-Agent do marki i ważnej wersji przeglądarki, rozróżnienia między komputerem a urządzeniem mobilnym oraz platformy, na której działa przeglądarka.

Od wersji Chrome 95 dostępna jest nowa wersja próbna origin, która umożliwia zrezygnowanie z otrzymywania skróconego ciągu UA już teraz. Dzięki temu możesz wykrywać i rozwiązywać problemy, zanim zredukowany ciąg UA stanie się domyślnym zachowaniem w Chrome.

Zmiany będą wprowadzane stopniowo w kilku wersjach, ale wszystko, co musisz przygotować i przetestować, jest już gotowe.

Wszystkie szczegóły i oś czasu znajdziesz w poście User-Agent Reduction origin trial na stronie developer.chrome.com.

I wiele więcej!

Oczywiście jest ich znacznie więcej.

Więcej informacji

Obejmuje to tylko niektóre z najważniejszych informacji. Dodatkowe zmiany w Chrome 95 znajdziesz w linkach poniżej.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać powiadomienia e-mail o każdym nowym filmie.

Jestem Pete LePage i jak tylko Chrome 96 zostanie wydany, od razu powiem Ci, co nowego pojawi się w Chrome.