Novità di Chrome 102

Pete LePage

Tieni presente quanto segue:

  • Le PWA installate possono registrarsi come gestori di file, consentendo agli utenti di aprire facilmente i file direttamente dal disco.
  • L'attributo inert ti consente di contrassegnare parti del DOM come inattive.
  • L'API Navigation semplifica la gestione della navigazione e degli aggiornamenti dell'URL per le app a pagina singola
  • E c'è molto altro.

Sono Pete LePage. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 102.

API File Handling

L'API File Handling consente ai PWA installati di registrarsi nel sistema operativo come gestori di file. Una volta registrato, un utente può fare clic su un file per aprirlo con la PWA installata. È l'ideale per le PWA che interagiscono con i file, ad esempio editor di immagini, IDE, editor di testo e così via.

Per aggiungere la funzionalità di gestione dei file alla tua PWA, devi aggiornare il manifest della tua app web aggiungendo un array file_handlers con i dettagli dei tipi di file che la tua PWA può gestire. Dovrai specificare l'URL da aprire, i tipi MIME, un'icona per il tipo di file e il tipo di lancio. Il tipo di avvio definisce se più file devono essere aperti in un solo client o in più client.

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

Quindi, per accedere a questi file all'avvio della PWA, devi specificare un consumer per l'oggetto launchQueue. I lanci vengono messi in coda finché non vengono gestiti dal consumatore.

// 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);
  }
});

Per tutti i dettagli, consulta Consentire alle applicazioni web installate di diventare gestori di file.

La proprietà inert

La proprietà inert è un attributo HTML globale che indica al browser di ignorare gli eventi di input utente per un elemento, inclusi gli eventi principali e quelli delle tecnologie per la disabilità.

Ciò può essere utile durante la creazione di UI. Ad esempio, con una finestra di dialogo modale, vuoi "intrappolare" lo stato attivo all'interno della finestra modale quando è visibile. In alternativa, per un riquadro nascosto che non è sempre visibile all'utente, l'aggiunta di inert garantisce che, mentre il riquadro è fuori dallo schermo, un utente con tastiera non possa interagire accidentalmente con esso.

<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>

In questo caso, inert è stato dichiarato nel secondo elemento <div>, pertanto tutti i contenuti al suo interno, inclusi <button> e <label>, non possono ricevere lo stato attivo o essere selezionati.

inert è supportato in Chrome 102 e sarà disponibile sia in Firefox sia in Safari.

Per ulteriori dettagli, consulta Introduzione all'inert.

Molte app web dipendono dalla possibilità di aggiornare l'URL senza la navigazione tra le pagine. Attualmente utilizziamo l'API History, ma è complicata e non funziona sempre come previsto. Anziché provare a correggere le asperità dell'API History, l'API Navigation rivede completamente questo spazio.

Per utilizzare l'API Navigation, aggiungi un ascoltatore navigate all'oggetto navigation globale.

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;
  }
});

L'evento è sostanzialmente centralizzato e si attiverà per tutti i tipi di navigazioni, indipendentemente dal fatto che l'utente abbia eseguito un'azione, come fare clic su un link, inviare un modulo o andare avanti e indietro, anche quando la navigazione è attivata in modo programmatico. Nella maggior parte dei casi, consente al codice di sostituire il comportamento predefinito del browser per l'azione in questione.

Per i dettagli completi e una demo da provare, consulta Modern routing lato client: the Navigation API.

E tanto altro.

Ovviamente ce ne sono molti altri.

  • L'obiettivo della nuova API Sanitizer è creare un elaboratore affidabile per stringhe arbitrarie da inserire in modo sicuro in una pagina.
  • L'attributo hidden=until-found consente al browser di eseguire ricerche di testo nelle regioni nascoste e di mostrare la sezione se viene trovata una corrispondenza.

Per approfondire

Sono riportati solo alcuni punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 102.

Iscriviti

Per rimanere al passo con le novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Mi chiamo Pete LePage e non appena uscirà Chrome 103, saranno qui per dirti le novità di Chrome.