Nowości w Chrome 95

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Nazywam się Pete LePage i pracuję z domu. Zapraszam do obejrzenia nowości w Chrome 95 dla deweloperów.

Routing z URLPattern

Prawie wszystkie aplikacje internetowe w jakimś stopniu polegają na przekierowaniu, czy jest to kod działający na serwerze, który mapuje ścieżkę do plików na dysku, czy 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.

Jest ono oparte na istniejących frameworkach, co ułatwia wykonywanie typowych zadań związanych z rutowaniem. Na przykład dopasowanie do pełnych adresów URL lub ścieżki adresu URL, a następnie zwracanie informacji o tokenach i dopasowaniu grup.

Jeśli znasz już składnię routingu używaną w Express, Ruby on Rails lub path-to-regexp, ta składnia może Ci być znajoma.

Aby z niej skorzystać, utwórz nową funkcję URLPattern() i podaj szczegóły, według których ma być przeprowadzane dopasowywanie 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: '*',
});

Spójrzmy na przykład na URLPattern, którego używają Dokumenty Google. Określimy kind pliku, plik ID i to, w jakim mode go otworzyć. Aby użyć tego 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 nie obsługują jeszcze tej funkcji, możesz użyć biblioteki urlpattern-polyfill.

Aby dowiedzieć się więcej, przeczytaj artykuł Jeffa URLPattern udostępnia kierowanie na platformie internetowej.

Wybieranie kolorów za pomocą interfejsu Eye Dropper API

Prawie każda aplikacja do projektowania, z której korzystałam, ma narzędzie pipety, dzięki któremu łatwo określić kolor. Niektóre przeglądarki mają wbudowaną pipetę <input type=color>, ale nie jest to idealne rozwiązanie.

Interfejs Eye Dropper API, wdrożony przez zespół z Microsoftu, umożliwia korzystanie z tej funkcji w internecie. Aby z niej korzystać, utwórz nową instancję EyeDropper(), a potem wywołaj metodę open().

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

Podobnie jak wiele innych nowoczesnych interfejsów API do przeglądarek działa asynchronicznie, co oznacza, że nie blokuje wątku głównego. Gdy użytkownik kliknie wybrany kolor, zostanie on wyświetlony.

Możesz wypróbować krótkie demo i zobaczyć kod na Glitch.

szczyt PWA,

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

Cieszy nas, że tak wiele osób mówiło o PWA i dzieliło się swoimi spostrzeżeniami. Jeśli je przegapiłeś/przegapiłaś, wszystkie filmy są już dostępne na stronie PWASummit.org lub na kanale YouTube PWA Summit.

Testowanie origin w ramach redukcji klienta użytkownika

Redukcja informacji w polu User-Agent to inicjatywa mająca na celu ograniczenie pasywnego tworzenia profilu użytkownika. Polega ona na ograniczeniu informacji w polu User-Agent do marki i wersji przeglądarki, jej wersji na komputer lub urządzenie mobilne oraz platformy, na której działa.

Począwszy od wersji Chrome 95 dostępna jest nowa wersja próbna origin, która umożliwia Ci zaktualizowanie ustawień i uzyskanie skróconego ciągu UA. Dzięki temu będziesz mieć możliwość wykrywania i rozwiązywania problemów, zanim ograniczona wersja UA stanie się domyślnym zachowaniem w Chrome.

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

Wszystkie szczegóły i harmonogram znajdziesz w poście Testowanie redukcji klienta użytkownika na stronie developer.chrome.com.

I inne funkcje

Oczywiście jest ich znacznie więcej.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 95, kliknij linki poniżej.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 96, opowiem Ci, co nowego w tej wersji.