Neu in Chrome 93

Pete LePage

Dazu sollten Sie Folgendes wissen:

  • Sie können CSS-Stylesheets jetzt mit import-Anweisungen laden, genau wie JavaScript-Module.
  • Installierte PWAs können als URL-Handler registriert werden, sodass Nutzer direkt zu Ihrer PWA gelangen können.
  • Die Multi-Screen Window Placement API wurde basierend auf Ihrem Feedback aktualisiert und ein zweiter Ursprungstest wird gestartet.
  • Der PWA Summit findet am 6. und 7. Oktober statt.
  • Und es gibt noch viel mehr.

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

CSS-Modulskripts

Sie können jetzt CSS-Stylesheets mit import-Anweisungen laden, genau wie JavaScript-Module. Die Stylesheets können dann auf dieselbe Weise wie konstruierbare Stylesheets auf das Dokument oder die Shadow-Roots angewendet werden.

Die neue Funktion „CSS-Modulscripts“ eignet sich hervorragend für benutzerdefinierte Elemente. Im Gegensatz zu anderen Methoden, CSS über JavaScript anzuwenden, müssen Sie keine Elemente erstellen oder sich mit JavaScript-Strings von CSS-Text herumschlagen.

Importieren Sie dazu das Stylesheet mit assert {type: 'css'} und wenden Sie es dann auf document oder shadowRoot an, indem Sie adoptedStyleSheets aufrufen.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

Aber Achtung: Wenn Sie assert weglassen, wird die Datei als JavaScript behandelt und funktioniert nicht.

Ausführliche Informationen finden Sie unter CSS-Modulskripts zum Importieren von Stylesheets verwenden auf web.dev.

Multi-Screen Window Placement API

Bei einigen Apps ist das Öffnen neuer Fenster und das Platzieren an bestimmten Stellen oder auf bestimmten Displays eine wichtige Funktion. Wenn ich beispielsweise eine Präsentation mit Google Präsentationen halte, möchte ich, dass die Folien im Vollbildmodus auf dem Hauptdisplay und meine Vortragsnotizen auf dem anderen Display angezeigt werden.

Mit der Multi-Screen Window Placement API können die mit dem Gerät des Nutzers verbundenen Displays aufgelistet und Fenster auf bestimmten Bildschirmen platziert werden. Dies ist der zweite Ursprungstest und wir haben basierend auf eurem Feedback eine Reihe von Änderungen vorgenommen.

So können Sie schnell prüfen, ob mehr als ein Bildschirm mit dem Gerät verbunden ist:

const isExtended = window.screen.isExtended;
// returns true/false

Die wichtigste Funktion ist jedoch window.getScreens(), die alle Details zu den angeschlossenen Displays enthält.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Sie können beispielsweise den primären Bildschirm ermitteln und dann mit requestFullscreen() ein Element auf diesem Bildschirm anzeigen lassen.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Außerdem bietet sie eine Möglichkeit, auf Änderungen zu warten, z. B. wenn ein neues Display angeschlossen oder entfernt wird.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Weitere Informationen finden Sie im Artikel Managing several displays with the Multi-Screen Window Placement API von Tom auf web.dev.

Verkürzter Release-Zyklus

Im März haben wir unsere Pläne zur Verkürzung des Release-Zyklus und zur Veröffentlichung einer neuen Chrome-Version alle vier Wochen angekündigt.

Dieser Zeitpunkt ist jetzt gekommen und wir werden Chrome 94 am 21. September veröffentlichen. Die geplanten Veröffentlichungstermine für die einzelnen Versionen finden Sie im Chrome-Kalender.

Neue PWA-Funktionen

Wenn Sie eine progressive Web-App entwickeln, sollten Sie sich zwei neue Ursprungstests ansehen.

URL-Handler für PWAs

Wenn Sie eine PWA installiert haben und auf einen Link zu dieser PWA klicken, möchten Sie wahrscheinlich, dass sie in der PWA und nicht in einem Browsertab geöffnet wird.

Wenn Sie in Ihrem Web-App-Manifest url_handlers angeben und Ihrem .well-known/-Verzeichnis eine web-app-origin-association-Datei hinzufügen, können Sie dem Browser mitteilen, dass ein Link zu Ihrer PWA innerhalb der installierten PWA geöffnet werden soll, wenn ein Nutzer darauf klickt.

Beispiel für url_handlers in der Datei manifest.json:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

web-app-origin-association-Beispieldatei:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Mit einer zusätzlichen Bestätigung können Sie sogar Links von anderen Ursprüngen, die Sie besitzen, in Ihrer PWA verarbeiten lassen.

Alle Details zum Ursprungstest finden Sie unter PWAs as URL Handlers auf web.dev.

Overlay für Fenstersteuerelemente

Das Overlay für Fenstersteuerelemente erweitert den Clientbereich auf das gesamte Fenster, einschließlich der Titelleiste und der Fenstersteuerelemente wie „Schließen“, „Maximieren“ und „Minimieren“.

Mit dieser Funktion können Sie dafür sorgen, dass Ihre installierte PWA anderen installierten Apps ähnelt.

Weitere Informationen zum Ursprungstest findest du unter Overlay für Fenstersteuerelemente der Titelleiste deiner PWA anpassen.

PWA Summit

Der PWA Summit findet im Oktober statt. Es ist eine kostenlose Onlinekonferenz, die allen helfen soll, mit Progressive Web-Apps erfolgreich zu sein. Der PWA Summit ist eine Zusammenarbeit zwischen Personen aus einer Handvoll verschiedener Unternehmen, die an der Entwicklung von PWA-Technologien beteiligt sind: Google, Intel, Microsoft und Samsung.

Es gibt eine Menge toller Vorträge und Inhalte. Weitere Informationen und die Möglichkeit zur Registrierung finden Sie unter PWASummit.org.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Flexbox und Flexbox-Elemente unterstützen jetzt die Ausrichtungs-Keywords start, end, self-start, self-end, left und right.
  • Die asynchrone Clipboard API unterstützt jetzt SVG-Dateien.
  • Das Attribut media wird beim Festlegen von meta theme-color berücksichtigt, sodass Sie für den hellen und den dunklen Modus unterschiedliche Designfarben angeben können.
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Weitere Änderungen in Chrome 93 finden Sie unter den Links unten.

Abonnieren

Wenn ihr auf dem neuesten Stand bleiben möchtet, abonniert den YouTube-Kanal „Chrome Developers“. Ihr erhaltet dann eine E‑Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und sobald Chrome 94 veröffentlicht wird, erfährst du hier, was es Neues in Chrome gibt.