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 jakiś sposób zależą od routingu, np. czy to kod działający na serwerze, który mapuje ścieżkę do plików na dysku lub w mechanizmie logicznym w aplikacji jednostronicowej, która aktualizuje DOM po zmianie adresu 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 dopasowanie wzorców. 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.

Więcej informacji znajdziesz w artykule Jerzego: URLPattern zapewnia przekierowanie do platformy 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 działa on asynchronicznie, dzięki czemu nie blokuje wątku głównego. Gdy użytkownik kliknie wybrany kolor, zostanie on zastąpiony tym, który kliknął.

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

Konferencja PWA

Czy udało Ci się wziąć udział w konferencji PWA Summit w tym miesiącu?

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.

W Chrome 95 dostępna jest nowa wersja próbna origin, która umożliwia wyrażenie zgody na otrzymywanie ciągu tekstowego UA w zmniejszonej postaci. 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 wersji źródłowej 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. Pod poniższymi linkami znajdziesz dodatkowe zmiany w Chrome 95.

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.