Oto, co musisz wiedzieć na ten temat:
- Wbudowana w przeglądarkę usługa
URLPattern
staje się jeszcze łatwiejsza. - Interfejs Eye Dropper API ma wbudowane narzędzie do wybierania kolorów.
- Udostępniliśmy nowy test origin, który pozwala wyrazić zgodę na otrzymywanie zredukowanego ciągu znaków UA.
- Wszystkie filmy z PWA Summit są dostępne online.
- A do tego wiele więcej.
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.
- Jeśli stosujesz interfejs Storage Foundation API, możesz korzystać z nowej wersji próbnej źródła dla uchwytów dostępu.
- WebAssembly zapewnia teraz obsługę wyjątków, która umożliwia kodowi przerywanie przepływu kontroli w przypadku zgłoszenia wyjątku.
- W przyszłym roku udostępnimy Chrome 100. To oznacza, że musisz sprawdzić, czy Twój kod może obsługiwać więcej niż 2 cyfry.
Więcej informacji
To tylko niektóre z najważniejszych kwestii. Kliknij poniższe linki, aby dowiedzieć się o dodatkowych zmianach w Chrome 95.
- Nowości w Narzędziach deweloperskich w Chrome (95)
- Wycofanie i usunięcie Chrome 95
- Aktualizacje ChromeStatus.com w Chrome 95
- Co nowego w JavaScript w Chrome 95
- Lista zmian repozytorium źródłowego Chromium
- Kalendarz wydań Chrome
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.