Novità di Chrome 102

Pete LePage

Tieni presente quanto segue:

  • Le PWA installate possono essere registrate come gestori di file, consentendo agli utenti di aprire facilmente i file direttamente dal disco.
  • L'attributo inert consente di contrassegnare parti del DOM come inerti.
  • L'API Navigazione semplifica la gestione della navigazione e degli aggiornamenti dell'URL da parte delle app su una sola pagina
  • E ce ne sono molte altre.

Mi chiamo Pete LePage. Analizziamo in dettaglio le novità per gli sviluppatori di Chrome 102.

API File Handling

L'API File Managing consente alle PWA installate di registrarsi con il sistema operativo come gestore di file. Dopo la registrazione, l'utente può fare clic su un file per aprirlo con la PWA installata. È la soluzione perfetta 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 PWA, devi aggiornare il manifest dell'app web, aggiungendo un array file_handlers con i dettagli sui tipi di file che la PWA può gestire. Dovrai specificare l'URL da aprire, i tipi mime, un'icona per il tipo di file e il tipo di avvio. Il tipo di lancio definisce se è necessario aprire più file 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"
  }
]

Successivamente, 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 consumer.

// 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 focus e gli eventi delle tecnologie per la disabilità.

Questo può essere utile durante la creazione di UI. Ad esempio, con una finestra di dialogo modale, vuoi "trap" l'elemento attivo all'interno della finestra modale. Oppure, per un riquadro a scomparsa che non è sempre visibile all'utente, l'aggiunta di inert garantisce che, quando il riquadro a scomparsa è fuori schermo, l'utente della tastiera non possa interagire accidentalmente con il riquadro a scomparsa.

<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 sul secondo elemento <div>, pertanto tutti i contenuti contenenti, inclusi <button> e <label>, non possono ricevere lo stato attivo o fare clic.

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

Per ulteriori dettagli, consulta Introduzione a inert.

Molte app web dipendono dalla possibilità di aggiornare l'URL senza una navigazione nelle pagine. Oggi utilizziamo l'API History, ma è scomoda e non sempre funziona come previsto. Anziché provare ad applicare le patch ai bordi dell'API History, l'API Navigation rielabora completamente questo spazio.

Per utilizzare l'API Navigation, aggiungi un listener navigate nell'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 viene attivato 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 quell'azione.

Per i dettagli completi e una demo che puoi provare, consulta Routing lato client moderno: l'API di navigazione.

E tanto altro.

Ovviamente c'è molto altro.

  • La nuova API Sanitizer mira a creare un processore solido per le stringhe arbitrarie da inserire in sicurezza in una pagina.
  • L'attributo hidden=until-found consente al browser di cercare testo nelle regioni nascoste e di mostrare quella sezione se viene trovata una corrispondenza.

Per approfondire

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

Abbonati

Per non perderti nessun aggiornamento, iscriviti al canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che verrà lanciato un nuovo video.

Mi chiamo Pete LePage e, non appena verrà rilasciata la versione 103 di Chrome, sarò qui per dirvi le novità di Chrome.