VocĆŖ jĆ” utilizou um aplicativo de receitas, GPS ou um jogo no navegador e ficou frustrado porque a tela desligou bem no momento crucial? Para resolver isso, existe a Screen Wake Lock API.

O que Ʃ a Screen Wake Lock API? Link para o cabeƧalho

Ɖ uma interface do navegador que permite solicitar que o dispositivo nĆ£o escureƧa ou bloqueie a tela. Diferente de hacks antigos que rodavam vĆ­deos invisĆ­veis, esta Ć© uma soluĆ§Ć£o nativa, eficiente em termos de consumo de bateria e suportada pelos navegadores modernos (Chrome, Edge, Opera e Safari recente).

Regras de Ouro Link para o cabeƧalho

  1. Contexto Seguro: SĆ³ funciona em https:// ou localhost.

  2. Gesto do UsuĆ”rio: O bloqueio sĆ³ pode ser ativado apĆ³s um clique ou toque do usuĆ”rio.

  3. Visibilidade: O bloqueio Ʃ liberado automaticamente se o usuƔrio minimizar a aba.

Exemplo PrĆ”tico: ā€œProjeto Angular Sempre Ativoā€ Link para o cabeƧalho

Para este exemplo, vamos modificar o componente inicial de um projeto Angular recƩm-criado.

1. O ServiƧo de Controle (wake-lock.service.ts) Link para o cabeƧalho

Este serviƧo encapsula a complexidade da API e expƵe o estado atual.

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class WakeLockService {
  private sentinel: any = null;
  public isEnabled = false;

  async toggle() {
    if (this.isEnabled) {
      await this.release();
    } else {
      await this.request();
    }
  }

  private async request() {
    try {
      if ('wakeLock' in navigator) {
        this.sentinel = await (navigator as any).wakeLock.request('screen');
        this.isEnabled = true;
        
        this.sentinel.onrelease = () => {
          this.isEnabled = false;
        };
      }
    } catch (err) {
      console.error('Falha ao ativar Wake Lock:', err);
    }
  }

  private async release() {
    if (this.sentinel) {
      await this.sentinel.release();
      this.sentinel = null;
    }
  }
}

2. Integrando no Template PadrĆ£o (app.component.html) Link para o cabeƧalho

Vamos substituir parte do conteĆŗdo padrĆ£o do Angular por um painel de controle simples.

<div class="content" role="main">
  <h1>Status da AplicaĆ§Ć£o</h1>
  
  <div class="card" (click)="wakeLock.toggle()" [class.active]="wakeLock.isEnabled">
    <div class="status-icon">
      {{ wakeLock.isEnabled ? 'ā˜€ļø' : 'šŸŒ™' }}
    </div>
    <h2>{{ wakeLock.isEnabled ? 'Modo Sempre Ativo' : 'Modo EconƓmico' }}</h2>
    <p>Clique para alternar o bloqueio de tela</p>
  </div>
</div>

<style>
  .card {
    border: 2px solid #ddd;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 12px;
  }
  .card.active {
    border-color: #ffca28;
    background-color: #fff9c4;
    box-shadow: 0 4px 15px rgba(255, 202, 40, 0.4);
  }
  .status-icon {
    font-size: 3rem;
  }
</style>

3. O Componente (app.component.ts) Link para o cabeƧalho 

import { Component } from '@angular/core';
import { WakeLockService } from './wake-lock.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public wakeLock: WakeLockService) {}
}

Por que usar no seu projeto? Link para o cabeƧalho

Implementar a Screen Wake Lock API transforma uma pĆ”gina web em uma ferramenta confiĆ”vel. No contexto de jogos, isso garante que o jogador nĆ£o perca o progresso em momentos de inatividade (como esperar uma rodada ou ler diĆ”logos longos).

ConclusĆ£o Link para o cabeƧalho

A implementaĆ§Ć£o Ć© simples, mas o impacto na experiĆŖncia do usuĆ”rio Ć© gigante. Lembre-se sempre de oferecer uma opĆ§Ć£o para desativar o recurso, respeitando a autonomia do usuĆ”rio sobre a bateria do prĆ³prio dispositivo.