Ta strona została przetłumaczona przez Cloud Translation API.

Nowości w Chrome 100

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Chrome 100 ma trzycyfrowy numer wersji.
Wybierz się na spacer śladami wspomnień i świętuj 100 CoolWebMoments od premiery pierwszej wersji Chrome.
Wprowadziliśmy kilka ważnych zmian w ciągu znaków klienta użytkownika.
Interfejs Multi-Screen Window Placement API umożliwia wyliczenie wyświetlaczy podłączonych do komputera użytkownika i rozmieszczanie okien na określonych ekranach.
A do tego wiele więcej.

Nazywam się Pete LePage. Przyjrzyjmy się nowościom dla programistów w Chrome 100.

Chrome 100

Gdy przeglądarki po raz pierwszy pojawiły się w wersji 10, wystąpiły pewne problemy, ponieważ numer wersji głównej zmienił się z jednej do dwóch. Mamy nadzieję, że dowiedzieliśmy się kilku rzeczy, które ułatwią Ci przejście z dwóch cyfr na trzy.

Przeglądarka Chrome 100 jest już dostępna, a wersja Firefox 100 zostanie wysłana wkrótce. Te trzycyfrowe numery wersji mogą powodować problemy w witrynach, które w jakiś sposób polegają na identyfikacji wersji przeglądarki. W ostatnich miesiącach zespoły Firefox i Chrome prowadzili eksperymenty, w których przeglądarka zgłaszała wersję 100, mimo że nie była to wersja 100.

Doprowadziło to do zgłoszenia kilku problemów, z których wiele zostało już rozwiązanych. Ale nadal potrzebujemy Twojej pomocy.

Jeśli zajmujesz się zarządzaniem witryną, przetestuj ją w Chrome i Firefoksie 100.
Jeśli tworzysz bibliotekę analizy danych klienta użytkownika, dodaj testy, aby przeanalizować wersje większe niż 100.

Aby dowiedzieć się więcej, sprawdź Chrome i Firefox, które wkrótce zostaną wprowadzone w wersji głównej 100 na stronie web.dev.

100 fajnych chwil w internecie

Obraz promocyjny 100 fajnych chwil w internecie

Z entuzjazmem obserwuję, jak internet rozwija się i zobacz, co udało Ci się stworzyć w ostatnich 100 wersjach Chrome. Pomyśleliśmy, że będzie nam miło ruszyć w drogę wspomnień i uhonorować 100 CoolWebMoments, co wydarzyło się w ciągu ostatnich 14 lat.

Powiedz nam, które chwile najbardziej Ci się podobały. Jeśli coś pominęliśmy (a na pewno już to mamy), powiadom nas o tym na Twitterze @Chromiumdev z wpisem #100CoolWebMoments. Możesz już z niego korzystać.

Ograniczony ciąg znaków klienta użytkownika

Skoro mówimy o kliencie użytkownika, Chrome 100 będzie ostatnią wersją, która domyślnie obsługuje niezmniejszony ciąg znaków klienta użytkownika. Jest to część strategii mającej zastąpić ciąg znaków User-Agent nowym interfejsem User-Agent Client Hints API.

Od wersji Chrome 101 będziemy stopniowo zmniejszać liczbę klientów użytkownika.

Informacje o tym, co i kiedy usuniemy, znajdziesz w artykule o okresie próbnym i datach redukcji klienta użytkownika na [blogu Chromium][crblog].

Interfejs API rozmieszczania okien na wiele ekranów

W przypadku niektórych aplikacji otwieranie nowych okien i umieszczanie ich w określonych miejscach lub na konkretnych ekranach jest ważną funkcją. Na przykład podczas wyświetlania slajdów chcę, aby slajdy były wyświetlane na pełnym ekranie na głównym ekranie, a notatki na drugim ekranie.

Interfejs Multi-Screen Window Placement API umożliwia zliczanie ekranów podłączonych do komputera użytkownika i umieszczanie okien na określonych ekranach.

Za pomocą usługi window.screen.isExtended możesz szybko sprawdzić, czy z urządzeniem jest połączony więcej niż 1 ekran.

const isExtended = window.screen.isExtended;
// returns true/false

Kluczową funkcją jest jednak window.getScreenDetails(), który zawiera szczegółowe informacje o dołączonych wyświetlaczach.

const x = await window.getScreenDetails();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Możesz np. określić ekran główny, a następnie za pomocą funkcji requestFullscreen() ustawić element na pełnym ekranie.

try {
  const screens = await window.getScreenDetails();
  const primary = screens
         .filter((screen) => screen.primary)[0]
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Funkcja ta umożliwia też wychwytywanie zmian, np. podłączenie lub wyjęcie nowego wyświetlacza albo zmiana rozdzielczości.

const screens = await window.getScreenDetails();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Aby dowiedzieć się więcej, zapoznaj się ze zaktualizowanym artykułem Toma na temat zarządzania kilkoma wyświetlaczami przy użyciu interfejsu Multi-Screen Window Placement API na stronie web.dev.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

Dostępna jest nowa metoda forget() dla urządzeń HID, która pozwala cofnąć uprawnienia do urządzenia HID przyznane przez użytkownika.

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

Z kolei w przypadku WebNFC metoda makeReadOnly() umożliwia trwałe oznaczenie tagów NFC w trybie tylko do odczytu.

const ndef = new NDEFReader();
await ndef.makeReadOnly();

Więcej informacji

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

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 101, będę informować Cię o nowościach w Chrome.