{"id":1069,"date":"2025-05-02T22:50:15","date_gmt":"2025-05-03T01:50:15","guid":{"rendered":"https:\/\/code4delphi.com.br\/blog\/?p=1069"},"modified":"2025-05-03T04:03:23","modified_gmt":"2025-05-03T07:03:23","slug":"pwa-com-delphi","status":"publish","type":"post","link":"https:\/\/code4delphi.com.br\/blog\/pwa-com-delphi\/","title":{"rendered":"PWA com Delphi"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"910\" height=\"251\" src=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2025\/05\/PWA-Delphi-3.png\" alt=\"PWA com Delphi\" class=\"wp-image-1099\" srcset=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2025\/05\/PWA-Delphi-3.png 910w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2025\/05\/PWA-Delphi-3-300x83.png 300w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2025\/05\/PWA-Delphi-3-768x212.png 768w\" sizes=\"auto, (max-width: 910px) 100vw, 910px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">PWA ou Progressive Web Apps (Aplicativos Web Progressivos), oferecendo uma experi\u00eancia semelhante \u00e0 de aplicativos nativos com a flexibilidade da web. Eles combinam o melhor dos dois mundos: s\u00e3o acess\u00edveis como sites, mas podem ser instalados, funcionar offline e utilizar recursos do dispositivo como se fossem apps nativos.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title ez-toc-toggle\" style=\"cursor:pointer\">Sum\u00e1rio<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Alternar tabela de conte\u00fado\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/code4delphi.com.br\/blog\/pwa-com-delphi\/#O_que_e_e_quais_as_vantagens_de_um_PWA\" >O que \u00e9 e quais as vantagens de um PWA?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/code4delphi.com.br\/blog\/pwa-com-delphi\/#Quem_usa_PWA\" >Quem usa PWA<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/code4delphi.com.br\/blog\/pwa-com-delphi\/#Criando_uma_PWA_com_Delphi\" >Criando uma PWA com Delphi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/code4delphi.com.br\/blog\/pwa-com-delphi\/#Testando_sua_PWA\" >Testando sua PWA<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/code4delphi.com.br\/blog\/pwa-com-delphi\/#Convertendo_Projetos_Web_Existentes\" >Convertendo Projetos Web Existentes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/code4delphi.com.br\/blog\/pwa-com-delphi\/#Video_de_demonstracao\" >V\u00eddeo de demonstra\u00e7\u00e3o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/code4delphi.com.br\/blog\/pwa-com-delphi\/#Consideracoes_Finais\" >Considera\u00e7\u00f5es Finais<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"O_que_e_e_quais_as_vantagens_de_um_PWA\"><\/span>O que \u00e9 e quais as vantagens de um PWA?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00e3o uma alternativa aos aplicativos tradicionais que s\u00e3o instalados diretamente nos dispositivos. A ideia \u00e9 ter uma aplica\u00e7\u00e3o web responsiva que possa, de certa forma, ser instalada no seu dispositivo Android, iOS, Windows ou Linux por meio de algumas configura\u00e7\u00f5es especiais. Isso d\u00e1 ao PWA alguns acessos adicionais a recursos e permiss\u00f5es nativas dos dispositivos Android ou iOS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">O usu\u00e1rio vai configurar esse PWA como se fosse um atalho na tela inicial do Android, iOS ou at\u00e9 mesmo do Windows ou Linux. Ao clicar nesse atalho, ele ser\u00e1 aberto como se fosse um app nativo, embora continue utilizando o navegador por baixo dos panos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Entre os principais benef\u00edcios de uma PWA, podemos destacar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Capacidade de <strong>instala\u00e7\u00e3o <\/strong>como se fosse um app nativo<\/li>\n\n\n\n<li><strong>Offline<\/strong>: Funciona mesmo sem conex\u00e3o com a internet, usando cache inteligente (via Service Workers).<\/li>\n\n\n\n<li>Pode lidar com <strong>cache<\/strong><\/li>\n\n\n\n<li>Pode ser distribu\u00eddo em <strong>lojas <\/strong>(como a Play Store)<\/li>\n\n\n\n<li>Pode ser executado no <strong>navegador<\/strong><\/li>\n\n\n\n<li>Pode ser instalado no: <strong>Windows, macOS, Linux, Android<\/strong> e at\u00e9 mesmo em um Xbox<\/li>\n\n\n\n<li><strong>Responsividade<\/strong>. Se adapta a qualquer tamanho de tela, seja celular, tablet ou desktop.<\/li>\n\n\n\n<li><strong>Exibi\u00e7\u00e3o em tela cheia<\/strong><\/li>\n\n\n\n<li><strong>Atualiza\u00e7\u00f5es autom\u00e1ticas<\/strong>: Sempre entrega a vers\u00e3o mais recente sem interven\u00e7\u00e3o do usu\u00e1rio.<\/li>\n\n\n\n<li>Deve sempre usar <strong>HTTPS <\/strong>para garantir a integridade dos dados e a seguran\u00e7a da navega\u00e7\u00e3o.<\/li>\n\n\n\n<li>Pode usar <strong>push notification<\/strong>, como apps nativos.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Quem_usa_PWA\"><\/span>Quem usa PWA<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sites como Twitter, Pinterest e Starbucks usam PWAs para permitir que usu\u00e1rios tenham experi\u00eancias r\u00e1pidas e completas, mesmo com conex\u00f5es lentas ou inst\u00e1veis.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"538\" height=\"68\" src=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2025\/05\/image-2.png\" alt=\"\" class=\"wp-image-1083\" style=\"width:417px;height:auto\" srcset=\"https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2025\/05\/image-2.png 538w, https:\/\/code4delphi.com.br\/blog\/wp-content\/uploads\/2025\/05\/image-2-300x38.png 300w\" sizes=\"auto, (max-width: 538px) 100vw, 538px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Criando_uma_PWA_com_Delphi\"><\/span>Criando uma PWA com Delphi<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">O TMS WEB Core facilita a cria\u00e7\u00e3o de PWAs ao fornecer um template espec\u00edfico:  &#8220;TMS WEB PWA Application&#8221; (acessando o menu File &gt; New &gt; Other &gt; TMS Web &gt; TMS WEB PWA Application). Ao selecionar este template, seu projeto j\u00e1 incluir\u00e1 arquivos essenciais como ServiceWorker.js e manifest.json, al\u00e9m de \u00edcones para diferentes plataformas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ao criar um novo projeto com suporte a PWA, os arquivos essenciais como <code>ServiceWorker.js<\/code>, <code>manifest.json<\/code> e \u00edcones j\u00e1 v\u00eam prontos para uso. Com eles, \u00e9 poss\u00edvel:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Garantir a instala\u00e7\u00e3o da aplica\u00e7\u00e3o na tela inicial do dispositivo<\/li>\n\n\n\n<li>Controlar o comportamento offline com Service Workers<\/li>\n\n\n\n<li>Exibir a aplica\u00e7\u00e3o em modo tela cheia<\/li>\n\n\n\n<li>Personalizar o nome, \u00edcone e tema exibidos ao usu\u00e1rio<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Testando_sua_PWA\"><\/span>Testando sua PWA<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para verificar se sua aplica\u00e7\u00e3o est\u00e1 pronta para ser considerada uma PWA, a ferramenta Lighthouse, dispon\u00edvel no Google Chrome, pode ser usada para realizar uma auditoria completa. Ela verifica crit\u00e9rios como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Conex\u00e3o segura (HTTPS)<\/li>\n\n\n\n<li>Exist\u00eancia e validade do <code>manifest.json<\/code><\/li>\n\n\n\n<li>Funcionamento correto do Service Worker<\/li>\n\n\n\n<li>Comportamento de instala\u00e7\u00e3o e exibi\u00e7\u00e3o da aplica\u00e7\u00e3o<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Convertendo_Projetos_Web_Existentes\"><\/span>Convertendo Projetos Web Existentes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Se voc\u00ea j\u00e1 possui um projeto com TMS WEB Core, a convers\u00e3o para PWA \u00e9 simples:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Adicione os arquivos necess\u00e1rios<\/strong>: Inclua <code>ServiceWorker.js<\/code>, <code>manifest.json<\/code> e os \u00edcones ao seu projeto.<\/li>\n\n\n\n<li><strong>Atualize o HTML<\/strong>: Modifique o arquivo <code>Project.html<\/code> para referenciar o <code>manifest.json<\/code> e registrar o Service Worker.<\/li>\n\n\n\n<li><strong>Configure o servidor<\/strong>: Certifique-se de que sua aplica\u00e7\u00e3o est\u00e1 sendo servida por HTTPS.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Video_de_demonstracao\"><\/span>V\u00eddeo de demonstra\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para demonstrar na pr\u00e1tica como \u00e9 simples criar um PWA com o Delphi, criamos um v\u00eddeo demonstrando passo a passo como realizar todos os processo de forma r\u00e1pida e facil com o Delphi. Segue o link do v\u00eddeo: <a href=\"https:\/\/www.youtube.com\/watch?v=-RFs-odXcfU&amp;list=PLLHSz4dOnnN2Xlf7OX47cF20gbmz9-9z0&amp;index=09\" target=\"_blank\" rel=\"noreferrer noopener\">Code4Delphi &#8211; YouTube<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Reposit\u00f3rio no GitHub: <a href=\"https:\/\/github.com\/Code4Delphi\/pwa-delphi\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/Code4Delphi\/pwa-delphi<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Consideracoes_Finais\"><\/span>Considera\u00e7\u00f5es Finais<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Com o TMS WEB Core, desenvolver PWAs no Delphi torna-se uma tarefa acess\u00edvel, permitindo que voc\u00ea leve suas aplica\u00e7\u00f5es a um novo patamar de usabilidade e alcance. Aproveite as vantagens das PWAs e ofere\u00e7a aos seus usu\u00e1rios uma experi\u00eancia rica e moderna.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Por hoje \u00e9 s\u00f3, deixe o seu coment\u00e1rio. Valeu!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>PWA ou Progressive Web Apps (Aplicativos Web Progressivos), oferecendo uma experi\u00eancia semelhante \u00e0 de aplicativos nativos&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[1,98],"tags":[103,104],"class_list":["post-1069","post","type-post","status-publish","format-standard","hentry","category-geral","category-tms","tag-pwa","tag-pwa-com-delphi"],"_links":{"self":[{"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1069","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1069"}],"version-history":[{"count":18,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1069\/revisions"}],"predecessor-version":[{"id":1106,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/posts\/1069\/revisions\/1106"}],"wp:attachment":[{"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4delphi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}