Neu in Chrome 102

Pete LePage

Dazu sollten Sie Folgendes wissen:

  • Installierte PWAs können sich als Datei-Handler registrieren. Dadurch können Nutzer Dateien direkt vom Laufwerk öffnen.
  • Mit dem Attribut inert können Sie Teile des DOM als inaktiv markieren.
  • Die Navigation API erleichtert es einseitigen Apps die Navigation und Aktualisierung der URL.
  • Und es gibt viele weitere.

Mein Name ist Pete LePage. Jetzt sehen wir uns an, was es bei Chrome 102 Neues gibt.

File Handling API

Mit der File Handling API können installierte PWAs beim Betriebssystem als Datei-Handler registriert werden. Nach der Registrierung kann ein Nutzer auf eine Datei klicken, um sie mit der installierten PWA zu öffnen. Dies ist ideal für PWAs, die mit Dateien interagieren, z. B. Bildeditoren, IDEs, Texteditoren usw.

Wenn Sie Ihrer PWA Dateiverarbeitungsfunktionen hinzufügen möchten, müssen Sie das Manifest Ihrer Web-App 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 definiert, 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"
  }
]

Damit Sie dann beim Start der PWA auf diese Dateien zugreifen können, müssen Sie einen Nutzer für das launchQueue-Objekt angeben. 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 Datei-Handler verwenden.

Das Attribut inert

Das Attribut inert ist ein globales HTML-Attribut, das den Browser anweist, Nutzereingabeereignisse für ein Element zu ignorieren, einschließlich Fokusereignisse und Ereignisse aus Hilfstechnologien.

Dies kann beim Erstellen von Benutzeroberflächen hilfreich sein. Bei einem modalen Dialogfeld soll der Fokus z. B. innerhalb eines eingeblendeten Dialogfelds „gefangen“ werden, wenn es sichtbar ist. Bei einer Leiste, die für den Nutzer nicht immer sichtbar ist, sorgt das Hinzufügen von inert dafür, dass ein Tastaturnutzer nicht versehentlich mit ihr interagieren kann, wenn sie sich nicht auf dem Bildschirm 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. Der gesamte Inhalt, einschließlich <button> und <label>, kann also nicht fokussiert werden und kann nicht angeklickt werden.

inert wird in Chrome 102 unterstützt und ist demnächst sowohl in Firefox als auch in Safari verfügbar.

Weitere Informationen finden Sie unter Einführung in inert.

Bei vielen Webanwendungen kann die URL ohne Seitennavigation aktualisiert werden. Wir verwenden heute die Verlaufs-API, die jedoch umständlich ist und nicht immer wie erwartet funktioniert. Anstatt zu versuchen, die Ränder der History API zu patchen, wird der Bereich von der Navigation API komplett überarbeitet.

Fügen Sie dem globalen navigation-Objekt einen navigate-Listener hinzu, um die Navigation API zu verwenden.

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 im Wesentlichen zentralisiert und wird bei allen 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ückgekehrt ist, selbst wenn die Navigation programmatisch ausgelöst wird. In den meisten Fällen lässt sich damit das Standardverhalten des Browsers für diese Aktion durch Ihren Code überschreiben.

Ausführliche Informationen und eine Demo finden Sie unter Modernes clientseitiges Routing: die 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 erstellen, die sicher in eine Seite eingefügt werden können.
  • Mit dem Attribut hidden=until-found kann der Browser Text in ausgeblendeten Bereichen suchen und diesen Abschnitt sichtbar machen, wenn eine Übereinstimmung gefunden wird.

Weitere Informationen

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

Abo

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage. Sobald Chrome 103 veröffentlicht wird, melde ich Ihnen, was es bei Chrome Neues gibt.