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

Nowości w Chrome 86

Pete LePage

Twitter GitHub Glitch Mastodon strona główna

Zaczynamy wprowadzać Chrome 86 w wersji stabilnej.

Oto, co musisz wiedzieć na ten temat:

Interfejs File System Access API jest teraz dostępny w wersji stabilnej.
Dostępne są nowe wersje próbne origin dla Web HID i Multi-screen Window Placement API.
Pojawiło się kilka nowych funkcji CSS, a wiele innych.

Jestem Pete LePage. Pracuję i nagrywam z domu. Sprawdźmy, co nowego dla programistów w Chrome 86.

Dostęp do systemu plików

Obecnie możesz używać elementu <input type="file"> odczytującego plik z dysku. Aby zapisać zmiany, dodaj do tagu kotwicy ciąg download, wyświetli selektor plików i zapisze plik. Nie można zapisać danych w otwartym pliku. Taki proces jest denerwujący.

Za pomocą interfejsu File System Access API (dawniej Native File System API), który przeszedł z testu origin i jest teraz stabilny, możesz wywołać funkcję showOpenFilePicker(), która wyświetla selektor plików, a potem zwraca uchwyt, którego możesz użyć do odczytu pliku.

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

Aby zapisać plik na dysku, możesz użyć poprzedniego uchwytu pliku lub wywołać showSaveFilePicker(), by uzyskać nowy uchwyt.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

zrzut ekranu z prośbą o zgodę — Wyświetlaj użytkownikowi prośbę o uprawnienia do zapisu w pliku.

Przed zapisem Chrome sprawdzi, czy użytkownik przyznał uprawnienia do zapisu. Jeśli nie zostały one przyznane, Chrome najpierw zapyta użytkownika o zgodę.

Wywołanie showDirectoryPicker() spowoduje otwarcie katalogu, dzięki czemu możesz uzyskać listę plików lub utworzyć nowe pliki w tym katalogu. Idealne rozwiązanie w przypadku IDE lub odtwarzaczy multimedialnych, które obsługują wiele plików. Oczywiście, zanim cokolwiek napiszesz, użytkownik musi przyznać Ci uprawnienia do zapisu.

Interfejs API udostępnia o wiele więcej możliwości, więc przeczytaj artykuł o dostępie do systemu plików na stronie web.dev.

Wersja próbna origin: WebHID

Urządzenia interfejsu, często nazywane HID, pobierają dane wejściowe od ludzi lub dostarczają im dane wyjściowe. Istnieją całe mnóstwo urządzeń interfejsu, które są zbyt nowe, zbyt stare lub zbyt rzadko dostępne dla sterowników urządzeń.

Interfejs WebHID API, teraz dostępny w ramach wersji próbnej origin, rozwiązuje ten problem, umożliwiając dostęp do urządzeń w kodzie JavaScript. Dzięki WebHID gry internetowe mogą w pełni wykorzystać możliwości padów do gier, w tym wszystkie przyciski, joysticki, czujniki, spusty, diody LED, kontrolery do gier i nie tylko.

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

Internetowe aplikacje do czatu wideo mogą używać przycisków telefonicznych na specjalistycznych głośnikach, by rozpoczynać i kończyć połączenia, wyciszać dźwięk i wykonywać inne czynności.

Oczywiście takie zaawansowane interfejsy API mogą wchodzić w interakcje z urządzeniami tylko wtedy, gdy użytkownik wyraźnie na to zezwoli.

W artykule o łączeniu z nietypowymi urządzeniami HID znajdziesz więcej informacji, przykłady, informacje o tym, jak zacząć, i ciekawą prezentację.

Origin – wersja próbna: interfejs Multi-Screen Window Placement API

Obecnie właściwości ekranu, na którym działa okno przeglądarki, możesz uzyskać, wywołując window.screen(). Co jednak w sytuacji, gdy firma ma kilka monitorów? Przeglądarka poinformuje Cię tylko o tym, który ekran jest aktualnie wyświetlany.

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

Interfejs Multi-Screen Window Placement API uruchamia próbę źródła w Chrome 86, pozwala wyliczyć ekrany podłączone do komputera i rozmieszczać okna na określonych ekranach. Możliwość umieszczania okien na określonych ekranach jest niezbędna w przypadku aplikacji do prezentacji czy usług finansowych.

Żeby korzystać z tego interfejsu API, musisz poprosić o odpowiednie uprawnienia. Jeśli tego nie zrobisz, przeglądarka zapyta użytkownika przy pierwszej próbie użycia.

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

Gdy użytkownik przyzna uprawnienia, wywołanie metody window.getScreens() zwraca obietnicę, która znika z tablicą obiektów Screen.

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

Mogę następnie użyć tych informacji, by zadzwonić pod numer requestFullScreen() lub ustawić nowe okna. Wszystkie szczegóły Tomka zamieścił na stronie web.dev w artykule Zarządzanie kilkoma wyświetlaczami przy użyciu interfejsu Multi-Screen Window Placement API.

I nie tylko

Nowy selektor arkusza CSS (:focus-visible) umożliwia Ci włączenie tej samej heurystyki, której przeglądarka używa podczas wybierania, czy wyświetlić domyślny wskaźnik zaznaczenia.

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

Za pomocą pseudoelementu CSS ::marker możesz dostosować kolor, rozmiar oraz typ liczby albo listy punktowanej.

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

Już wkrótce pojawi się ekran z Chrome Dev Summit. Więcej informacji znajdziesz na naszym kanale w YouTube.

Więcej informacji

Obejmuje to tylko niektóre z najważniejszych momentów. Aby dowiedzieć się więcej o nowych zmianach w Chrome 86, kliknij poniższe linki.

Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj kanał Chrome Developers w YouTube. Będziemy Ci przysyłać powiadomienia e-mail za każdym razem, gdy opublikujemy nowy film lub gdy dodamy nasz kanał RSS do czytnika kanałów.

Nazywam się Pete LePage i będę informować Cię o nowościach w Chrome, gdy tylko zostanie wydana wersja Chrome 87.