{"id":1509,"date":"2024-08-25T12:16:54","date_gmt":"2024-08-25T15:16:54","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=1509"},"modified":"2025-11-17T13:41:24","modified_gmt":"2025-11-17T16:41:24","slug":"pwa-primeiros-passos","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/pwa-primeiros-passos\/","title":{"rendered":"PWA: Primeiros Passos"},"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>PWA: Primeiros Passos<\/strong>: A transi\u00e7\u00e3o de um website tradicional para um <strong>Progressive Web App (PWA)<\/strong> exige foco em tr\u00eas pilares t\u00e9cnicos: <strong>Seguran\u00e7a<\/strong>, <strong>Instalabilidade<\/strong> e <strong>Confiabilidade<\/strong>. Ao contr\u00e1rio dos aplicativos nativos, voc\u00ea n\u00e3o precisa reescrever seu c\u00f3digo; voc\u00ea apenas precisa adicionar recursos modernos.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Este artigo detalha os passos pr\u00e1ticos e os requisitos t\u00e9cnicos m\u00ednimos para come\u00e7ar a construir seu primeiro PWA.<\/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\udccb Requisitos Fundamentais (A Checklist Inicial)<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Antes de qualquer c\u00f3digo de PWA, seu site deve atender a tr\u00eas crit\u00e9rios b\u00e1sicos:<\/p>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Requisito<\/strong><\/td><td><strong>Prop\u00f3sito<\/strong><\/td><td><strong>Como Verificar<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>HTTPS<\/strong><\/td><td><strong>Seguran\u00e7a e Confiabilidade.<\/strong> Obrigat\u00f3rio para registrar o <em>Service Worker<\/em> e proteger dados.<\/td><td>Verifique se a URL usa <code>https:\/\/<\/code>.<\/td><\/tr><tr><td><strong>Responsividade<\/strong><\/td><td><strong>Acessibilidade.<\/strong> A UI deve se adaptar a qualquer dispositivo (celular, tablet, desktop).<\/td><td>Teste em diferentes tamanhos de tela.<\/td><\/tr><tr><td><strong>Carregamento R\u00e1pido<\/strong><\/td><td><strong>UX (Experi\u00eancia do Usu\u00e1rio).<\/strong> Atingir pontua\u00e7\u00f5es altas em m\u00e9tricas como <strong>Core Web Vitals<\/strong>.<\/td><td>Use ferramentas como Lighthouse ou PageSpeed Insights.<\/td><\/tr><\/tbody><\/table><\/figure>\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\udde9 Os Tr\u00eas Componentes Essenciais do PWA<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">Os primeiros passos concretos no c\u00f3digo envolvem a implementa\u00e7\u00e3o desses tr\u00eas arquivos\/configura\u00e7\u00f5es.<\/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\">Passo 1: O Web App Manifest (Tornando-o Instal\u00e1vel)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O <strong>Manifest<\/strong> \u00e9 um arquivo JSON (<code>manifest.json<\/code>) que fica na raiz do seu projeto e informa ao navegador como o PWA deve se comportar quando instalado. Ele \u00e9 linkado na tag <code>&lt;head&gt;<\/code> do seu HTML.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"Meu PWA Incr\u00edvel\",\n  \"short_name\": \"PWA Incr\u00edvel\",\n  \"description\": \"Um Progressive Web App de demonstra\u00e7\u00e3o.\",\n  \"start_url\": \"\/index.html\",\n  \"display\": \"standalone\",\n  \"background_color\": \"#ffffff\",\n  \"theme_color\": \"#2196F3\",\n  \"icons\": &#91;\n    {\n      \"src\": \"\/icone-192x192.png\",\n      \"sizes\": \"192x192\",\n      \"type\": \"image\/png\"\n    },\n    {\n      \"src\": \"\/icone-512x512.png\",\n      \"sizes\": \"512x512\",\n      \"type\": \"image\/png\"\n    },\n    {\n      \"src\": \"\/icone-mascara-192x192.png\",\n      \"sizes\": \"192x192\",\n      \"type\": \"image\/png\",\n      \"purpose\": \"maskable\"\n    }\n  ]\n}<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>No HTML:<\/strong> Voc\u00ea deve adicionar a seguinte linha dentro da tag <code>&lt;head><\/code> do seu arquivo <code>index.html<\/code> (ou <em>template<\/em> principal):<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"manifest\" href=\"\/manifest.json\"&gt;\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\">Explica\u00e7\u00e3o das Propriedades (Boas Pr\u00e1ticas):<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-medium-font-size\"><strong><code>description<\/code>:<\/strong> Uma breve descri\u00e7\u00e3o que pode ser usada em interfaces de instala\u00e7\u00e3o.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong><code>background_color<\/code>:<\/strong> Usada para a tela de <em>splash screen<\/em> (carregamento inicial) enquanto o PWA est\u00e1 carregando.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong><code>icons<\/code> (M\u00faltiplos Tamanhos):<\/strong> \u00c9 crucial fornecer m\u00faltiplos tamanhos (especialmente 192x192px e 512x512px) para garantir que o PWA se adapte bem em diferentes dispositivos.<\/li>\n\n\n\n<li class=\"has-medium-font-size\"><strong><code>purpose: \"maskable\"<\/code>:<\/strong> Indica que o \u00edcone se adapta a formas de \u00edcones nativos (como c\u00edrculos ou <em>squircle<\/em>), melhorando a apar\u00eancia em sistemas como o Android.<\/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\">Passo 2: O Service Worker (Tornando-o Confi\u00e1vel)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O <strong>Service Worker (SW)<\/strong> \u00e9 um <em>script<\/em> JavaScript que opera em segundo plano. Ele \u00e9 a espinha dorsal da funcionalidade <em>offline<\/em> e do alto desempenho.<\/p>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>A. Registro do SW (No seu JavaScript principal):<\/strong> Voc\u00ea primeiro precisa registrar o <em>script<\/em> do SW no navegador.<\/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>\/\/ Verifica se o navegador suporta Service Workers\nif ('serviceWorker' in navigator) {\n  navigator.serviceWorker.register('\/service-worker.js')\n    .then(reg =&gt; console.log('SW registrado com sucesso.'))\n    .catch(err =&gt; console.error('Erro no registro do SW:', err));\n}\n<\/code><\/pre>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong>B. Script do SW (<code>service-worker.js<\/code>):<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">O SW precisa escutar dois eventos principais: <code>install<\/code> (para definir o cache inicial) e <code>fetch<\/code> (para interceptar requisi\u00e7\u00f5es de rede).<\/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 CACHE_NAME = 'cache-v1';\nconst urlsToCache = &#91;'\/', '\/styles.css', '\/script.js'];\n\n\/\/ Evento 1: Instala\u00e7\u00e3o - Abre o cache e armazena os assets est\u00e1ticos\nself.addEventListener('install', event =&gt; {\n  event.waitUntil(\n    caches.open(CACHE_NAME).then(cache =&gt; {\n      return cache.addAll(urlsToCache);\n    })\n  );\n});\n\n\/\/ Evento 2: Fetch - Intercepta as requisi\u00e7\u00f5es e serve do cache primeiro\nself.addEventListener('fetch', event =&gt; {\n  event.respondWith(\n    caches.match(event.request).then(response =&gt; {\n      \/\/ Retorna a resposta do cache, ou busca na rede\n      return response || fetch(event.request);\n    })\n  );\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\">Passo 3: Metadados do App (Garantindo Compatibilidade)<\/h3>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">\u00c9 crucial adicionar as <em>meta tags<\/em> do Apple iOS\/Safari, pois eles n\u00e3o usam o Manifest da mesma forma que o Android\/Chrome para a instala\u00e7\u00e3o inicial.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">HTML<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta name=\"apple-mobile-web-app-capable\" content=\"yes\"&gt;\n&lt;meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\"&gt;\n&lt;link rel=\"apple-touch-icon\" href=\"\/icone-180x180.png\"&gt;\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 PWA: Primeiros Passos<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\">PWA: Primeiros Passos: Transformar um site em PWA \u00e9 uma jornada <strong>progressiva<\/strong> que come\u00e7a com a garantia da <strong>Seguran\u00e7a (HTTPS)<\/strong> e da <strong>Responsividade<\/strong>. Os passos t\u00e9cnicos iniciais cruciais s\u00e3o: a cria\u00e7\u00e3o do <strong>Manifest (JSON)<\/strong> para a instalabilidade, e a implementa\u00e7\u00e3o e registro do <strong>Service Worker (JS)<\/strong> para a confiabilidade <em>offline<\/em> e o alto desempenho. Ao cumprir esses requisitos, seu site estar\u00e1 pronto para ser instalado e utilizado como um aplicativo nativo em dispositivos modernos.<\/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\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\"><\/p>\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>PWA: Primeiros Passos: A transi\u00e7\u00e3o de um website tradicional para um Progressive Web App (PWA)&#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-1509","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>PWA: Primeiros Passos - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Pwa: Primeiros Passos: A era digital exige solu\u00e7\u00f5es cada vez mais eficientes e intuitivas para atender \u00e0s demandas dos usu\u00e1rios. Nesse ...\" \/>\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-primeiros-passos\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"PWA: Primeiros Passos - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Pwa: Primeiros Passos: A era digital exige solu\u00e7\u00f5es cada vez mais eficientes e intuitivas para atender \u00e0s demandas dos usu\u00e1rios. Nesse ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/pwa-primeiros-passos\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-25T15:16:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-17T16:41:24+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-primeiros-passos\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-primeiros-passos\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"PWA: Primeiros Passos\",\"datePublished\":\"2024-08-25T15:16:54+00:00\",\"dateModified\":\"2025-11-17T16:41:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-primeiros-passos\\\/\"},\"wordCount\":580,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-primeiros-passos\\\/#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-primeiros-passos\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-primeiros-passos\\\/\",\"name\":\"PWA: Primeiros Passos - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-primeiros-passos\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-primeiros-passos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/Capa-Artigos.webp\",\"datePublished\":\"2024-08-25T15:16:54+00:00\",\"dateModified\":\"2025-11-17T16:41:24+00:00\",\"description\":\"Pwa: Primeiros Passos: A era digital exige solu\u00e7\u00f5es cada vez mais eficientes e intuitivas para atender \u00e0s demandas dos usu\u00e1rios. Nesse ...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-primeiros-passos\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-primeiros-passos\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/pwa-primeiros-passos\\\/#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-primeiros-passos\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"PWA: Primeiros Passos\"}]},{\"@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: Primeiros Passos - BLOG THIAGO ROSSI","description":"Pwa: Primeiros Passos: A era digital exige solu\u00e7\u00f5es cada vez mais eficientes e intuitivas para atender \u00e0s demandas dos usu\u00e1rios. Nesse ...","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-primeiros-passos\/","og_locale":"pt_BR","og_type":"article","og_title":"PWA: Primeiros Passos - BLOG THIAGO ROSSI","og_description":"Pwa: Primeiros Passos: A era digital exige solu\u00e7\u00f5es cada vez mais eficientes e intuitivas para atender \u00e0s demandas dos usu\u00e1rios. Nesse ...","og_url":"https:\/\/thiagorossi.com.br\/blog\/pwa-primeiros-passos\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-08-25T15:16:54+00:00","article_modified_time":"2025-11-17T16:41:24+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-primeiros-passos\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/pwa-primeiros-passos\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"PWA: Primeiros Passos","datePublished":"2024-08-25T15:16:54+00:00","dateModified":"2025-11-17T16:41:24+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/pwa-primeiros-passos\/"},"wordCount":580,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/pwa-primeiros-passos\/#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-primeiros-passos\/","url":"https:\/\/thiagorossi.com.br\/blog\/pwa-primeiros-passos\/","name":"PWA: Primeiros Passos - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/pwa-primeiros-passos\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/pwa-primeiros-passos\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/08\/Capa-Artigos.webp","datePublished":"2024-08-25T15:16:54+00:00","dateModified":"2025-11-17T16:41:24+00:00","description":"Pwa: Primeiros Passos: A era digital exige solu\u00e7\u00f5es cada vez mais eficientes e intuitivas para atender \u00e0s demandas dos usu\u00e1rios. Nesse ...","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/pwa-primeiros-passos\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/pwa-primeiros-passos\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/pwa-primeiros-passos\/#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-primeiros-passos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"PWA: Primeiros Passos"}]},{"@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\/1509","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=1509"}],"version-history":[{"count":2,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1509\/revisions"}],"predecessor-version":[{"id":4722,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1509\/revisions\/4722"}],"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=1509"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1509"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}