Novità di Chrome 102

Pete LePage

Tieni presente quanto segue:

  • Le PWA installate possono registrarsi come gestori 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 lancio definisce se aprire più file in un singolo 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"
  }
]

Poi, per accedere a questi file quando viene lanciata la 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 essere 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 di messa a fuoco e gli eventi 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 a 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 è fondamentalmente centralizzato e viene attivato per tutti i tipi di navigazione, indipendentemente dal fatto che l'utente abbia eseguito un'azione, ad esempio aver fatto clic su un link, inviato un modulo o aver eseguito operazioni di avanzamento e arretramento, anche quando la navigazione viene attivata tramite programmazione. Nella maggior parte dei casi, consente al codice di sostituire il comportamento predefinito del browser per l'azione in questione.

Consulta l'articolo Routing lato client moderno: l'API Navigation per informazioni complete e una demo che puoi provare.

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 rivelare la sezione se viene trovata una corrispondenza.

Per approfondire

Sono riportati solo alcuni dei punti salienti. Consulta i link di seguito per altre modifiche in Chrome 102.

Iscriviti

Per non perderti nessuna novità, iscriviti al canale YouTube di Chrome for Developers, e riceverai una notifica via email ogni volta che lanceremo un nuovo video.

Sono Pete LePage e, non appena verrà rilasciato Chrome 103, sarò qui per dirti le novità di Chrome.