Neu in Chrome 79

Pete LePage

Chrome 79 wird jetzt eingeführt.

Hallo, ich bin Pete LePage. In diesem Video erfahrt ihr, was es Neues für Entwickler in Chrome 79 gibt.

Maskierbare Symbole

Wenn Sie Android O oder höher verwenden und eine Progressive Web-App installiert haben, ist Ihnen wahrscheinlich der störende weiße Kreis um das Symbol aufgefallen.

Glücklicherweise unterstützt Chrome 79 jetzt maskierbare Symbole für installierte Progressive Web-Apps.Sie müssen Ihr Symbol so gestalten, dass es in den sicheren Bereich passt – im Grunde ein Kreis mit einem Durchmesser von 80% des Canvas.

Fügen Sie dann im Web-App-Manifest dem Symbol ein neues purpose-Attribut hinzu und legen Sie den Wert auf maskable fest.


{
  ...
  "icons": [
    ...
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
  ]
  ...
}

Tiger Oakes hat einen tollen Beitrag auf CSS Tricks veröffentlicht: Maskable Icons: Android Adaptive Icons for Your PWA. Darin finden Sie alle Details und ein tolles Tool, mit dem Sie Ihre Symbole testen können, um sicherzugehen, dass sie passen.

Web XR

Mit der WebXR Device API können Sie jetzt immersive Erlebnisse für Smartphones und Head-Mounted Displays erstellen.

WebXR ermöglicht eine Vielzahl immersiver Erlebnisse. Von Augmented Reality, mit der Sie sich ansehen können, wie ein neues Sofa in Ihrem Zuhause aussehen würde, bevor Sie es kaufen, bis hin zu Virtual-Reality-Spielen und 360‑Grad-Filmen – es gibt viele Möglichkeiten.

Weitere Informationen zur neuen API

Neue Ursprungstests

Mit Origin Trials können wir experimentelle Funktionen und APIs validieren und Sie können Feedback zu ihrer Benutzerfreundlichkeit und Effektivität bei einer breiteren Bereitstellung geben.

Experimentelle Funktionen sind in der Regel nur hinter einem Flag verfügbar. Wenn wir jedoch einen Origin Trial für eine Funktion anbieten, können Sie sich für diesen Origin Trial registrieren, um die Funktion für alle Nutzer in Ihrem Ursprung zu aktivieren.

Wenn Sie sich für einen Ursprungstest anmelden, können Sie Demos und Prototypen erstellen, die Ihre Betatester während des Testzeitraums ausprobieren können, ohne dass sie spezielle Flags in Chrome aktivieren müssen.

Weitere Informationen zu Origin Trials finden Sie im Origin Trials Guide for Web Developers. Auf der Seite Chrome Origin Trials finden Sie eine Liste der aktiven Origin Trials und können sich dafür registrieren.

Wakelock

Einer meiner größten Kritikpunkte an Google Präsentationen ist, dass der Bildschirmschoner aktiviert wird, wenn man die Präsentation zu lange auf einer einzelnen Folie geöffnet lässt. Bevor Sie fortfahren können, müssen Sie Ihren Computer entsperren. Argh.

Mit der neuen Wake Lock API kann eine Seite jedoch einen Lock anfordern und so verhindern, dass der Bildschirm gedimmt wird oder der Bildschirmschoner aktiviert wird. Diese Funktion ist ideal für Google-Präsentationen, aber auch für andere Zwecke nützlich, z. B. auf Rezeptwebsites, auf denen Sie den Bildschirm möglicherweise eingeschaltet lassen möchten, während Sie den Anweisungen folgen.

Wenn Sie ein Wake Lock anfordern möchten, müssen Sie navigator.wakeLock.request() aufrufen und das zurückgegebene WakeLockSentinel-Objekt speichern.

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Die Sperre bleibt bestehen, bis der Nutzer die Seite verlässt oder Sie release für das zuvor gespeicherte WakeLockSentinel-Objekt aufrufen.

// Function that attempts to release the wake lock.
const releaseWakeLock = async () => {
  if (!wakeLock) {
    return;
  }
  try {
    await wakeLock.release();
    wakeLock = null;
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

Weitere Informationen finden Sie unter web.dev/wakelock.

rendersubtree Attribut

Manchmal soll ein Teil des DOM nicht sofort gerendert werden. Das können beispielsweise Scroller mit einer großen Menge an Inhalten oder Tabbed‑UIs sein, in denen jeweils nur ein Teil der Inhalte sichtbar ist.

Das neue Attribut rendersubtree weist den Browser an, das Rendern dieses Teilbaums zu überspringen. So hat der Browser mehr Zeit, den Rest der Seite zu verarbeiten, was die Leistung steigert.

Wenn rendersubtree auf invisible gesetzt ist, wird der Inhalt des Elements nicht gerendert oder auf Treffer getestet. Dies ermöglicht Rendering-Optimierungen.

Wenn Sie rendersubtree in activatable ändern, wird der Inhalt sichtbar, da das Attribut invisible entfernt und der Inhalt gerendert wird.

Chrome Dev Summit 2019

Falls Sie das Chrome Dev Summit verpasst haben, finden Sie alle Vorträge auf unserem YouTube-Kanal.

Jake hat auch einen tollen Twitter-Thread mit allen lustigen Dingen, die zwischen den Vorträgen passiert sind, einschließlich des neuesten Mitglieds unseres Teams, Surjiko.

Weitere Informationen

Dies sind nur einige der wichtigsten Neuerungen. Weitere Änderungen in Chrome 78 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.

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