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 pochodzenia w przypadku Web HID i interfejsu Multi-screen Window Placement API.
W usłudze porównywania cen pojawiło się kilka nowych funkcji i wiele innych.

Nazywam się Pete LePage i pracuję oraz nagrywam filmy z domu. Zobaczmy, co nowego w Chrome 86 dla programistów.

Dostęp do systemu plików

Obecnie możesz użyć elementu <input type="file">, aby odczytać 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.

Dzięki interfejsowi File System Access API (wcześniej Native File System API), który przeszedł testy wersji źródłowej i jest teraz dostępny w wersji stabilnej, możesz wywołać showOpenFilePicker(), aby wyświetlić okno wyboru plików, a potem zwrócić uchwyt pliku, 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ć 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 uprawnienia do zapisu.

Interfejs API ma znacznie więcej możliwości. 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 języku JavaScript. Dzięki WebHID gry internetowe mogą w pełni korzystać z kontrolerów, w tym wszystkich przycisków, joysticków, czujników, spustów, diod LED i innych elementów.

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 wideoczatu 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.

Selektor urządzeń HID — Wybór urządzenia HID.

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 Placement API

Obecnie możesz uzyskać właściwości ekranu, na którym znajduje się okno przeglądarki, wywołując funkcję window.screen(). Co jednak, jeśli masz kilka monitorów? Przepraszamy, ale przeglądarka poinformuje Cię tylko o ekranie, na którym jest obecnie otwarta.

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

Interfejs API do umieszczania okien na wielu ekranach uruchamia próbę pochodzenia w Chrome 86. Pozwala on wymienić ekrany połączone z urządzeniem oraz umieścić okna 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 wyświetli użytkownikowi odpowiedni komunikat przy pierwszym użyciu.

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ę potem użyć tych informacji podczas wywoływania requestFullScreen() lub tworzenia nowych okien. Wszystkie szczegóły znajdziesz w artykule Zarządzanie wieloma wyświetlaczami za pomocą interfejsu Multi-Screen Window Placement API na stronie web.dev.

I nie tylko

Nowy selektor CSS, :focus-visible, umożliwia korzystanie z tej samej heurystyki, której używa przeglądarka, gdy decyduje, czy wyświetlić domyślny wskaźnik fokusa.

/* 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 symbolu na liście.

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 naszych filmów, zasubskrybuj nasz 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.