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

Nowości w Chrome 86

Pete LePage

Chrome 86 jest już wdrażany 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 testy origin dla Web HID i Multi-screen Window placement API.
W usłudze porównywania cen pojawiło się kilka nowych funkcji i wiele innych.

Nazywam się Pete LePage. Pracuję i strzelam z domu. Przyjrzyjmy się, co nowego dla programistów Chrome 86.

Dostęp do systemu plików

Obecnie możesz za pomocą elementu <input type="file"> odczytywać plik z dysku. Aby zapisać zmiany, dodaj tag kotwicy download. Spowoduje to wyświetlenie selektora plików, a następnie zapisanie pliku. Nie można zapisywać w tym samym pliku, który został otwarty. Ten proces jest uciążliwy.

Za pomocą interfejsu File System Access API (dawniej Native File System API), który jest już dostępny w wersji stabilnej, ale który nie jest już w wersji testowej, możesz wywołać showOpenFilePicker(), który wyświetla selektor plików, a potem zwraca uchwyt, którego możesz użyć do odczytania 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ć uchwytu pliku uzyskanego wcześniej lub wywołać funkcję showSaveFilePicker(), aby uzyskać nowy uchwyt pliku.

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 uprawnienia — Zaproś użytkownika o przyznanie uprawnień do zapisu w pliku.

Przed zapisaniem danych Chrome sprawdzi, czy użytkownik przyznał uprawnienia do zapisu. Jeśli nie, Chrome wyświetli odpowiednie powiadomienie.

Wywołanie showDirectoryPicker() spowoduje otwarcie katalogu, w którym można uzyskać listę plików lub utworzyć nowe pliki. Idealne rozwiązanie dla IDE lub odtwarzaczy multimediów, które współpracują z wieloma plikami. Zanim zaczniesz coś zapisywać, użytkownik musi przyznać Ci odpowiednie uprawnienia.

Interfejs API ma o wiele więcej funkcji, więc zapoznaj się z artykułem na temat dostępu do systemu plików na stronie web.dev.

Wersja próbna origin: WebHID

Urządzenia interfejsu użytkownika, powszechnie nazywane HID, przyjmują dane od użytkowników lub wyświetlają je użytkownikom. Istnieje długa lista urządzeń HID, które są zbyt nowe, zbyt stare lub zbyt nietypowe, aby systemy mogły uzyskać do nich dostęp za pomocą sterowników urządzeń.

Interfejs WebHID API, który jest teraz dostępny w ramach testów wersji źródłowej, rozwiązuje ten problem, oferując sposób uzyskiwania dostępu do tych urządzeń w JavaScript. Dzięki WebHID gry internetowe w pełni wykorzystują pady do gier, w tym wszystkie przyciski, joysticki, czujniki, spusty, diody LED, pulowery i inne elementy.

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);
});

Aplikacje do czatowania wideo w przeglądarce mogą używać przycisków telefonicznych na specjalnych głośnikach, aby rozpoczynać i kończyć połączenia, wyciszać dźwięk itp.

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

Aby uzyskać więcej informacji, przykłady, wskazówki dotyczące korzystania z urządzenia i ciekawe demo, zapoznaj się z artykułem Łączenie z niestandardowymi urządzeniami HID.

Wersja próbna origin: interfejs Multi-Screen Window Destination API

Obecnie możesz uzyskać właściwości ekranu, na którym znajduje się okno przeglądarki, wywołując funkcję window.screen(). A co w sytuacji, gdy masz zestaw z kilkoma monitorami? Przepraszamy, ale przeglądarka wyświetla tylko informacje o ekranie, na którym się znajduje.

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

Interfejs Window Placement API dla wielu ekranów uruchamia próbę pochodzenia w Chrome 86. Umożliwia ona zliczanie ekranów połączonych z urządzeniem oraz umieszczanie okien na określonych ekranach. Umiejętność umieszczania okien na określonych ekranach jest kluczowa w przypadku aplikacji do prezentacji, aplikacji usług finansowych itp.

Zanim zaczniesz korzystać z interfejsu API, musisz poprosić o pozwolenie. Jeśli tego nie zrobisz, przeglądarka poprosi o to 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 window.getScreens() zwróci obietnicę, która zwróci 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 podczas wywoływania requestFullScreen() lub tworzenia nowych okien. Szczegółowe informacje Tomek poda w artykule Zarządzanie kilkoma wyświetlaczami za pomocą interfejsu Multi-Screen Window Location API na stronie web.dev.

I nie tylko

Nowy selektor arkusza CSS, :focus-visible, umożliwia włączenie tej samej heurystyki, z której korzysta przeglądarka przy podejmowaniu decyzji o wyświetleniu domyślnego wskaźnika 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 lub typ numeru lub znaku odsyłacza dla list.

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

Wkrótce odbędzie się też Chrome Dev Summit, więc bądź na bieżąco na naszym kanale w YouTube, aby dowiedzieć się więcej.

Więcej informacji

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

Jeśli chcesz być na bieżąco z nowymi filmami, zasubskrybuj kanał w YouTube dla deweloperów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy opublikujemy nowy film, lub dodasz nasz kanał RSS do czytnika kanałów.

Nazywam się Pete LePage i zaraz po wydaniu Chrome 87 będę tu, aby opowiedzieć Ci o nowościach w tej przeglądarce.