Neu in Chrome 86

Pete LePage

Chrome 86 wird jetzt in der stabilen Version eingeführt.

Dazu sollten Sie Folgendes wissen:

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

File System Access

Heute können Sie mit dem Element <input type="file"> eine Datei von der Festplatte lesen. Wenn Sie Änderungen speichern möchten, fügen Sie einem Anker-Tag download hinzu. Dadurch wird die Dateiauswahl angezeigt und die Datei wird gespeichert. Sie können nicht in dieselbe Datei schreiben, die Sie geöffnet haben. Dieser Workflow ist lästig.

Mit der File System Access API (früher Native File System API), die aus dem Origin Trial herausgewachsen ist und jetzt in der stabilen Version verfügbar ist, können Sie showOpenFilePicker() aufrufen. Dadurch 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 der Festplatte speichern möchten, können Sie entweder das zuvor abgerufene Dateihandle verwenden oder showSaveFilePicker() aufrufen, um ein neues 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 Berechtigungsaufforderung
Aufforderung an den Nutzer, die Berechtigung zum Schreiben in eine Datei zu erteilen.

Vor dem Schreiben prüft Chrome, ob der Nutzer die Schreibberechtigung erteilt hat. Wenn dies nicht der Fall ist, werden Nutzer von Chrome zuerst dazu aufgefordert.

Wenn Sie showDirectoryPicker() aufrufen, wird ein Verzeichnis geöffnet, in dem Sie eine Liste von Dateien abrufen oder neue Dateien erstellen können. Ideal für IDEs oder Media-Player, 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
Controller

Human Interface Devices (HIDs) nehmen Eingaben von Menschen entgegen oder geben Ausgaben an Menschen aus. Es gibt eine Vielzahl von Mensch-Maschine-Schnittstellen, die zu neu, zu alt oder zu ungewöhnlich sind, um von den Gerätetreibern der Systeme unterstützt 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 Gamepads voll ausnutzen, einschließlich aller Tasten, Joysticks, Sensoren, Trigger, LEDs, Rumble-Packs und mehr.

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 Telefonie-Schaltflächen auf speziellen Lautsprechern verwenden, um Anrufe zu starten oder zu beenden, den Ton stummzuschalten und vieles mehr.

HID-Geräteauswahl
HID-Geräteauswahl.

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

Weitere Informationen, Beispiele, eine Anleitung für den Einstieg und eine Demo finden Sie unter Verbindung zu ungewöhnlichen HID-Geräten herstellen.


Ursprungstest: Multi-Screen Window Placement API

Heute können Sie die Eigenschaften des Bildschirms abrufen, auf dem sich das Browserfenster befindet, indem Sie window.screen() aufrufen. Was aber, wenn Sie mehrere Monitore verwenden? Tut mir leid, der Browser kann dir nur Informationen zum aktuellen Bildschirm geben.

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

Die Multi-Screen Window Placement API startet in Chrome 86 einen Origin-Testlauf. Damit können Sie die mit Ihrem Computer verbundenen Bildschirme auflisten und Fenster auf bestimmten Bildschirmen platzieren. Die Möglichkeit, Fenster auf bestimmten Bildschirmen zu platzieren, ist für Präsentations-Apps, Finanzdienstleistungs-Apps und andere Apps von entscheidender Bedeutung.

Bevor Sie die API verwenden können, müssen Sie eine Berechtigung anfordern. Andernfalls wird der Nutzer beim ersten Versuch, den Browser zu verwenden, dazu aufgefordert.

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

Nachdem der Nutzer die Berechtigung erteilt hat, wird durch den Aufruf von window.getScreens() ein Promise zurückgegeben, das mit einem Array von Screen-Objekten aufgelöst wird.

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 beim Aufrufen von requestFullScreen() oder beim Platzieren neuer Fenster verwenden. Tom hat alle Details in seinem Artikel Managing several displays with the Multi-Screen Window Placement API auf web.dev beschrieben.

Und vieles mehr

Mit dem neuen CSS-Selektor :focus-visible können Sie dieselbe Heuristik verwenden, die der Browser verwendet, wenn er entscheidet, 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);
}

Sie können die Farbe, Größe oder Art der Nummer oder des Aufzählungszeichens für Listen mit dem CSS-Pseudoelement ::marker anpassen.

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

Das Chrome Dev Summit wird auf einem Bildschirm in Ihrer Nähe stattfinden. Weitere Informationen finden Sie auf unserem YouTube-Kanal.

Weitere Informationen

Dies sind nur einige der wichtigsten Neuerungen. Weitere Änderungen in Chrome 86 finden Sie unter den folgenden Links.

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, wenn wir ein neues Video veröffentlichen. Alternativ können Sie auch unseren RSS-Feed in Ihren Feedreader einfügen.

Ich bin Pete LePage und sobald Chrome 87 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.