Nowości w Chrome 95

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Jestem Pete LePage. Pracuję i strzelam z domu, zobaczmy, co nowego dla programistów Chrome 95.

Wyznaczanie trasy za pomocą URLPattern

Prawie wszystkie aplikacje internetowe w jakiś sposób zależą od routingu, niezależnie od działania kodu na serwerze, który mapuje ścieżkę do plików na dysku lub w funkcjach logicznych w aplikacji jednostronicowej który aktualizuje DOM po zmianie adresu URL. URLPattern to nowa sieć platformy API, który ustandaryzuje składnię wzorców routingu.

Opiera się na istniejących strukturach, co ułatwia korzystanie typowe zadania związane z routingiem. Na przykład dopasowywanie do pełnych adresów URL lub adresów URL Pathname, a potem zwracanie informacji o tokenach i dopasowaniach grup.

Jeśli znasz już składnię routingu używaną w Express, Ruby on Rails, czyli path-to-regexp, prawdopodobnie wygląda znajomo.

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

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

Spójrzmy na przykład na URLPattern, które mogą być używane w Dokumentach Google. Określimy kind pliku, ID i mode, w którym chcesz go otworzyć. Następnie, aby użyć wzoru, możemy wywołać 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"}, ...},
//   ...
// }

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

Przeczytaj artykuł Jerzego: URLPattern zapewnia przekierowanie do platformy internetowej. .

Wybieranie kolorów za pomocą interfejsu Eye Dropper API

Prawie każda aplikacja do projektowania, której kiedykolwiek używam, ma narzędzie zakraplacza, łatwo ustalić, co ma kolor. Niektóre przeglądarki mają zakraplacz w <input type=color>, ale nie jest to idealne rozwiązanie.

Zaimplementowany przez kilka osób z firmy Microsoft interfejs Eye dropper API i udostępnianie tych funkcji w sieci. Aby go użyć, utwórz nowy dokument EyeDropper() a następnie wywołaj dla niej 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, nie zablokuje wątku głównego. Gdy użytkownik kliknie wybrany kolor, rozwinie się w klikniętym kolorze.

Możesz obejrzeć krótką prezentację i zobaczyć kodu w Glitch.

Konferencja PWA

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

Wspaniale było zobaczyć, jak wiele osób mówi o PWA i dziele się i aplikacji. Wszystkie filmy są już dostępne, więc nie zapomnij ich przejrzeć. na stronie PWASummit.org lub Kanał PWA Summit w YouTube.

Testowanie origin redukcji klienta użytkownika

Redukcja klienta użytkownika to metoda zmniejszania wykorzystania pasywnych do drukowania odcisków palców, ograniczając ilość informacji tylko do marki przeglądarki i jej ważnej wersji, a także platformy, na której działa.

W Chrome 95 dostępna jest nowa wersja próbna origin, pozwala wyrazić zgodę na otrzymywanie teraz krótszego ciągu tekstowego UA. Włączenie tej opcji aby wykryć i rozwiązać problemy, zanim obniżona UA stanie się domyślną i działaniu Chrome.

Zmiany będą stosowane stopniowo do wielu wersji, ale wszystko, co potrzebne do przygotowania i testów, jest już gotowe.

Wszystkie szczegóły i harmonogram znajdziesz w Opublikowanie posta o testowaniu origin redukcji klienta użytkownika developer.chrome.com.

I inne funkcje

Oczywiście istnieje też znacznie więcej możliwości.

Więcej informacji

To tylko niektóre z najważniejszych informacji. Przejrzyj te linki: dodatkowych zmian w Chrome 95.

Subskrybuj

Zasubskrybuj, aby być na bieżąco. na kanale Chrome Developers w YouTube, a gdy będziemy mogli opublikować nowy film, otrzymasz e-maila z powiadomieniem.

Jestem Pete LePage i gdy tylko Chrome 96 się ukaże, opowie o nowościach w Chrome.