{"id":1518,"date":"2024-09-01T16:30:04","date_gmt":"2024-09-01T19:30:04","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=1518"},"modified":"2025-11-24T12:41:36","modified_gmt":"2025-11-24T15:41:36","slug":"pwa-app-design","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/pwa-app-design\/","title":{"rendered":"PWA App Design"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

PWA App Design<\/strong>: O design de um Progressive Web App (PWA)<\/strong> vai al\u00e9m da est\u00e9tica; ele se concentra em otimizar a Experi\u00eancia do Usu\u00e1rio (UX)<\/strong> para que o aplicativo seja r\u00e1pido, responsivo e indistingu\u00edvel de um aplicativo nativo quando instalado. Isso \u00e9 alcan\u00e7ado atrav\u00e9s de configura\u00e7\u00f5es espec\u00edficas no HTML, no Manifest<\/em> e com CSS e JavaScript modernos.<\/p>\n\n\n\n

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

1. \ud83d\uddbc\ufe0f Configurando o Ambiente e a Janela do PWA<\/h2>\n\n\n\n

O primeiro passo \u00e9 garantir que o navegador e o sistema operacional entendam como exibir o seu PWA.<\/p>\n\n\n\n

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

A. O Viewport<\/code> e \u00c1reas Seguras (HTML)<\/h3>\n\n\n\n

A tag viewport<\/code> garante que o layout se adapte ao tamanho da tela. Adicionar viewport-fit=cover<\/code> permite que o PWA use toda a \u00e1rea da tela, incluindo as regi\u00f5es sob barras de status e notchs<\/em> em dispositivos iOS\/Android.<\/p>\n\n\n\n

HTML<\/p>\n\n\n\n

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
B. \u00cdcones, Temas e Exibi\u00e7\u00e3o (Manifest)<\/h3>\n\n\n\n
O Manifest<\/strong> (abordado no artigo anterior) \u00e9 crucial para definir a apar\u00eancia do PWA no sistema operacional.<\/p>\n\n\n\n
Propriedade<\/strong><\/td>Onde se Aplica<\/strong><\/td>Uso Principal<\/strong><\/td><\/tr><\/thead>
icons<\/code><\/strong><\/td>Tela inicial, splash screen<\/em>.<\/td>\u00cdcones em m\u00faltiplos tamanhos (ex: 192×192, 512×512).<\/td><\/tr>
theme_color<\/code><\/strong><\/td>Cor da barra de ferramentas do navegador\/sistema (em modo standalone<\/em>).<\/td>Deve ser a cor prim\u00e1ria da sua marca.<\/td><\/tr>
display<\/code><\/strong><\/td>Comportamento da janela ao iniciar.<\/td>Use standalone<\/code><\/strong> para abrir o PWA sem a barra de endere\u00e7o do navegador.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
C. Cores da Marca (CSS Custom Properties)<\/h3>\n\n\n\n
Utilizar Vari\u00e1veis CSS<\/strong> (--variavel<\/code>) centraliza a identidade visual, facilitando a manuten\u00e7\u00e3o e a futura implementa\u00e7\u00e3o de temas din\u00e2micos (como modo claro\/escuro).<\/p>\n\n\n\n
CSS<\/p>\n\n\n\n
:root {\n  --primary-color: #007bff;\n  --text-color: #333333;\n}\n\nbody {\n  background-color: #f8f9fa;\n  color: var(--text-color);\n}\n\n.header {\n  background-color: var(--primary-color);\n  color: white;\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
2. \ud83d\udcf1 Otimiza\u00e7\u00f5es CSS e JS para UX Nativa<\/h2>\n\n\n\n
Para imitar o comportamento de aplicativos nativos, voc\u00ea precisa controlar o comportamento da interface do usu\u00e1rio (UI) e os gestos padr\u00e3o do navegador.<\/p>\n\n\n\n
<\/div>\n\n\n\n
A. Estilos Condicionais com @media (display-mode)<\/code> (CSS)<\/h3>\n\n\n\n
O CSS permite aplicar estilos diferentes com base no modo em que o PWA est\u00e1 sendo exibido. Isso \u00e9 vital para ocultar ou exibir elementos espec\u00edficos, como bot\u00f5es de instala\u00e7\u00e3o ou barras de navega\u00e7\u00e3o que o PWA substitui.<\/p>\n\n\n\n
CSS<\/p>\n\n\n\n
\/* Estilos aplicados APENAS quando o PWA \u00e9 iniciado a partir do \u00edcone *\/\n@media (display-mode: standalone) {\n  \/* Oculta o bot\u00e3o 'Instalar' quando j\u00e1 estiver instalado *\/\n  .install-button {\n    display: none;\n  }\n}\n\n\/* Estilos aplicados APENAS quando o PWA \u00e9 acessado via URL (navegador) *\/\n@media (display-mode: browser) {\n  \/* Exibe uma barra de navega\u00e7\u00e3o completa ou convite para instala\u00e7\u00e3o *\/\n  .browser-prompt {\n    display: block;\n  }\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
B. Controle de Gestos do Navegador (CSS)<\/h3>\n\n\n\n
Para evitar que gestos padr\u00f5es do navegador (como o pull-to-refresh<\/code>, ou “puxar para atualizar” no Android) interfiram na UI do PWA, voc\u00ea pode usar a propriedade CSS overscroll-behavior<\/code>.<\/p>\n\n\n\n
CSS<\/p>\n\n\n\n
body {\n  \/* Desativa o comportamento padr\u00e3o de 'puxar para atualizar' em eixos X e Y *\/\n  overscroll-behavior: none;\n  \/* Alternativamente: usa 'contain' para limitar o efeito ao elemento *\/\n  overscroll-behavior-y: contain;\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
C. Modo Tela Cheia e Outras APIs (JavaScript)<\/h3>\n\n\n\n
Embora o modo standalone<\/code> do Manifest j\u00e1 ofere\u00e7a uma experi\u00eancia sem navegador, voc\u00ea pode usar APIs JavaScript para controlar o modo de exibi\u00e7\u00e3o.<\/p>\n\n\n\n
JavaScript<\/p>\n\n\n\n
\/\/ Exemplo de como solicitar a tela cheia (Fullscreen)\nfunction entrarEmTelaCheia() {\n  if (document.documentElement.requestFullscreen) {\n    document.documentElement.requestFullscreen();\n  }\n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
\u2705 Conclus\u00e3o<\/h2>\n\n\n\n
PWA App Design: O design de um PWA \u00e9 a arte de usar a flexibilidade do HTML, CSS e JavaScript para simular a previsibilidade e a velocidade de um aplicativo nativo. As configura\u00e7\u00f5es cruciais incluem o uso de viewport<\/code> para \u00e1reas seguras, o Manifest<\/strong> para a apar\u00eancia no sistema e o CSS com @media (display-mode)<\/code> e overscroll-behavior<\/code> para controlar a UX nativa<\/strong>. <\/p>\n\n\n\n
Ao focar nesses detalhes, seu PWA se torna um produto digital mais envolvente e indistingu\u00edvel de um aplicativo tradicional.<\/p>\n\n\n\n
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
\n
\n
\"HTML\"<\/a>
HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"CSS\"<\/a>
CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"Javascript\"<\/a>
JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
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
\n
\n
\"Hospedagem<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"Ofertas<\/a><\/figure>\n<\/div>\n\n\n\n
\n
\"Amazon<\/a><\/figure>\n<\/div>\n<\/div>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Tempo de leitura: <\/span>  4<\/span> minutos<\/span><\/span>PWA App Design: O design de um Progressive Web App (PWA) vai al\u00e9m da est\u00e9tica;…<\/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-1518","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pwa","wpcat-16-id"],"yoast_head":"\nPWA App Design - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"PWA App Design: Neste artigo, exploraremos os principais aspectos do design de PWAs, desde a configura\u00e7\u00e3o da janela e do \u00edcone at\u00e9 a ...\" \/>\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\/pwa-app-design\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PWA App Design - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"PWA App Design: Neste artigo, exploraremos os principais aspectos do design de PWAs, desde a configura\u00e7\u00e3o da janela e do \u00edcone at\u00e9 a ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/pwa-app-design\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-01T19:30:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-24T15:41:36+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=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-app-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-app-design\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"PWA App Design\",\"datePublished\":\"2024-09-01T19:30:04+00:00\",\"dateModified\":\"2025-11-24T15:41:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-app-design\\\/\"},\"wordCount\":536,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-app-design\\\/#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\\\/pwa-app-design\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-app-design\\\/\",\"name\":\"PWA App Design - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-app-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-app-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/Capa-Artigos.webp\",\"datePublished\":\"2024-09-01T19:30:04+00:00\",\"dateModified\":\"2025-11-24T15:41:36+00:00\",\"description\":\"PWA App Design: Neste artigo, exploraremos os principais aspectos do design de PWAs, desde a configura\u00e7\u00e3o da janela e do \u00edcone at\u00e9 a ...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-app-design\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-app-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-app-design\\\/#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\\\/pwa-app-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PWA App Design\"}]},{\"@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":"PWA App Design - BLOG THIAGO ROSSI","description":"PWA App Design: Neste artigo, exploraremos os principais aspectos do design de PWAs, desde a configura\u00e7\u00e3o da janela e do \u00edcone at\u00e9 a ...","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\/pwa-app-design\/","og_locale":"pt_BR","og_type":"article","og_title":"PWA App Design - BLOG THIAGO ROSSI","og_description":"PWA App Design: Neste artigo, exploraremos os principais aspectos do design de PWAs, desde a configura\u00e7\u00e3o da janela e do \u00edcone at\u00e9 a ...","og_url":"https:\/\/thiagorossi.com.br\/blog\/pwa-app-design\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-09-01T19:30:04+00:00","article_modified_time":"2025-11-24T15:41:36+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":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/pwa-app-design\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/pwa-app-design\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"PWA App Design","datePublished":"2024-09-01T19:30:04+00:00","dateModified":"2025-11-24T15:41:36+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/pwa-app-design\/"},"wordCount":536,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/pwa-app-design\/#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\/pwa-app-design\/","url":"https:\/\/thiagorossi.com.br\/blog\/pwa-app-design\/","name":"PWA App Design - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/pwa-app-design\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/pwa-app-design\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/Capa-Artigos.webp","datePublished":"2024-09-01T19:30:04+00:00","dateModified":"2025-11-24T15:41:36+00:00","description":"PWA App Design: Neste artigo, exploraremos os principais aspectos do design de PWAs, desde a configura\u00e7\u00e3o da janela e do \u00edcone at\u00e9 a ...","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/pwa-app-design\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/pwa-app-design\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/pwa-app-design\/#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\/pwa-app-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"PWA App Design"}]},{"@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\/1518","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=1518"}],"version-history":[{"count":3,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1518\/revisions"}],"predecessor-version":[{"id":4956,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1518\/revisions\/4956"}],"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=1518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}