{"id":1565,"date":"2024-10-04T15:19:30","date_gmt":"2024-10-04T18:19:30","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=1565"},"modified":"2025-11-27T11:51:23","modified_gmt":"2025-11-27T14:51:23","slug":"detectando-uso-do-pwa","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/","title":{"rendered":"Detectando uso do PWA"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Detectando uso do PWA:<\/strong> Para que um Progressive Web App (PWA)<\/strong> ofere\u00e7a uma experi\u00eancia verdadeiramente nativa, ele precisa saber em que contexto est\u00e1 sendo executado. Detectar se o PWA est\u00e1 em modo de navegador<\/strong> ou instalado (standalone<\/em>)<\/strong> permite personalizar a interface, remover elementos redundantes e garantir uma transfer\u00eancia de sess\u00e3o suave ap\u00f3s a instala\u00e7\u00e3o.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. \ud83d\udd0d Detectando o Modo de Exibi\u00e7\u00e3o<\/h2>\n\n\n\n

A detec\u00e7\u00e3o \u00e9 feita principalmente atrav\u00e9s de consultas de m\u00eddia (Media Queries) e propriedades espec\u00edficas do objeto navigator<\/code>.<\/p>\n\n\n\n

<\/div>\n\n\n\n

A. Consulta de M\u00eddia (matchMedia<\/code>)<\/h3>\n\n\n\n

Este \u00e9 o m\u00e9todo mais moderno e recomendado, suportado por navegadores baseados em Chromium (Android, Desktop) e Safari (iOS\/iPadOS). Ele verifica o valor do campo display<\/code> definido no seu Web App Manifest<\/strong>.<\/p>\n\n\n\n

Consulta de M\u00eddia<\/strong><\/td>Retorno true em…<\/strong><\/td><\/tr><\/thead>
(display-mode: standalone)<\/code><\/td>Modo de aplicativo instalado (sem barra de endere\u00e7o do navegador).<\/td><\/tr>
(display-mode: fullscreen)<\/code><\/td>Modo de tela cheia imersiva (sem barras do sistema, se aplic\u00e1vel).<\/td><\/tr>
(display-mode: minimal-ui)<\/code><\/td>Experi\u00eancia de aplicativo com controles m\u00ednimos de navega\u00e7\u00e3o do navegador.<\/td><\/tr>
(display-mode: browser)<\/code><\/td>O PWA est\u00e1 sendo executado em uma aba de navegador normal.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

JavaScript<\/p>\n\n\n\n

if (window.matchMedia('(display-mode: standalone)').matches) {\n  \/\/ A PWA est\u00e1 instalada. \n  \/\/ Ocultar o bot\u00e3o \"Instalar\" ou a barra de navega\u00e7\u00e3o duplicada.\n  console.log('Modo: Standalone (Instalado)');\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
B. Propriedade navigator.standalone<\/code> (Espec\u00edfico para iOS)<\/h3>\n\n\n\n
Em dispositivos iOS\/iPadOS, o Safari usa a propriedade n\u00e3o-padr\u00e3o navigator.standalone<\/code> para indicar que a PWA foi aberta a partir do \u00edcone da tela inicial.<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
if ('standalone' in navigator && navigator.standalone) {\n  console.log('Modo: Standalone (Instalado em iOS)');\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Combina\u00e7\u00e3o de Detec\u00e7\u00e3o<\/h3>\n\n\n\n
Para uma cobertura ampla, combine ambas as verifica\u00e7\u00f5es:<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
const isStandalone = window.matchMedia('(display-mode: standalone)').matches || \n                     ('standalone' in navigator && navigator.standalone);\n\nif (isStandalone) {\n  \/\/ Personaliza\u00e7\u00e3o para modo de aplicativo\n} else {\n  \/\/ Personaliza\u00e7\u00e3o para modo de navegador\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
2. \ud83e\udd1d Instala\u00e7\u00e3o e Transfer\u00eancia de Sess\u00e3o<\/h2>\n\n\n\n
Quando um usu\u00e1rio instala um PWA enquanto navega em uma aba, ele espera que o aplicativo instalado (o modo standalone<\/em>) mantenha o estado de login e navega\u00e7\u00e3o.<\/p>\n\n\n\n
<\/div>\n\n\n\n
A. Armazenamento Persistente<\/h3>\n\n\n\n
Para garantir uma transi\u00e7\u00e3o suave, voc\u00ea deve usar APIs de armazenamento que n\u00e3o s\u00e3o isoladas<\/strong> entre o modo de navegador e o modo instalado (exceto no iOS, conforme abaixo).<\/p>\n\n\n\n