Gerenciamento de Janelas

PWA
Tempo de leitura: 3 minutos

Gerenciamento de Janelas: Os PWAs oferecem uma experiência cada vez mais próxima de aplicativos nativos, e o gerenciamento de janelas é um aspecto crucial para garantir essa experiência. Ao controlar a aparência e o comportamento das janelas, os PWAs podem oferecer uma interface mais personalizada e intuitiva para os usuários.

Neste artigo, exploraremos as diversas formas de manipular janelas em PWAs, desde mover e redimensionar até acessar detalhes da tela e implementar o wake lock.

A Janela do PWA

A janela de uma PWA é o contêiner visual que exibe o conteúdo da aplicação. Para interagir com a janela, utilizamos o objeto window.

JavaScript

console.log(window.innerWidth); // Largura da janela
console.log(window.innerHeight); // Altura da janela

Como Mover e Redimensionar a Janela

Embora a capacidade de mover e redimensionar janelas de forma arbitrária não seja totalmente suportada em todas as PWAs, existem algumas abordagens e bibliotecas que podem auxiliar nessa tarefa:

  • APIs do Sistema Operacional: Para plataformas como Windows e macOS, é possível utilizar APIs específicas do sistema operacional para manipular janelas, mas essa abordagem requer código nativo ou bibliotecas que façam a ponte entre JavaScript e o sistema operacional.
  • Bibliotecas de terceiros: Existem bibliotecas como Electron que permitem criar aplicativos desktop com base em tecnologias web, oferecendo um alto grau de controle sobre a janela.
  • Frameworks CSS: Frameworks CSS como Bootstrap e Materialize oferecem componentes que permitem simular o comportamento de janelas redimensionáveis e arrastáveis, porém com limitações em termos de integração com o sistema operacional.

Navegando para Outros Sites

Para navegar para outros sites, utilizamos o método window.location.href.

JavaScript

window.location.href = 'https://www.example.com';

Como Abrir Novas Janelas

Para abrir novas janelas, utilizamos o método window.open().

JavaScript

window.open('https://www.example.com', '_blank'); // Abre em uma nova aba

Título da Janela

O título da janela pode ser definido através da propriedade document.title.

JavaScript

document.title = 'Meu PWA';

Modo com Guias

Embora o suporte nativo ao modo com guias em PWAs ainda esteja em desenvolvimento, é possível simular essa funcionalidade utilizando frameworks CSS como o MaterializeCSS. Ao criar componentes personalizados que se assemelham a abas, podemos oferecer uma experiência de usuário similar à de um navegador com múltiplas guias, mesmo sem depender de recursos nativos.

O MaterializeCSS, por exemplo, fornece classes e componentes pré-definidos que facilitam a criação de interfaces com abas. Através da combinação de elementos como nav, div e das classes específicas do framework, é possível construir um componente de abas customizado. Ao clicar em uma aba, o conteúdo correspondente é exibido, simulando a navegação entre diferentes páginas dentro da mesma janela da PWA.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<ul class="tabs">
  <li class="tab col s3"><a class="active" href="#test1">Test 1</a></li>
  <li class="tab col s3"><a href="#test2">Test 2</a></li>
  <li class="tab col s3"><a href="#test3">Test 3</a></li>   
</ul>

<div id="test1" class="col s12">Test 1 content</div>
<div id="test2" class="col s12">Test 2 content</div>
<div id="test3" class="col s12">Test 3 content</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Além do MaterializeCSS, existem outros frameworks CSS e bibliotecas JavaScript que podem ser utilizados para criar componentes de abas personalizados, como Bootstrap, Foundation e React. A escolha do framework dependerá das suas necessidades e preferências.

Acessando Detalhes da Tela

Para acessar informações sobre a tela do dispositivo, como resolução e densidade de pixels, utilizamos as propriedades screen.width, screen.height, window.devicePixelRatio, entre outras.

JavaScript

console.log(screen.width); // Largura da tela
console.log(window.devicePixelRatio); // Densidade de pixels

Wake Lock de Tela

O wake lock impede que a tela do dispositivo se apague enquanto a PWA está em uso. Essa funcionalidade é útil para aplicativos que exigem interação contínua do usuário.

JavaScript

navigator.wakeLock.request('screen')
  .then(releaseLock => {
    // ...
    releaseLock.release();
  })
  .catch(err => console.error(err));

Conclusão

O gerenciamento de janelas em PWAs é um campo em constante evolução, com novas APIs e funcionalidades sendo adicionadas a cada atualização dos navegadores. Ao dominar as técnicas apresentadas neste artigo, você poderá criar PWAs mais personalizadas e imersivas, oferecendo aos usuários uma experiência semelhante à de aplicativos nativos.

Se você está buscando uma maneira de melhorar o desempenho e o engajamento do seu site, considere transformar seu site em um PWA. Com as ferramentas e frameworks disponíveis atualmente, criar um PWA é mais fácil do que nunca.

Para criar PWAs mais complexos e personalizados, é recomendado aprofundar seus conhecimentos em nossos artigos completos em HTMLCSSJavaScript e as tecnologias relacionadas a PWAs.

E para você validar seus códigos, para que o back-end do seu PWA funcione sem problemas, você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger, a hospedagem com potência de verdade!!!

Author: Thiago Rossi