Neu in Chrome 86

Pete LePage

Die stabile Version von Chrome 86 wird schrittweise eingeführt.

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage und arbeite und filme von zu Hause aus. Sehen wir uns an, was in Chrome 86 für Entwickler neu ist.

Dateisystemzugriff

Derzeit können Sie mit dem Element <input type="file"> eine Datei vom Laufwerk lesen. Wenn Sie Änderungen speichern möchten, fügen Sie einem Anchor-Tag download hinzu. Daraufhin wird die Dateiauswahl angezeigt und die Datei wird gespeichert. Es ist nicht möglich, in dieselbe Datei zu schreiben, die Sie geöffnet haben. Dieser Workflow ist ärgerlich.

Mit der File System Access API (früher Native File System API), die die ursprüngliche Testphase abgeschlossen hat und jetzt in der stabilen Version verfügbar ist, können Sie showOpenFilePicker() aufrufen. Daraufhin wird eine Dateiauswahl angezeigt und ein Dateihandle zurückgegeben, mit dem Sie die Datei lesen können.

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

Wenn Sie eine Datei auf dem Laufwerk speichern möchten, können Sie entweder den zuvor erhaltenen Dateihandle verwenden oder showSaveFilePicker() aufrufen, um einen neuen Dateihandle zu erhalten.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}
Screenshot der Berechtigungsanfrage
Aufforderung an den Nutzer, der die Berechtigung zum Schreiben in eine Datei anfordert.

Vor dem Schreiben prüft Chrome, ob der Nutzer eine Schreibberechtigung erteilt hat. Wenn die Schreibberechtigung nicht erteilt wurde, wird der Nutzer zuerst von Chrome gefragt.

Wenn Sie showDirectoryPicker() aufrufen, wird ein Verzeichnis geöffnet, in dem Sie eine Liste der Dateien abrufen oder neue Dateien erstellen können. ideal für Anwendungen wie IDEs oder Mediaplayer, die mit vielen Dateien interagieren. Bevor Sie etwas schreiben können, muss der Nutzer natürlich die Schreibberechtigung erteilen.

Die API bietet noch viel mehr. Weitere Informationen finden Sie im Artikel zum Dateisystemzugriff auf web.dev.

Ursprungstest: WebHID

Controller
Game controller.

Menschliche Schnittstellen, die im Allgemeinen als HID bezeichnet werden, nehmen Eingaben von Menschen entgegen oder liefern Ausgaben für sie. Es gibt eine große Anzahl von Eingabegeräten, die zu neu, zu alt oder zu selten sind, um von den Gerätetreibern des Systems genutzt zu werden.

Die WebHID API, die jetzt als Origin Trial verfügbar ist, bietet eine Möglichkeit, in JavaScript auf diese Geräte zuzugreifen. Mit WebHID können webbasierte Spiele alle Funktionen von Gamepads nutzen, einschließlich aller Tasten, Joysticks, Sensoren, Trigger, LEDs und Rumble-Pakete.

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

Webbasierte Videochat-Apps können die Telefontasten auf speziellen Lautsprechern verwenden, um Anrufe zu starten oder zu beenden, den Ton stummzuschalten und vieles mehr.

HID-Geräteauswahl
Auswahl von HID-Geräten.

Natürlich können leistungsstarke APIs wie diese nur mit Geräten interagieren, wenn der Nutzer dies ausdrücklich zulässt.

Weitere Informationen, Beispiele, eine Einführung und eine coole Demo finden Sie unter Verbindung zu ungewöhnlichen HID-Geräten herstellen.


Ursprungstest: Window Placement API für mehrere Bildschirme

Derzeit können Sie die Eigenschaften des Bildschirms, auf dem sich das Browserfenster befindet, durch Aufrufen von window.screen() abrufen. Was aber, wenn Sie mehrere Monitore verwenden? Der Browser kann Ihnen nur Informationen zum Bildschirm geben, auf dem er gerade geöffnet ist.

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

Mit der Window Placement API für mehrere Bildschirme wird in Chrome 86 ein Origin Trial gestartet. Sie können damit die mit Ihrem Computer verbundenen Bildschirme auflisten und Fenster auf bestimmten Bildschirmen platzieren. Die Möglichkeit, Fenster auf bestimmten Bildschirmen zu platzieren, ist wichtig für Dinge wie Präsentations-Apps, Apps für Finanzdienstleistungen und mehr.

Bevor Sie die API verwenden können, müssen Sie eine Berechtigung anfordern. Andernfalls wird der Nutzer vom Browser aufgefordert, wenn er die Funktion zum ersten Mal verwenden möchte.

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

Sobald der Nutzer die Berechtigung erteilt hat, wird beim Aufrufen von window.getScreens() eine Versprechen zurückgegeben, die mit einem Array von Screen-Objekten aufgelöst werden kann.

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

Ich kann diese Informationen dann verwenden, wenn ich requestFullScreen() anrufe oder neue Fenster platziere. Tom hat alle Details in seinem Artikel Mehrere Displays mit der Window Placement API für mehrere Bildschirme verwalten auf web.dev zusammengestellt.

Und vieles mehr

Mit dem neuen CSS-Selektor :focus-visible können Sie dieselbe Heuristik aktivieren, die der Browser verwendet, um zu entscheiden, ob der Standardfokusindikator angezeigt werden soll.

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

Mit dem CSS-::marker-Pseudoelement können Sie Farbe, Größe oder Art von Nummer oder Aufzählungszeichen für Listen anpassen.

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

Außerdem findet der Chrome Dev Summit in eurer Nähe statt. Weitere Informationen dazu findet ihr in unserem YouTube-Kanal.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 86.

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen. Alternativ können Sie auch unseren RSS-Feed in Ihren Feedreader aufnehmen.

Ich bin Pete LePage. Sobald Chrome 87 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.