 Pete LePage [X](https://twitter.com/petele) [GitHub](https://github.com/petele) [Mastodon](https://techhub.social/@petele) [Homepage](https://petelepage.com/)
[Video](https://www.youtube.com/watch?v=AGyP85QEBzY)
Here's what you need to know:
- Installed PWAs can register as [file handlers](https://developer.chrome.com/blog/new-in-chrome-102.md.txt#file-handlers), making it easy for users to open files directly from disk.
- The [`inert`](https://developer.chrome.com/blog/new-in-chrome-102.md.txt#inert) attribute allows you to mark parts of the DOM as inert.
- The [Navigation API](https://developer.chrome.com/blog/new-in-chrome-102.md.txt#navigation-api) makes it easier for single page apps to handle navigation and updates to the URL
- And there's plenty [more](https://developer.chrome.com/blog/new-in-chrome-102.md.txt#more).
I'm [Pete LePage](https://petelepage.com). Let's dive in and
see what's new for developers in Chrome 102.
## File Handling API
The File Handling API allows installed PWAs to register with the OS as a file
handler. Once registered, a user can click on a file to open it with the
installed PWA. This is perfect for PWAs that interact with files, for example,
image editors, IDEs, text editors, and so on.
To add file handling functionality to your PWA, you'll need to update your
web app manifest, adding a `file_handlers` array with details about the types
of files your PWA can handle. You'll need to specify the URL to open, the
mime types, an icon for the file type, and the launch type. The launch type
defines whether multiple files should be opened in a single client, or in
multiple clients.
```json
"file_handlers": [
{
"action": "/open-csv",
"accept": {"text/csv": [".csv"]},
"icons": [
{
"src": "csv-icon.png",
"sizes": "256x256",
"type": "image/png"
}
],
"launch_type": "single-client"
}
]
```
Then, to access those files when the PWA is launched, you need to specify a
consumer for the `launchQueue` object. Launches are queued until they are
handled by the consumer.
```javascript
// 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);
}
});
```
Check out [Let installed web applications be file handlers](https://developer.chrome.com/docs/capabilities/web-apis/file-handling.md.txt)
for all the details.
## The `inert` property
The `inert` property is a global HTML attribute that tells the browser to
ignore user input events for an element, including focus events, and events
from assistive technologies.
This can be useful when building UIs. For example, with a modal dialog, you
want to "trap" the focus inside the modal when it's visible. Or, for a drawer
that is not always visible to the user, adding `inert` ensures that while
the drawer is offscreen, a keyboard user cannot accidentally interact with it.
```html
```
Here, `inert` has been declared on the second `
` element, so all content
contained within, including the `