Nowości w Chrome 95

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Jestem Pete LePage. Pracuję i nagrywam z domu. Przyjrzyjmy się nowościom dla programistów w Chrome 95.

Routing z: URLPattern

Prawie wszystkie aplikacje internetowe w jakiś sposób polegają na routingu, niezależnie od tego, czy działają one na serwerze, który mapuje ścieżkę do plików na dysku, czy też funkcje logiczne w aplikacji jednostronicowej, która aktualizuje DOM w przypadku zmiany adresu URL. URLPattern to nowy interfejs API platformy internetowej, który standaryzuje składnię wzorców routingu.

Opiera się na istniejących platformach, dzięki czemu ułatwia wykonywanie typowych zadań routingu. Dotyczy to na przykład dopasowania do pełnych adresów URL lub nazwy ścieżki adresu URL, a następnie zwrócenia informacji o dopasowaniu tokena i grupy.

Jeśli znasz składnię routingu w przypadku ekspresowych, Ruby on Rails lub path-to-regexp, prawdopodobnie wiesz już, jak to działa.

Aby go użyć, utwórz nowy obiekt URLPattern() i podaj szczegóły, na podstawie których chcesz dopasować wzór. 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 elementom URLPattern używanym przez Dokumenty Google. My określimy kind pliku, plik ID i adres mode, w którym chcesz go otworzyć. Następnie, aby użyć wzoru, 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"}, ...},
//   ...
// }

Funkcja URLPattern jest domyślnie włączona w Chrome i Edge w wersji 95 i nowszych. Z kolei w przeglądarkach lub środowiskach takich jak Node, które jeszcze go nie obsługują, możesz skorzystać z biblioteki urlpattern-polyfill.

Szczegółowe informacje znajdziesz w artykule Jeffa URLPattern udostępnia routing na platformę internetową.

Wybieranie kolorów za pomocą interfejsu Eye Dropper API

Prawie każda aplikacja do projektowania, z której korzystam, ma narzędzie zakraplacza, które ułatwia określenie koloru. Niektóre przeglądarki mają wbudowaną funkcję zakraplacza w <input type=color>, ale nie jest to idealne rozwiązanie.

Interfejs API zakraplacza wdrożony przez część pracowników firmy Microsoft udostępnia tę funkcję w internecie. Aby go użyć, utwórz nową instancję EyeDropper(), a następnie wywołaj ją open().

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

Podobnie jak wiele innych nowoczesnych internetowych interfejsów API, działa asynchronicznie, dzięki czemu nie blokuje głównego wątku. Gdy użytkownik kliknie odpowiedni kolor, zmieni się on z kolorem, który został kliknięty.

Możesz wypróbować krótką prezentację i zobaczyć kod na stronie Glitch.

Zjazd PWA

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

Wspaniale było zobaczyć, jak wiele osób opowiada o PWA i dzieli się swoimi doświadczeniami. Jeśli przegapiłeś(-aś) wszystkie filmy, znajdziesz je na stronie PWASummit.org lub na kanale PWA Summit w YouTube.

Testowanie origin redukcji klienta użytkownika

Redukcja klienta użytkownika ma na celu zmniejszenie liczby elementów używanych przez pasywne odciski palców przez zmniejszenie informacji w ciągu znaków User-Agent tylko do marki przeglądarki i wersji istotnej, rozróżnienia na komputery i urządzenia mobilne oraz do platformy, na której działa.

W Chrome 95 dostępny jest nowy okres próbny, w którym możesz wyrazić zgodę na otrzymywanie zredukowanego ciągu tekstowego UA. Pozwoli Ci to wykryć i rozwiązać problemy, zanim zredukowana UA stanie się domyślnym działaniem Chrome.

Zmiany będą wprowadzane stopniowo w kolejnych wersjach, ale wszystko, czego potrzebujesz do przygotowania i testowania, jest już gotowe.

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

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

Więcej informacji

To tylko niektóre z najważniejszych kwestii. Kliknij poniższe linki, aby dowiedzieć się o dodatkowych zmianach w Chrome 95.

Subskrybuj

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

Jestem Pete LePage i jak tylko pojawi się Chrome 96, będę informować Cię o nowościach w Chrome.