Neu in Chrome 102

Pete LePage

Dazu sollten Sie Folgendes wissen:

  • Installierte PWAs können sich als Dateihandler registrieren, sodass Nutzer Dateien ganz einfach direkt von der Festplatte öffnen können.
  • Mit dem Attribut inert können Sie Teile des DOM als inaktiv markieren.
  • Die Navigation API erleichtert die Verarbeitung von Navigation und Aktualisierungen der URL in Single-Page-Apps.
  • Und es gibt noch viel mehr.

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

File Handling API

Mit der File Handling API können installierte PWAs sich beim Betriebssystem als Dateihandler registrieren. Nach der Registrierung kann ein Nutzer auf eine Datei klicken, um sie mit der installierten PWA zu öffnen. Das ist ideal für PWAs, die mit Dateien interagieren, z. B. Bildbearbeitungsprogramme, IDEs und Texteditoren.

Wenn Sie Ihrer PWA die Funktion zur Dateiverarbeitung hinzufügen möchten, müssen Sie das Web-App-Manifest aktualisieren und ein file_handlers-Array mit Details zu den Dateitypen hinzufügen, die Ihre PWA verarbeiten kann. Sie müssen die zu öffnende URL, die MIME-Typen, ein Symbol für den Dateityp und den Starttyp angeben. Der Starttyp bestimmt, ob mehrere Dateien in einem einzelnen Client oder in mehreren Clients geöffnet werden sollen.

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

Wenn Sie dann beim Starten der PWA auf diese Dateien zugreifen möchten, müssen Sie einen Consumer für das launchQueue-Objekt angeben. Die Starts werden in die Warteschlange gestellt, bis sie vom Nutzer verarbeitet werden.

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

Weitere Informationen finden Sie unter Installierte Webanwendungen als Dateihandler festlegen.

Die inert-Property

Die inert-Eigenschaft ist ein globales HTML-Attribut, das dem Browser mitteilt, dass er Nutzer-Eingabeereignisse für ein Element ignorieren soll, einschließlich Fokusereignissen und Ereignissen von unterstützenden Technologien.

Das kann beim Erstellen von Benutzeroberflächen nützlich sein. Bei einem modalen Dialogfeld möchten Sie beispielsweise den Fokus im modalen Dialogfeld „einfangen“, wenn es sichtbar ist. Wenn Sie inert für eine Schublade hinzufügen, die nicht immer für den Nutzer sichtbar ist, wird verhindert, dass ein Tastaturnutzer versehentlich mit ihr interagiert, während sie sich außerhalb des Bildschirms befindet.

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

Hier wurde inert für das zweite <div>-Element deklariert. Daher kann der gesamte darin enthaltene Inhalt, einschließlich <button> und <label>, nicht fokussiert oder angeklickt werden.

inert wird in Chrome 102 unterstützt und wird auch in Firefox und Safari eingeführt.

Weitere Informationen finden Sie unter Introducing inert.

Viele Web-Apps sind darauf angewiesen, dass die URL ohne Seitenwechsel aktualisiert werden kann. Derzeit verwenden wir die History API, die jedoch umständlich ist und nicht immer wie erwartet funktioniert. Anstatt die Schwachstellen der History API zu beheben, wird mit der Navigation API dieser Bereich komplett überarbeitet.

Wenn Sie die Navigation API verwenden möchten, fügen Sie dem globalen navigation-Objekt einen navigate-Listener hinzu.

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

Das Ereignis ist grundsätzlich zentralisiert und wird für alle Arten von Navigationen ausgelöst, unabhängig davon, ob der Nutzer eine Aktion ausgeführt hat, z. B. auf einen Link geklickt, ein Formular gesendet oder vor- und zurückgegangen ist. Das gilt auch, wenn die Navigation programmatisch ausgelöst wird. In den meisten Fällen können Sie mit Ihrem Code das Standardverhalten des Browsers für diese Aktion überschreiben.

Weitere Informationen und eine Demo finden Sie unter „Modern client-side routing: the Navigation API“.

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Ziel der neuen Sanitizer API ist es, einen robusten Prozessor für beliebige Strings zu entwickeln, die sicher in eine Seite eingefügt werden können.
  • Mit dem Attribut hidden=until-found kann der Browser Text in verborgenen Bereichen suchen und diesen Bereich einblenden, wenn eine Übereinstimmung gefunden wird.

Weitere Informationen

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

Abonnieren

Wenn Sie immer auf dem neuesten Stand bleiben möchten, abonnieren Sie den YouTube-Kanal Chrome Developers. Sie erhalten dann eine E‑Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

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