Nowości w Chrome 100

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Mam na imię Pete LePage. Zobaczmy, co nowego dla programistów Chrome 100.

Chrome 100

Gdy przeglądarki osiągnęły wersję 10, pojawiło się kilka problemów, ponieważ liczba główna zmieniła się z 1 na 2 cyfry. Mamy nadzieję, że udało nam się nauczyć kilku rzeczy, które ułatwią przejście z 2 cyfr na 3 cyfry.

Logo Chrome i Firefox

Przeglądarka Chrome 100 jest już dostępna, a Firefox 100 pojawi się już wkrótce. Trzycyfrowe numery wersji mogą powodować problemy w witrynach, które w jakiś sposób identyfikują wersję przeglądarki. W ciągu ostatnich kilku miesięcy zespół Firefoxa i zespół Chrome przeprowadzili eksperymenty, w których przeglądarka zgłaszała wersję 100, mimo że tak naprawdę była to wersja 99.

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

  • Jeśli jesteś administratorem witryny, przetestuj ją w Chrome i Firefox 100.
  • Jeśli opracowujesz bibliotekę analizowania klienta użytkownika, dodaj testy analizowania wersji o większej lub równej 100.

Więcej informacji znajdziesz na stronie web.dev w witrynie Chrome i Firefox, które wkrótce będą w wersji głównej 100.

100 ciekawych chwil w internecie

Obraz promocyjny 100 fajnych momentów w internecie

To było niesamowite obserwować, jak rozwija się internet i jakie wspaniałe rzeczy udało się stworzyć w ciągu ostatnich 100 wersji Chrome. Postanowiliśmy cofnąć się w czasie i wspomnieć #100 fajnych momentów w internecie, które miały miejsce w ostatnich 14 latach.

Powiedz nam, które chwile najbardziej Ci się podobały. Jeśli coś przeoczyliśmy (a zdecydowanie tak było), napisz do nas na Twitterze do @Chromiumdev z hasztagiem #100CoolWebMoments. Miłej zabawy!

Zredukowany ciąg znaków klienta użytkownika

A na koniec jeszcze jedno słowo o ciągu znaków użytkownika. Chrome 100 będzie ostatnią wersją, która domyślnie obsługuje nieskompresowany ciąg znaków User-Agent. Jest to część strategii polegającej na zastąpieniu łańcucha znaków User-Agent nowym interfejsem User-Agent Client Hints API.

Począwszy od Chrome 101, klient użytkownika będzie stopniowo ograniczany.

Aby dowiedzieć się więcej o tym, co i kiedy zostanie usunięte, przeczytaj artykuł User Agent Reduction Origin Trial and Dates na [blogu Chromium][crblog].

Interfejs API do umieszczania okna na wielu ekranach

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

Interfejs API do umieszczania okien na wielu ekranach umożliwia zliczanie wyświetlaczy podłączonych do urządzenia użytkownika i umieszczanie okien na określonych ekranach.

Możesz szybko sprawdzić, czy do urządzenia z window.screen.isExtended jest podłączonych więcej niż 1 ekran.

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

Najważniejsza funkcja znajduje się w sekcji window.getScreenDetails(), która zawiera informacje o podłączonych wyświetlaczach.

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

Możesz na przykład określić ekran główny, a następnie użyć requestFullscreen(), aby wyświetlić element na jego 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);
}

Pozwala wykrywać zmiany – na przykład po podłączeniu lub wyjęciu nowego wyświetlacza zmienia się rozdzielczość itd.

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, przeczytaj zaktualizowany artykuł Toma Zarządzanie wieloma wyświetlaczami za pomocą interfejsu Window Placement API na stronie web.dev.

I inne funkcje

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

Dostęp do urządzenia HID można cofnąć za pomocą nowej metody forget().

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


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

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

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

Więcej informacji

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

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w 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ę nowa wersja Chrome 101, opowiem Ci, co nowego w Chrome.