{"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":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Detectando uso do PWA:<\/strong> Para que um <strong>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 <strong>navegador<\/strong> ou <strong>instalado (<em>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 style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">1. \ud83d\udd0d Detectando o Modo de Exibi\u00e7\u00e3o<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A detec\u00e7\u00e3o \u00e9 feita principalmente atrav\u00e9s de consultas de m\u00eddia (Media Queries) e propriedades espec\u00edficas do objeto <code>navigator<\/code>.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">A. Consulta de M\u00eddia (<code>matchMedia<\/code>)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">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 <code>display<\/code> definido no seu <strong>Web App Manifest<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Consulta de M\u00eddia<\/strong><\/td><td><strong>Retorno true em&#8230;<\/strong><\/td><\/tr><\/thead><tbody><tr><td><code>(display-mode: standalone)<\/code><\/td><td>Modo de aplicativo instalado (sem barra de endere\u00e7o do navegador).<\/td><\/tr><tr><td><code>(display-mode: fullscreen)<\/code><\/td><td>Modo de tela cheia imersiva (sem barras do sistema, se aplic\u00e1vel).<\/td><\/tr><tr><td><code>(display-mode: minimal-ui)<\/code><\/td><td>Experi\u00eancia de aplicativo com controles m\u00ednimos de navega\u00e7\u00e3o do navegador.<\/td><\/tr><tr><td><code>(display-mode: browser)<\/code><\/td><td>O PWA est\u00e1 sendo executado em uma aba de navegador normal.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">JavaScript<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>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 style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">B. Propriedade <code>navigator.standalone<\/code> (Espec\u00edfico para iOS)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Em dispositivos iOS\/iPadOS, o Safari usa a propriedade n\u00e3o-padr\u00e3o <code>navigator.standalone<\/code> para indicar que a PWA foi aberta a partir do \u00edcone da tela inicial.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">JavaScript<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if ('standalone' in navigator &amp;&amp; navigator.standalone) {\n  console.log('Modo: Standalone (Instalado em iOS)');\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Combina\u00e7\u00e3o de Detec\u00e7\u00e3o<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Para uma cobertura ampla, combine ambas as verifica\u00e7\u00f5es:<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">JavaScript<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const isStandalone = window.matchMedia('(display-mode: standalone)').matches || \n                     ('standalone' in navigator &amp;&amp; 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 style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">2. \ud83e\udd1d Instala\u00e7\u00e3o e Transfer\u00eancia de Sess\u00e3o<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Quando um usu\u00e1rio instala um PWA enquanto navega em uma aba, ele espera que o aplicativo instalado (o modo <em>standalone<\/em>) mantenha o estado de login e navega\u00e7\u00e3o.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">A. Armazenamento Persistente<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Para garantir uma transi\u00e7\u00e3o suave, voc\u00ea deve usar APIs de armazenamento que <strong>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<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>LocalStorage \/ SessionStorage:<\/strong> Armazenar tokens de autentica\u00e7\u00e3o ou estados simples.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>IndexedDB:<\/strong> Armazenar dados estruturados de sess\u00e3o e conte\u00fado <em>offline<\/em>.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">B. Transfer\u00eancia Imediata Ap\u00f3s a Instala\u00e7\u00e3o (Chrome\/Android)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Quando o usu\u00e1rio aceita o <em>prompt<\/em> de instala\u00e7\u00e3o, o navegador dispara o evento <strong><code>appinstalled<\/code><\/strong>. Voc\u00ea pode usar esse evento para:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Redirecionar:<\/strong> Se o usu\u00e1rio estiver em um fluxo de checkout, voc\u00ea pode redirecion\u00e1-lo para a tela inicial do PWA (o <code>start_url<\/code> do Manifest) assim que o aplicativo for instalado.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong>Limpeza:<\/strong> Limpar <em>cookies<\/em> tempor\u00e1rios ou prompts de &#8220;Instalar&#8221;.<\/li>\n<\/ol>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">JavaScript<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>window.addEventListener('appinstalled', () =&gt; {\n  console.log('PWA instalado. Redirecionando para a home do app...');\n  \/\/ Oculta o prompt de instala\u00e7\u00e3o\n  deferredPrompt = null; \n  \/\/ Opcional: Redirecionar para o start_url\n  \/\/ window.location.href = '\/'; \n});\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">3. \u26a0\ufe0f Isolamento de Armazenamento no iOS\/iPadOS<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O ecossistema da Apple trata o PWA instalado como um aplicativo separado do Safari, resultando em um <strong>isolamento de armazenamento<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Implica\u00e7\u00e3o:<\/strong> Dados armazenados no <strong>Safari<\/strong> (o navegador) n\u00e3o s\u00e3o acess\u00edveis quando a PWA \u00e9 aberta em modo <strong>Standalone<\/strong> (o aplicativo instalado).<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Solu\u00e7\u00e3o<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">A melhor pr\u00e1tica \u00e9 garantir que o usu\u00e1rio fa\u00e7a login novamente (se necess\u00e1rio) ou, de forma mais robusta, <strong>sincronizar dados importantes com o servidor<\/strong> ap\u00f3s a instala\u00e7\u00e3o.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong>Token na URL:<\/strong> Uma t\u00e9cnica avan\u00e7ada \u00e9 transferir um token de sess\u00e3o de uso \u00fanico via URL (se for seguro faz\u00ea-lo) e us\u00e1-lo no modo <em>standalone<\/em> para buscar o token permanente do usu\u00e1rio no servidor.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">4. \ud83d\udd17 Outras Detec\u00e7\u00f5es e Integra\u00e7\u00f5es<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">A. Detectando a Primeira Visita<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Utilizar o <code>localStorage<\/code> \u00e9 a maneira mais simples de determinar se o usu\u00e1rio j\u00e1 esteve no PWA:<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">JavaScript<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (localStorage.getItem('user_id')) {\n  \/\/ Usu\u00e1rio retornado.\n  \/\/ Pode-se iniciar o processo de carregamento de dados sincronizados.\n} else {\n  \/\/ Primeiro acesso ou novo usu\u00e1rio.\n  localStorage.setItem('user_id', generateUniqueId()); \n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">B. Aplicativos Relacionados (<code>related_applications<\/code>)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Este campo no <strong>Manifest<\/strong> \u00e9 usado para informar ao navegador sobre a exist\u00eancia de vers\u00f5es nativas. Se o PWA n\u00e3o oferecer uma experi\u00eancia ideal, o navegador pode sugerir a instala\u00e7\u00e3o do aplicativo nativo (ex: o aplicativo da Play Store) em vez da PWA.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">JSON<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"related_applications\": &#91;{\n    \"platform\": \"play\",\n    \"url\": \"https:\/\/play.google.com\/store\/apps\/details?id=com.meuapp.nativo\",\n    \"id\": \"com.meuapp.nativo\"\n}]\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-large-font-size\">\u2705 Conclus\u00e3o Detectando uso do PWA<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>Detectando uso do PWA<\/strong>: A detec\u00e7\u00e3o do modo de exibi\u00e7\u00e3o, atrav\u00e9s de <strong><code>matchMedia('(display-mode: standalone)')<\/code><\/strong> e <strong><code>navigator.standalone<\/code><\/strong>, \u00e9 fundamental para personalizar a interface e otimizar a usabilidade do PWA. Para garantir uma experi\u00eancia coesa, \u00e9 crucial <strong>preservar a sess\u00e3o<\/strong> (usando IndexedDB ou LocalStorage) e estar atento ao <strong>isolamento de armazenamento no iOS<\/strong>, garantindo que a transi\u00e7\u00e3o do navegador para o aplicativo instalado seja transparente e sem perdas de dados para o usu\u00e1rio.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Toda jornada tem um in\u00edcio, e o in\u00edcio para se tornar um desenvolvedor web \u00e9 dominar as seguintes tecnologias, que voc\u00ea encontra aqui mesmo:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/html\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp\" alt=\"HTML\" class=\"wp-image-600\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/html-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/css\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" alt=\"CSS\" class=\"wp-image-702\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"\/category\/javascript\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"426\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp\" alt=\"Javascript\" class=\"wp-image-804\" srcset=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript.webp 758w, https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/javascript-300x169.webp 300w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/a><figcaption class=\"wp-element-caption\">JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">E se voc\u00ea gosta do nosso conte\u00fado, n\u00e3o deixe de contribuir adquirindo os servi\u00e7os e produtos dos nossos apoiadores e empresas que somos associados:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/hostinger.com.br\/?REFERRALCODE=1THIAGO62\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/03\/hostinger.png\" alt=\"Hospedagem Hostinger\" class=\"wp-image-92\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNDYlc\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/ofertas-amazon.webp\" alt=\"Ofertas Amazon\" class=\"wp-image-1308\"\/><\/a><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/amzn.to\/3SNKmt0\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"250\" src=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/amazonprime.webp\" alt=\"Amazon Prime\" class=\"wp-image-1307\"\/><\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Tempo de leitura: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutos<\/span><\/span>Detectando uso do PWA: Para que um Progressive Web App (PWA) ofere\u00e7a uma experi\u00eancia verdadeiramente&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1497,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-1565","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pwa","wpcat-16-id"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Detectando uso do PWA - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Detectando uso do PWA: Neste artigo, exploraremos as t\u00e9cnicas para detectar o modo de exibi\u00e7\u00e3o de uma PWA, a transfer\u00eancia de sess\u00e3o entre...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Detectando uso do PWA - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Detectando uso do PWA: Neste artigo, exploraremos as t\u00e9cnicas para detectar o modo de exibi\u00e7\u00e3o de uma PWA, a transfer\u00eancia de sess\u00e3o entre...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-04T18:19:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-27T14:51:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/Capa-Artigos.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"758\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Thiago Rossi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thiago Rossi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/detectando-uso-do-pwa\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/detectando-uso-do-pwa\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"Detectando uso do PWA\",\"datePublished\":\"2024-10-04T18:19:30+00:00\",\"dateModified\":\"2025-11-27T14:51:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/detectando-uso-do-pwa\\\/\"},\"wordCount\":732,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/detectando-uso-do-pwa\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/Capa-Artigos.webp\",\"articleSection\":[\"PWA\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/detectando-uso-do-pwa\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/detectando-uso-do-pwa\\\/\",\"name\":\"Detectando uso do PWA - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/detectando-uso-do-pwa\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/detectando-uso-do-pwa\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/Capa-Artigos.webp\",\"datePublished\":\"2024-10-04T18:19:30+00:00\",\"dateModified\":\"2025-11-27T14:51:23+00:00\",\"description\":\"Detectando uso do PWA: Neste artigo, exploraremos as t\u00e9cnicas para detectar o modo de exibi\u00e7\u00e3o de uma PWA, a transfer\u00eancia de sess\u00e3o entre...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/detectando-uso-do-pwa\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/detectando-uso-do-pwa\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/detectando-uso-do-pwa\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/Capa-Artigos.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/Capa-Artigos.webp\",\"width\":758,\"height\":426,\"caption\":\"PWA\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/detectando-uso-do-pwa\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Detectando uso do PWA\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"name\":\"THIAGO ROSSI\",\"description\":\"Mais de 20 anos de experi\u00eancia no mercado de TI!\",\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"alternateName\":\"TR | CURSO WEB DEV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\",\"name\":\"THIAGO ROSSI\",\"alternateName\":\"TR | CURSO WEB DEV\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"width\":300,\"height\":300,\"caption\":\"THIAGO ROSSI\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\",\"name\":\"Thiago Rossi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"caption\":\"Thiago Rossi\"},\"description\":\"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \\\"GDD \u2013 O Guia Definitivo\\\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.\",\"sameAs\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\",\"https:\\\/\\\/instagram.com\\\/thiagorossix86\",\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"],\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/author\\\/thiagorossi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Detectando uso do PWA - BLOG THIAGO ROSSI","description":"Detectando uso do PWA: Neste artigo, exploraremos as t\u00e9cnicas para detectar o modo de exibi\u00e7\u00e3o de uma PWA, a transfer\u00eancia de sess\u00e3o entre...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/","og_locale":"pt_BR","og_type":"article","og_title":"Detectando uso do PWA - BLOG THIAGO ROSSI","og_description":"Detectando uso do PWA: Neste artigo, exploraremos as t\u00e9cnicas para detectar o modo de exibi\u00e7\u00e3o de uma PWA, a transfer\u00eancia de sess\u00e3o entre...","og_url":"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-10-04T18:19:30+00:00","article_modified_time":"2025-11-27T14:51:23+00:00","og_image":[{"width":758,"height":426,"url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/Capa-Artigos.webp","type":"image\/webp"}],"author":"Thiago Rossi","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Thiago Rossi","Est. tempo de leitura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"Detectando uso do PWA","datePublished":"2024-10-04T18:19:30+00:00","dateModified":"2025-11-27T14:51:23+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/"},"wordCount":732,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/Capa-Artigos.webp","articleSection":["PWA"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/","url":"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/","name":"Detectando uso do PWA - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/Capa-Artigos.webp","datePublished":"2024-10-04T18:19:30+00:00","dateModified":"2025-11-27T14:51:23+00:00","description":"Detectando uso do PWA: Neste artigo, exploraremos as t\u00e9cnicas para detectar o modo de exibi\u00e7\u00e3o de uma PWA, a transfer\u00eancia de sess\u00e3o entre...","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/#primaryimage","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/Capa-Artigos.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/Capa-Artigos.webp","width":758,"height":426,"caption":"PWA"},{"@type":"BreadcrumbList","@id":"https:\/\/thiagorossi.com.br\/blog\/detectando-uso-do-pwa\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Detectando uso do PWA"}]},{"@type":"WebSite","@id":"https:\/\/thiagorossi.com.br\/blog\/#website","url":"https:\/\/thiagorossi.com.br\/blog\/","name":"THIAGO ROSSI","description":"Mais de 20 anos de experi\u00eancia no mercado de TI!","publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"alternateName":"TR | CURSO WEB DEV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagorossi.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/thiagorossi.com.br\/blog\/#organization","name":"THIAGO ROSSI","alternateName":"TR | CURSO WEB DEV","url":"https:\/\/thiagorossi.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","width":300,"height":300,"caption":"THIAGO ROSSI"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/linkedin.com\/in\/thiagox86"]},{"@type":"Person","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87","name":"Thiago Rossi","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","caption":"Thiago Rossi"},"description":"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \"GDD \u2013 O Guia Definitivo\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.","sameAs":["https:\/\/thiagorossi.com.br\/blog","https:\/\/instagram.com\/thiagorossix86","https:\/\/linkedin.com\/in\/thiagox86"],"url":"https:\/\/thiagorossi.com.br\/blog\/author\/thiagorossi\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1565"}],"version-history":[{"count":2,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1565\/revisions"}],"predecessor-version":[{"id":5005,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1565\/revisions\/5005"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media\/1497"}],"wp:attachment":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1565"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1565"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}