Posted in PWA

Detectando uso do PWA

   04/10/2024
PWA
Tempo de leitura: 3 minutos

Detectando uso do PWA: Os Progressive Web Apps (PWAs) oferecem uma experiência de usuário cada vez mais rica e similar a aplicativos nativos. No entanto, para garantir uma experiência perfeita, é fundamental que o PWA seja capaz de detectar o modo de exibição em que está sendo utilizada, seja no navegador, como um aplicativo instalado ou em diferentes sistemas operacionais.

Neste artigo, exploraremos as técnicas para detectar o modo de exibição de uma PWA, a transferência de sessão entre diferentes contextos e as particularidades de cada plataforma.

Detectando o Modo de Exibição

Para personalizar a experiência do usuário, é crucial saber se a PWA está sendo executada em modo de navegador ou como um aplicativo instalado. O JavaScript nos oferece algumas ferramentas para essa detecção:

  • navigator.standalone: Essa propriedade retorna true se a PWA está sendo executada em modo de tela cheia (standalone) em dispositivos iOS.
  • matchMedia('(display-mode: standalone)'): Essa consulta de mídia retorna true se a PWA está sendo executada em modo de tela cheia em dispositivos Android e outros navegadores que suportam essa funcionalidade.
  • window.matchMedia('(display-mode: browser)'): Retorna true se a PWA está sendo executada em um navegador.

JavaScript

if (window.matchMedia('(display-mode: standalone)').matches) {
  console.log('A PWA está em modo standalone');
} else if (navigator.standalone) {
  console.log('A PWA está em modo standalone em iOS');
} else {
  console.log('A PWA está sendo executada em um navegador');
}

Instalação do App e Transferência de Sessão

Ao instalar uma PWA, o usuário espera que a sessão seja preservada, ou seja, que os dados e o estado da aplicação sejam mantidos após a instalação. Para garantir essa transição suave, é necessário:

  • Armazenamento persistente: Utilize o IndexedDB ou o localStorage para armazenar dados que precisam ser persistidos entre sessões.
  • Sincronização: Implemente um mecanismo de sincronização entre o navegador e o aplicativo instalado para garantir que os dados estejam sempre atualizados.
  • Identificação única: Utilize um identificador único para cada usuário, permitindo rastrear a sessão em diferentes contextos.

JavaScript

// Salvando dados no IndexedDB
const request = indexedDB.open('myDatabase');
request.onsuccess = (event) => {
  const db = event.target.result;
  // ... realizar operações no banco de dados
};

Transferência Após a Instalação

Após a instalação, a PWA pode ser aberta diretamente da tela inicial, o que requer um tratamento especial para garantir que a aplicação seja carregada no estado correto.

  • Verificar o estado de instalação: Utilize as técnicas de detecção mencionadas anteriormente para verificar se a aplicação está sendo executada como um aplicativo instalado.
  • Carregar a página inicial correta: Redirecionar o usuário para a página inicial adequada, dependendo do modo de exibição.
  • Restaurar o estado da sessão: Carregar os dados armazenados localmente para restaurar o estado da sessão anterior.

JavaScript

window.addEventListener('load', () => {
  if (window.matchMedia('(display-mode: standalone)').matches) {
    // Carregar a página inicial do aplicativo
    window.location.href = '/home';
  } else {
    // Carregar a página inicial do navegador
    window.location.href = '/';
  }
});

Como Detectar a Transferência

Para detectar se o usuário está acessando a PWA pela primeira vez ou se já a instalou anteriormente, você pode utilizar:

  • Cookies: Armazenar um cookie para indicar que o usuário já visitou a aplicação.
  • Local Storage: Armazenar um valor no localStorage para identificar usuários retornados.
  • IndexedDB: Utilizar o IndexedDB para armazenar informações mais complexas sobre o usuário.

JavaScript

if (localStorage.getItem('firstVisit')) {
  console.log('Usuário já visitou a PWA');
} else {
  console.log('Primeira visita do usuário');
  localStorage.setItem('firstVisit', true);
}

Isolamento de Armazenamento no iOS e iPadOS

O iOS e o iPadOS possuem um isolamento de armazenamento mais rigoroso, o que significa que os dados armazenados em um aplicativo não são acessíveis por outro aplicativo, mesmo que ambos sejam a mesma PWA. Para contornar essa limitação, você pode utilizar:

  • Web APIs: Utilizar APIs como o Web Share Target para compartilhar dados entre a PWA e outros aplicativos.
  • Serviços em nuvem: Armazenar os dados em um serviço em nuvem e sincronizá-los entre os diferentes contextos.

Aplicativos Relacionados

O campo related_applications no manifesto da PWA permite especificar aplicativos relacionados, como versões nativas da sua aplicação. Isso pode ser útil para:

  • Atualizações: Direcionar o usuário para a versão nativa da aplicação, caso haja uma atualização disponível.
  • Funcionalidades adicionais: Oferecer funcionalidades adicionais que só estão disponíveis na versão nativa.

JSON

// manifest.json
{
  "related_applications": [{
    "platform": "ios",
    "url": "https://apps.apple.com/app/id123456789"
  }]
}

Conclusão

Detectando uso do PWA: Detectar o modo de exibição de uma PWA e garantir uma transição suave entre diferentes contextos são aspectos cruciais para oferecer uma experiência de usuário consistente e satisfatória. Ao implementar as técnicas descritas neste artigo, você poderá criar PWAs mais robustas e personalizadas, que se adaptam às necessidades dos seus usuários.

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 HTML, CSS, JavaScript 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