API da Web para Ativação de interação do usuário com a página
Published: 2023-07-15 01:41:39

Por padrão, o navegador não permite a execução de alguns tipos de conteúdos ou ações sem que antes o usuário tenha ativado algum tipo interação com a página.

Sendo mais específico, algum tipo de interação precisa ser alguma das que listarei abaixo e com alguns requisitos, como:

## Eventos de ativação aceitos como interação
- `keydown` (exceto para a tecla Esc ou nenhuma tecla que sirva de atalho para o agente do usuário)
- `mousedown`
- `pointerdown` (apenas se a propriedade `pointerType` for `"mouse"`)
- `pointerup` (apenas se `pointerType` não for `"mouse"`)
- `touchend`

Quando algum destes eventos é acionado, o agente do usuário diferencia entre dois tipos de estados de ativação possíveis:
- Ativação **permanente**
- Ativação **transitória**

### Ativação transitória
Trata-se de um estado em que a janela indica que um usuário pressionou recentemente um botão, moveu o mouse, usou um menu ou realizou alguma outra interação. Ela expira após um tempo limite (se não for renovada por outra interação) e também pode ser consumida por algumas APIs, como a `Window.open()`.

#### Aqui está uma lista de APIs da Web que requerem ativação transitória:
- `Window.open()`
- `Window.showOpenFilePicker()`
- `Window.showSaveFilePicker()`
- `Window.showDirectoryPicker()`
- `Window.getScreenDetails()`
- `Window.queryLocalFonts()`
- `Clipboard.read()`
- `Clipboard.readText()`
- `Clipboard.writeText()`
- `Document.requestStorageAccess()`
- `Element.requestFullScreen()`
- `Element.requestPointerLock()`
- `GPUAdapter.requestAdapterInfo()`
- `HID.requesstDevice()`
- `HTMLInputElement.showPicker()`
- `HTMLVideoElement.requestPictureInPicture()`
- `IdleDetector.requestPermission()`
- `MediaDevices.selectAudioOutput()`
- `MediaStreamTrack.sendCaptureAction()`
- `MediaDevices.getViewportMedia()`
- `MediaDevices.getDisplayMedia()`
- `Navigator.share()`
- `PaymentRequest.show()`
- `PresentationRequest.start()`
- `RemotePlayback.prompt()`
- `USB.requestDevice()`
- `Keyboard.lock()`
- `XRSystem.requestSession()`

### Ativação permanente
Este estado indica que um usuário pressionou algum botão, moveu um mouse, usou um menu ou realizou algum outro tipo de interação. Ao contrário da transitória, este estado não é redefinido depois de ter sido definido inicialmente.

#### Lista de APIs da Web que requerem ativação permanente:
- `Navigator.vibrate()`
- `VirtualKeyboard.show()`
- `autoplay` em mídias (especialmente para `AudioContext`)

## API da Web `UserActivation`
Para determinar programaticamente se uma página tem ativação permanente ou transitória do usuário, a API *UserActivation* fornece duas propriedades que estão disponíveis para consumo usando `navigator.userActivation`:
- `UserActivation.hasBeenActive` (indica se a página tem ativação **permanente**)
- `UserActivation.isActive` (indica se a página tem ativação **transitória**)

Desta forma podemos usar as APIs da Web listadas acima apenas quando uma das respectivas propriedades acima requeridas for verdadeira.

Usando algum dos eventos de interação apresentados no início do artigo, podemos verificar alguma das duas propriedades acima como validação e só então, caso haja interação, o uso da API desejada pode ser utilizada sem nenhum problema.

Assim temos um software mais estável e o mais importante, que respeita seu usuário!

Obrigado a você que leu até aqui e aproveite para deixar um comentário dizendo o que achou do conteúdo.

Abraços!