Neu in Chrome 79

Pete LePage

Chrome 79 wird eingeführt.

Ich bin Pete LePage. Sehen wir uns an, was es für Entwickler bei Chrome 79 Neues gibt.

Maskierbare Symbole

Wenn du Android O oder höher verwendest und eine progressive Web-App installiert hast, hast du wahrscheinlich den lästigen weißen Kreis um das Symbol bemerkt.

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, also einen Kreis mit einem Durchmesser von 80% des Canvas.

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


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

Tiger Oakes hat einen tollen Beitrag zu CSS-Tricks veröffentlicht – Maskable Icons: Android Adaptive Icons for Your PWA. Dort findest du alle Details und ein tolles Tool, mit dem du deine Symbole testen kannst, um sicherzustellen, 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 ein ganzes Spektrum an immersiven Inhalten. Sie können Augmented Reality verwenden, um sich vor dem Kauf ein neues Sofa in Ihrem Zuhause anzusehen, Virtual-Reality-Spiele und 360-Grad-Filme und vieles mehr.

Informationen zum Einstieg in die neue API finden Sie unter Virtual Reality kommt im Web.

Neue Ursprungstests

Ursprungstests bieten uns die Möglichkeit, experimentelle Funktionen und APIs zu validieren. Sie haben dann die Möglichkeit, Feedback zu deren Nutzerfreundlichkeit und Effektivität bei der allgemeinen Bereitstellung zu geben.

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

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

Weitere Informationen zu Ursprungstests findest du im Leitfaden zu Ursprungstests für Webentwickler. Auf der Seite Chrome-Ursprungstests können Sie sich eine Liste der aktiven Ursprungstests ansehen und sich für diese registrieren.

Wakelock

Was mich nervt, als ich die Präsentation zu lange auf einer Folie offen lässt, erscheint der Bildschirmschoner. Bevor Sie fortfahren können, müssen Sie Ihren Computer entsperren. Das ist ungerecht.

Mit der neuen Wake Lock API kann eine Seite jedoch eine Sperre anfordern und so verhindern, dass der Bildschirm abgedunkelt oder der Bildschirmschoner aktiviert wird. Sie ist perfekt für Google Präsentationen geeignet, aber auch für Websites mit Rezepten, auf denen der Bildschirm eingeschaltet bleiben soll, während Sie der Anleitung folgen.

Um einen Wakelock anzufordern, 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 findest du unter web.dev/wakelock.

rendersubtree Attribut

Es kann vorkommen, dass ein Teil des DOMs nicht sofort gerendert werden soll. Dazu gehören z. B. Scroller mit einer großen Menge an Inhalten oder UIs mit Tabs, bei denen jeweils nur ein Teil des Inhalts sichtbar ist.

Das neue Attribut rendersubtree teilt dem Browser mit, dass das Rendern dieser Unterstruktur übersprungen werden kann. Dadurch hat der Browser mehr Zeit, um den Rest der Seite zu verarbeiten, was die Leistung steigert.

Wenn rendersubtree auf invisible gesetzt ist, wird der Inhalt des Elements weder gezeichnet noch Treffertests durchgeführt, sodass Rendering-Optimierungen möglich sind.

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

Chrome Dev Summit 2019

Falls ihr den Chrome Dev Summit verpasst habt, findet ihr alle Vorträge auf unserem YouTube-Kanal.

Jake hat auch einen tollen Twitter-Thread mit all den lustigen Dingen, die sich zwischen den Vorträgen ergeben haben, darunter Surjiko, unser neuestes Mitglied unseres Teams.

Weitere Informationen

Hier sind nur einige der wichtigsten Punkte aufgeführt. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 78.

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie werden per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen.

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