API da Web para Ativação de interação do usuário com a página

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!